Help users to Send and reply to messages
Experimental : This pattern needs more research.
Messages - message list
Example: Example Message List contents
Nunjucks
{% from "components/message-list/_macro.njk" import onsMessageList %}
{{
onsMessageList({
"ariaLabel": "Message list for ONS Business Surveys",
"unreadText": "New",
"fromLabel": "From",
"dateLabel": "Sent",
"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…"
}
]
})
}}
HTML
<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-message-item__unread 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-message-item__metadata-term--from ons-u-vh">From:</dt>
<dd class="ons-message-item__metadata-value ons-message-item__metadata-value--from ons-u-fs-r--b">ONS Business
Surveys Team</dd>
<dt class="ons-message-item__metadata-term ons-message-item__metadata-term--date ons-u-vh">Sent:</dt>
<dd class="ons-message-item__metadata-value ons-message-item__metadata-value--date 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-message-item__metadata-term--from ons-u-vh">From:</dt>
<dd class="ons-message-item__metadata-value ons-message-item__metadata-value--from ons-u-fs-r--b">Jacky Turner
</dd>
<dt class="ons-message-item__metadata-term ons-message-item__metadata-term--date ons-u-vh">Sent:</dt>
<dd class="ons-message-item__metadata-value ons-message-item__metadata-value--date 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>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
Example: Example Conversation contents
Nunjucks
{% 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 & Ratchets Ltd">
<h1 class="ons-u-fs-l"><span class="ons-u-vh">Subject: </span>BRES 2017 clarification required for Bolts & Ratchets Ltd</h1>
{{
onsMetadata({
"metadataLabel": "Information about the survey and respondent",
"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 & 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": '#0',
"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>
HTML
<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 & Ratchets Ltd">
<h1 class="ons-u-fs-l"><span class="ons-u-vh">Subject: </span>BRES 2017 clarification required for Bolts &
Ratchets Ltd</h1>
<dl class="ons-metadata ons-metadata__list ons-grid ons-grid--gutterless ons-u-cf"
title="Information about the survey and respondent" aria-label="Information about the survey and respondent">
<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 & 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 & Ratchets Ltd.</dd>
</dl>
<div class="ons-message ons-message--sent">
<div class="ons-message__head">
<dl class="ons-message__metadata">
<div class="ons-message__sender">
<dt class="ons-message__term ons-u-fw-b">From:</dt>
<dd class="ons-message__value ons-u-fw-b">ONS surveys</dd>
</div>
<div class="ons-message__timestamp">
<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>
</div>
</dl>
</div>
<div class="ons-message__body">
<p>Dear Jacky<br><br>Thanks for returning the BRES 2017 spreadsheet for Bolts & 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">
<div class="ons-message__sender">
<dt class="ons-message__term ons-u-fw-b">From:</dt>
<dd class="ons-message__value ons-u-fw-b">Jackie Turner</dd>
</div>
<div class="ons-message__timestamp">
<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>
</div>
</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">
<div class="ons-message__sender">
<dt class="ons-message__term ons-u-fw-b">From:</dt>
<dd class="ons-message__value ons-u-fw-b">ONS surveys</dd>
</div>
<div class="ons-message__timestamp">
<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>
</div>
</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">
<div class="ons-message__sender">
<dt class="ons-message__term ons-u-fw-b">From:</dt>
<dd class="ons-message__value ons-u-fw-b">Jackie Turner</dd>
</div>
<div class="ons-message__timestamp">
<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>
</div>
</dl>
<a class="ons-message__unread-link" href="#0">Mark unread</a>
</div>
<div class="ons-message__body">
<p>Hi Dave<br>Brilliant. <br><br>Thanks, Jacky</p>
</div>
</div>
<div class="ons-reply 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 ons-u-mr-m ons-u-mb-s">
<button type="button" class="ons-btn">
<span class="ons-btn__inner"><span class="ons-btn__text">Send message</span>
</span>
</button>
</div>
<div class="ons-grid__col ons-u-mb-s">
<a class="ons-reply__link" href="#0">Close conversation</a>
</div>
</div>
</div>
</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 page
Let us know how we could improve this page, or share your user research findings. Discuss the ‘Send and reply to messages’ pattern on GitHub (opens in a new tab)