Skip to main content

Help users to Send and reply to messages

Experimental

Messages - message list

<ul class="ons-message-list" aria-label="Message list for ONS Business Surveys">
  <li class="ons-message-item" aria-labelledby="message1">
    <h3 class="ons-message-item__subject" id="message1">
      <a href="#0" class="ons-u-fs-r--b">BRES 2016 survey response query</a>
      <span class="ons-u-fs-s">(New)</span>
    </h3>
    <dl class="ons-message-item__metadata" aria-label="Message information">
      <dt class="ons-message-item__metadata-term ons-u-vh">From:</dt>
      <dd class="ons-message-item__metadata-value ons-u-fs-r--b">ONS Business Surveys Team</dd>
      <dt class="ons-message-item__metadata-term ons-u-vh">Date:</dt>
      <dd class="ons-message-item__metadata-value ons-u-fs-s">Tue 4 Jul 2020 at 7:47</dd>
    </dl>
    <div class="ons-message-item__body" aria-label="Message preview">
      Hi Jacky. Thanks for that information. Your figures have allowed us to create more accurate…
    </div>
    <div class="ons-message-item__link ons-u-vh"><a href="#0">Read the message: BRES 2016 survey response query</a></div>
  </li>
  <li class="ons-message-item" aria-labelledby="message2">
    <h3 class="ons-message-item__subject" id="message2">
      <a href="#0" class="ons-u-fs-r--b">BRES 2015 Enquiry on data</a>
    </h3>
    <dl class="ons-message-item__metadata" aria-label="Message information">
      <dt class="ons-message-item__metadata-term ons-u-vh">From:</dt>
      <dd class="ons-message-item__metadata-value ons-u-fs-r--b">Jacky Turner</dd>
      <dt class="ons-message-item__metadata-term ons-u-vh">Date:</dt>
      <dd class="ons-message-item__metadata-value ons-u-fs-s">Mon 1 Oct 2019 at 9:52</dd>
    </dl>
    <div class="ons-message-item__body" aria-label="Message preview">
      Hi Jacky, Thank you for returning the Business Register and Employment Survey (BRES) 2016…
    </div>
    <div class="ons-message-item__link ons-u-vh"><a href="#0">Read the message: BRES 2015 Enquiry on data</a></div>
  </li>
</ul>
{% from "components/message-list/_macro.njk" import onsMessageList %}

{{ 
    onsMessageList({
        "ariaLabel": "Message list for ONS Business Surveys",
        "unreadText": "New",
        "fromLabel": "From",
        "dateLabel": "Date",
        "hiddenReadLabel": "Read the message",
        "ariaLabelMetaData": "Message information",
        "ariaLabelMsg": "Message preview",
        "messages": [
            {
                "id": "message1",
                "unread": true,
                "url": "#0",
                "subject": "BRES 2016 survey response query",
                "fromText": "ONS Business Surveys Team",
                "dateText": "Tue 4 Jul 2020 at 7:47",
                "body": "Hi Jacky. Thanks for that information. Your figures have allowed us to create more accurate…"
            },                        
            {
                "id": "message2",   
                "url": "#0",
                "subject": "BRES 2015 Enquiry on data",
                "fromText": "Jacky Turner",
                "dateText": "Mon 1 Oct 2019 at 9:52",
                "body": "Hi Jacky, Thank you for returning the Business Register and Employment Survey (BRES) 2016…"
            }
        ]
    })
}}

When to use this pattern

Use this pattern as a way to display an index list of conversations/threads between internal and external users of a service.

Messages - conversation thread

<div class="ons-grid">
  <div class="ons-grid__col ons-col-8@m">
    <section role="region" aria-label="Conversation: BRES 2017 clarification required for Bolts &amp; Ratchets Ltd">
      <h1 class="ons-u-fs-l"><span class="ons-u-vh">Subject: </span>BRES 2017 clarification required for Bolts &amp; Ratchets Ltd</h1>
      <dl class="ons-metadata metadata__list ons-grid ons-grid--gutterless ons-u-cf ons-u-mb-l" title="Information about the survey and respondant" aria-label="Information about the survey and respondant">
        <dt class="ons-metadata__term ons-grid__col ons-col-3@m">Survey:</dt>
        <dd class="ons-metadata__value ons-grid__col ons-col-9@m">Bricks &amp; Blocks</dd>
        <dt class="ons-metadata__term ons-grid__col ons-col-3@m">RU Ref:</dt>
        <dd class="ons-metadata__value ons-grid__col ons-col-9@m">49900000118</dd>
        <dt class="ons-metadata__term ons-grid__col ons-col-3@m">Business:</dt>
        <dd class="ons-metadata__value ons-grid__col ons-col-9@m">Bolts &amp; Ratchets Ltd.</dd>
      </dl>
      <div class="ons-message ons-message--sent">
        <div class="ons-message__head">
          <dl class="ons-message__metadata">
            <dt class="ons-message__term ons-u-fw-b">From:</dt>
            <dd class="ons-message__value ons-u-fw-b">ONS surveys</dd>
            <br>
            <dt class="ons-message__term ons-u-fs-s">Sent:</dt>
            <dd class="ons-message__value ons-u-fs-s">Today at 12:56</dd>
          </dl>
        </div>
        <div class="ons-message__body">
          <p>Dear Jacky<br><br>Thanks for returning the BRES 2017 spreadsheet for Bolts &amp; Ratchets. I wonder if I could clarify employee figures for two of the sites, as they’re very different to last year’s figures.
            The sites are:<br>Macclesfield<br>
            2015: 45 - 2017: 1<br>and Skipton<br>
            2015: 11 - 2017: 183<br>Are these figures correct?<br>
            <br>
            Many thanks<br>
            David Cleere<br>
            BRES Survey Team
          </p>
        </div>
      </div>
      <div class="ons-message ons-message--received">
        <div class="ons-message__head">
          <dl class="ons-message__metadata">
            <dt class="ons-message__term ons-u-fw-b">From:</dt>
            <dd class="ons-message__value ons-u-fw-b">Jackie Turner</dd>
            <br>
            <dt class="ons-message__term ons-u-fs-s">Sent:</dt>
            <dd class="ons-message__value ons-u-fs-s">Today at 13:15</dd>
          </dl>
        </div>
        <div class="ons-message__body">
          <p>Hi Dave<br>Thanks for your message. Yes, the figures are right - we had a big expansion last year when we bought The Widgets Group and moved staff to Skipton.
            <br><br>Thanks, Jacky
          </p>
        </div>
      </div>
      <div class="ons-message ons-message--sent">
        <div class="ons-message__head">
          <dl class="ons-message__metadata">
            <dt class="ons-message__term ons-u-fw-b">From:</dt>
            <dd class="ons-message__value ons-u-fw-b">ONS surveys</dd>
            <br>
            <dt class="ons-message__term ons-u-fs-s">Sent:</dt>
            <dd class="ons-message__value ons-u-fs-s">Today at 13:30</dd>
          </dl>
        </div>
        <div class="ons-message__body">
          <p>Dear Jacky<br><br>Thank you for clarifying. I will now process your data.<br>
            <br>
            Many thanks<br>
            David Cleere<br>
            BRES Survey Team
          </p>
        </div>
      </div>
      <div class="ons-message ons-message--received">
        <div class="ons-message__head">
          <dl class="ons-message__metadata">
            <dt class="ons-message__term ons-u-fw-b">From:</dt>
            <dd class="ons-message__value ons-u-fw-b">Jackie Turner</dd>
            <br>
            <dt class="ons-message__term ons-u-fs-s">Sent:</dt>
            <dd class="ons-message__value ons-u-fs-s">Today at 13:15</dd>
          </dl>
          <a class="ons-message__unread-link" href="#">Mark unread</a>
        </div>
        <div class="ons-message__body">
          <p>Hi Dave<br>Brilliant.
            <br><br>Thanks, Jacky
          </p>
        </div>
      </div>
      <div class="ons-js-reply">
        <div class="ons-field">
          <label class="ons-label  " for="reply">Reply
          </label>
          <textarea id="reply" class="ons-input ons-input--textarea   " name="reply" rows="8"></textarea>
        </div>
        <div class="ons-grid ons-grid--flex ons-grid--gutterless ons-grid--vertical-center ons-grid--no-wrap@s ons-u-mt-m ons-u-mb-m">
          <div class="ons-grid__col">
            <button type="button" class="ons-btn">
              <span class="ons-btn__inner">Send message</span>
            </button>
          </div>
          <div class="ons-grid__col ons-u-ml-m">
            <a href="#0">Close conversation</a>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>
{% from "components/message/_macro.njk" import onsMessage %}
{% from "components/metadata/_macro.njk" import onsMetadata %}
{% from "components/reply/_macro.njk" import onsReply %}

<div class="ons-grid">
    <div class="ons-grid__col ons-col-8@m">
        <section role="region" aria-label="Conversation: BRES 2017 clarification required for Bolts &amp; Ratchets Ltd">
            <h1 class="ons-u-fs-l"><span class="ons-u-vh">Subject: </span>BRES 2017 clarification required for Bolts &amp; Ratchets Ltd</h1>
            {{
                onsMetadata({
                    "metadataLabel": "Information about the survey and respondant",
                    "termCol": "3",
                    "descriptionCol": "9",
                    "itemsList": [
                        {
                            "term": "Survey:",
                            "descriptions": [
                                {
                                    "description": "Bricks & Blocks"
                                }
                            ]
                        },
                        {
                            "term": "RU Ref:",
                            "descriptions": [
                                {
                                    "description": "49900000118"
                                }
                            ]
                        },
                        {
                            "term": "Business:",
                            "descriptions": [
                                {
                                    "description": "Bolts & Ratchets Ltd."
                                }
                            ]
                        }
                    ]
                })
            }}
            {% call onsMessage({
                    "type": 'sent',
                    "fromLabel": 'From',
                    "fromValue": 'ONS surveys',
                    "sentLabel": 'Sent',
                    "sentValue": 'Today at 12:56'
                })
            %}
            <p>Dear Jacky<br><br>Thanks for returning the BRES 2017 spreadsheet for Bolts &amp; Ratchets. I wonder if I could clarify employee figures for two of the sites, as they’re very different to last year’s figures.
                The sites are:<br>Macclesfield<br>
                2015: 45 - 2017: 1<br>and Skipton<br>
                2015: 11 - 2017: 183<br>Are these figures correct?<br>
                <br>
                Many thanks<br>
                David Cleere<br>
                BRES Survey Team</p>
            {% endcall %}

            {% call onsMessage({
                    "type": 'received',
                    "fromLabel": 'From',
                    "fromValue": 'Jackie Turner',
                    "sentLabel": 'Sent',
                    "sentValue": 'Today at 13:15'
                })
            %}
                <p>Hi Dave<br>Thanks for your message. Yes, the figures are right - we had a big expansion last year when we bought The Widgets Group and moved staff to Skipton.
                <br><br>Thanks, Jacky</p>
            {% endcall %}

            {% call onsMessage({
                    "type": 'sent',
                    "fromLabel": 'From',
                    "fromValue": 'ONS surveys',
                    "sentLabel": 'Sent',
                    "sentValue": 'Today at 13:30'
                })
            %}
            <p>Dear Jacky<br><br>Thank you for clarifying. I will now process your data.<br>
                <br>
                Many thanks<br>
                David Cleere<br>
                BRES Survey Team</p>
            {% endcall %}

            {% call onsMessage({
                    "type": 'received',
                    "fromLabel": 'From',
                    "fromValue": 'Jackie Turner',
                    "sentLabel": 'Sent',
                    "sentValue": 'Today at 13:15',
                    "unreadLink": '#',
                    "unreadLinkText": 'Mark unread'
                })
            %}
             <p>Hi Dave<br>Brilliant.
                <br><br>Thanks, Jacky</p>
            {% endcall %}

            {{
                onsReply({
                    "textarea": {
                        "id": "reply",
                        "name": "reply",
                        "label": {
                            "text": "Reply"
                        }
                    },
                    "button": {
                        "type": 'button',
                        "text": 'Send message'
                    },
                    "closeLinkText": 'Close conversation',
                    "closeLinkUrl": '#0'
                })
            }}
        </section>
    </div>
</div>

When to use this pattern

Use this pattern as a way to display conversations/threads between internal and external users of a service.

How to use this pattern

This pattern consists of the following elements/components:

  • Heading that displays the subject of the message thread
  • Metadata that provides information about the service or survey
  • A message thread
  • Optional “Mark as unread” link
  • Form field (textarea) to create a message
  • Submit button to send a message
  • Optional close button to end the conversation

The heading that displays the subject should contain a visually hidden span, for example, <span class="ons-u-vh">Subject: </span>. This helps to provide context to screen reader users about the page.

Each message in a thread is a separate message component. Set the type parameter as sent to display the sent message correctly. Set the type parameter as received to display the received message correctly. You can optionally set the unreadLink and unreadLinkText parameters on the last received message to allow the user to mark the message as unread.

Each message can be stacked to display the conversation/thread.

Help improve this pattern

Let us know how we could improve this pattern or share your user research findings. Discuss the ‘Send and reply to messages’ pattern on GitHub