includes.md

Prototype kit “includes”

How to re-use content with includes

Create code that can be re-used, eg across a journey

For example, a list of links to alternative search methods. We can re-use the same code and then eg change the copy or add another item in a single place to update all pages at once.

The same content can be quickly re-used across multiple pages

Code

Create a html file in the app/views/includes folder

Add sample code to the html file

<aside class="app-related-items govuk-!-margin-bottom-" role="complementary"> 
  <h2 class="govuk-heading-s" id="subsection-title"> 
    Other ways to search for a local land charge 
  </h2> 
  <nav role="navigation" aria-labelledby="subsection-title"> 
    <ul class="govuk-list govuk-list--spaced govuk-!-font-size-16"> 
      <li><a href="search-by-map">Search by map</a></li> 
      <li><a href="search-by-title-number">Search by title number</a></li> 
      <li><a href="search-by-coordinates">Search by coordinates</a></li> 
      <li><a href="search-by-inspire-id">Search by INSPIRE ID</a></li> 
      <li>Contact HM Land Registry on <b>0300 006 0444
      </b> if you are struggling to use this service</li> 
    </ul> 
  </nav> 
</aside> 

In the actual pages where this content is needed, include the above html using nunjucks, eg

<div class="govuk-grid-column-one-third"> 
  {% include "includes/search-methods.html" %}
</div> 

Part two: conditional content

By setting a variable in the parent page (eg we can set the variable to describe the method of search), we can then display content as required by the parent, so in this example, we can displaying the whole list but skip the list item for search by map on the map page.

Create a second version of the search-methods.html (search-methods-v2.html!)

Edit that file to add conditional nunjucks code. This will hide the specific list item for that method variable

{% if method != "map" %} 
  <li><a href="search-by-map">Search by map</a></li> 
{% endif %} 

Back in the parent search-by-map file, (see also search-by-title-number and search-by-coordinates) set the appropriate method as a nunjucks variable, eg

<div class="govuk-grid-column-two-thirds"> 
  {% set method = "map" %} 
  {% include "includes/search-methods-v2.html" %} 
</div> 

When this page is displayed in the browser, the map list item is skipped over and does not display: