Data record

The data record component is used to show a single record of data. Including all the attributes the make up the record and the resouce it was collected from.

Open example in new window
HTML 


<article class="dl-data-record">
    <h4 class="govuk-heading-s dl-data-record__identifier">#9:041560991f8c2e27de78b0e49e9e9f2282879bdad6564681568d5ddd2bd4de33</h4>
    <div class="dl-data-record__body">
      <dl class="govuk-summary-list">

<div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">conservation-area</dt>
    <dd class="govuk-summary-list__value">CA10</dd>
</div>
<div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">documentation-url</dt>
    <dd class="govuk-summary-list__value"></dd>
</div>
<div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">end-date</dt>
    <dd class="govuk-summary-list__value"></dd>
</div>
<div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">entry-date</dt>
    <dd class="govuk-summary-list__value">2020-09-14</dd>
</div>
<div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">name</dt>
    <dd class="govuk-summary-list__value">Rainhill Area 2</dd>
</div>  
<div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">organisation</dt>
    <dd class="govuk-summary-list__value">local-authority-eng:SHN</dd>
</div>
<div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">start-date</dt>
    <dd class="govuk-summary-list__value"></dd>
</div>

      </dl>
    </div>
    <footer class="govuk-!-font-size-16 dl-data-record__resource">From resource <a href="https://github.com/digital-land/conservation-area-geography-collection/blob/master/collection/resource/043fd72cc71429aad3fffa1a42a75d0c063f5946f5de88a65eb4bc9a71bfb54e" class="govuk-link">041560991f8c2e27d...</a></footer>
    </article>
Jinja 
{%- from "digital-land-frontend/components/data-record/macro.jinja" import dlDataRecordPanel %}
{% set datalist %} 
<div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">conservation-area</dt>
    <dd class="govuk-summary-list__value">CA10</dd>
</div>
<div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">documentation-url</dt>
    <dd class="govuk-summary-list__value"></dd>
</div>
<div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">end-date</dt>
    <dd class="govuk-summary-list__value"></dd>
</div>
<div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">entry-date</dt>
    <dd class="govuk-summary-list__value">2020-09-14</dd>
</div>
<div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">name</dt>
    <dd class="govuk-summary-list__value">Rainhill Area 2</dd>
</div>  
<div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">organisation</dt>
    <dd class="govuk-summary-list__value">local-authority-eng:SHN</dd>
</div>
<div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">start-date</dt>
    <dd class="govuk-summary-list__value"></dd>
</div>
{% endset -%}
{{ dlDataRecordPanel({
    "identifier": "9:041560991f8c2e27de78b0e49e9e9f2282879bdad6564681568d5ddd2bd4de33",
    "html": datalist,
    "resource": {
        "identifier": "041560991f8c2e27de78b0e49e9e9f2282879bdad6564681568d5ddd2bd4de33",
        "url": "https://github.com/digital-land/conservation-area-geography-collection/blob/master/collection/resource/043fd72cc71429aad3fffa1a42a75d0c063f5946f5de88a65eb4bc9a71bfb54e"
    }
    })
}}

Reference cells

Use the dlDataReferenceCell macro to change an identifier value to a link through to the related data record. The original identifier is still shown in brackets.

The example below shows how the identifier local-authority-eng:HAG is displayed as a link to Harrogate Borough Council along with the identifier.

Open example in new window
HTML 



<article class="dl-data-record">
    <h4 class="govuk-heading-s dl-data-record__identifier">#con-area:18u2</h4>
    <div class="dl-data-record__body">
      <dl class="govuk-summary-list">

<div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">Organisation</dt>
    <dd class="govuk-summary-list__value">

<a href="/" class="govuk-link">Harrogate Borough Council</a>


<span title="Organisation identifier: local-authority-eng:HAG" class="govuk-!-font-size-16 dl-data-reference-cell">
  (<span class="govuk-visually-hidden">Organisation identifier is </span>local-authority-eng:HAG)
</span>

</dd>
</div>

      </dl>
    </div>
    <footer class="govuk-!-font-size-16 dl-data-record__resource">From resource <a href="https://github.com/digital-land/conservation-area-geography-collection/blob/master/collection/resource/043fd72cc71429aad3fffa1a42a75d0c063f5946f5de88a65eb4bc9a71bfb54e" class="govuk-link">041560991f8c2e27d...</a></footer>
    </article>
Jinja 
{%- from "digital-land-frontend/components/data-record/macro.jinja" import dlDataRecordPanel %}
{%- from "digital-land-frontend/components/data-reference-cell/macro.jinja" import dlDataReferenceCell %}

{% set datalist %} 
<div class="govuk-summary-list__row">
    <dt class="govuk-summary-list__key">Organisation</dt>
    <dd class="govuk-summary-list__value">
        {{- dlDataReferenceCell({
            "display_name": "Harrogate Borough Council",
            "identifier": "local-authority-eng:HAG",
            "type": "Organisation",
            "url": "/"
        }) -}}
    </dd>
</div>
{% endset -%}
{{ dlDataRecordPanel({
    "identifier": "con-area:18u2",
    "html": datalist,
    "resource": {
        "identifier": "041560991f8c2e27de78b0e49e9e9f2282879bdad6564681568d5ddd2bd4de33",
        "url": "https://github.com/digital-land/conservation-area-geography-collection/blob/master/collection/resource/043fd72cc71429aad3fffa1a42a75d0c063f5946f5de88a65eb4bc9a71bfb54e"
    }
    })
}}