Design

Sometimes it is useful for a user to dismiss an element and not see it again. For example, they may see a Feature Highlight on the page, but not see it again if they have read the message and dismissed it.

New Feature!

Code

When to use Dismiss Element

Where possible, showing and hiding elements should be tracked server-side and not handled with ACE. Similarly for single-page applications, the DOM helper is not required. Instead, this is simply a pattern: use localStorage to track the user's interaction and do not show the element in future renders.

The DOM helper is for cases where the overhead is not sufficient to justify the dev time of a server-side integration; so it can be done in the DOM. The Feature Highlight is a good example, as it is by nature a temporary item.

Implementing Dismiss Element

There are two steps to implementing Dismiss Element:

  1. Add the data attribute to the HTML to enable the Javascript.
  2. Set up appropriate events that call the Javascript methods to dismiss the element.

For example, the Feature Highlight example in this page has the attribute set to 'show' (simplified example):

<a data-acedismissable="show" id="highlight">

...and the 'Got it' button dismisses the element on click, targeting the ID attribute:


                                    document.getElementById('gotit-button').addEventListener('click', function() {
                                      ACE.DismissElement.now('highlight');
                                    });

Notes:

  • Dismiss Element is set site- or app-wide. This means if two elements with the same ID appear on two different pages, both will be dismissed after one user interaction. To dismiss them separately, use different IDs. This is a feature, not a bug.
  • Some level of repainting is unavoidable, but the impact can be reduced by choosing whether to hide the element after initial load; or hide by default and reveal after load if the element has not yet been dismissed.

HTML

Example Description Code
n/a To enable Dismiss Element, set the attribute to true. 

                                                                                      <div data-acedismissable="true">Dismissable element.</div>

Use customAttr to set data-acedismissable="true" attribute. This should be available on all elements.
n/a To enable Dismiss Element and hide by default, set the attribute to show. The effect is that the element will be hidden when the page loads; and then shown when ACE.DismissElement.init is called. 

                                                                                      <div data-acedismissable="show">Dismissable element that will be hidden on first load and shown after init.</div>

Use customAttr to set data-acedismissable="show" attribute. This should be available on all elements.
n/a To disable Dismiss Element, set the attribute to false. 

                                                                                      <div data-acedismissable="false">Non-Dismissable element.</div>

Use customAttr to set data-acedismissable="false" attribute. This should be available on all elements.

Javascript

Function Arguments Description Example Usage
init n/a Shows or hides according to the required conditions. Note that init is run once automatically when ACE loads; so you only need to call this again if the dismissable element is added later (eg. with DOM scripting). 

                                                                    ACE.DismissElement.init();
now ID string Hide the element immediately, and set localStorage flag to hide the element in subsequent views. 

                                                                    ACE.DismissElement.now('IDOFELEMENT');
next ID string Sets localStorage flag to hide the element in subsequent views. 
ACE.DismissElement.next('IDOFELEMENT');