Pop-up Notifications

Layout Variant: C003 (assigned for reference only)

Content Type: Not a Collection

Expected Use:

C003 is assigned for reference purposes only for Pop up Notification. C003 is not a Layout variant. The intended use of this new feature is to highlight major User Interface changes on the Emerson.com to the general audience. This feature is not a component but a Teaser is required to setup and enable on the page or collection level.

The Notification card content includes: 

• Highlight Label (e.g., "NEW") 

• "Dismiss/Collapse" toggle Minus icon 

• Title 

• Description Copy (Rich Text content with optional hyperlinks and inline text style options) 

• "Accept" Text CTA 

• **Note: All notification content, except the Dismiss toggle icon, should be fully authorable by content editors.

A part of this feature is set one time on the backend by Developers and the other part is defined by the author. A number of components like C010 and C011 were used as initial samples to showcase this new feature, hence, the setup of two (2) new sample collections that were also added to the C010-C011 Regression page for illustration. 

For details on how the backend was setup, refer to the EIT Design 52280 Highlight Major Functionality changes on Emerson.com. After the initial back end setup, the following properties were added by the author on the "Miscellaneous" Resource Bundle found under the Localization tab of the "Homepage" as well as the Local Property Settings.  

• The "popupNotificationLlinkText" property with "Learn More" property value is the CTA label displayed at the end of the body copy of the pop up notification. 
• The "popupNotificationAcceptButton" with 'Accept" property value is the Text CTA label that appears on the bottom right of the pop up notification. When this CTA is clicked, the popup notification disappears. 
• The "popupNotificationTag" with "New" property value is the text displayed with green highlight on the top leftmost corner of the pop up notification. The value added here serves as the highlight label of the pop up ex. "New".  

Feature Setup: 

Authors can be able to setup the C003 Pop Up Notifications on a Page or any component they wish to add the pop up notification to. The premise here is that the backend has already been setup by IT and that authors can just build C003 in a page or component to highlight the major changes. To render the feature correctly, described below are the steps to setup C003. 

1. Go to the System Tab of the page or collection where you would like to enable a pop up.

2. Go to the Local Settings, add the following property settings and define the values.

• Add a "Boolean" property type and assign the property name "popupEnable" and check the checkbox to set to true, disable when not.  
• Add a "String" property type, assign the property name "customNotificationID" and set the value to anything as long as it’s unique to this popup (ex. contentID75805852popupID).
• Add a "String" property type, assign the property name "notificationPosition" and Set the value to one of the following: "top", "left", "right", "bottom", "topLeft", "topRight", "bottomLeft", or "bottomRight". 
• Add a "Link" property type, assign the property name "copyText" and add a Teaser. Below are the steps to setup the Teaser. 
• Add "Link" property type, assign the property name "popupLink" and add the linked teasable page ex. Page, External Link, Page, Download or Video.
  • This is an optional property that can be added to link related information.
  • On the C003 Regression Page, C006 - Related Products has the pop up sample with "Learn More" CTA label.  The CTA Label pulls the value from the "popupNotificationLinkText" resource bundle file under "Miscellaneous".  
• For the summary of Local Setting Properties, please refer to the image above. 

3. Create a Teaser - This will contain the message that will be displayed on the pop up notification. The author will drag the newly created teaser into the local settings of the component in which to attach the popup to. Doing it this way ensures that the content can be translated. **Note: All notification content, except the Dismiss/Collapse toggle Minus icon, should be fully authorable by content editors. 

• Add Teaser Title - The Header or label of the pop up. Recommended to have maximum of 2 lines for the title.
• Add teaser CTA Label -  This is the optional CTA Label that will be displayed on the pop up, if the "Use Linked Call-To-Action Label" is enabled. 
• Teaser Text - The description or body copy of the pop up notification. Within the teaser text field, enter in the copy text you wish to display within the popup. This has rich text content with optional hyperlinks and inline text style options. Recommended to have up to 6 lines of text for the description copy.
• Call-to-Action Label 
  • This is can be any teasable content such as an External Link, Page, Download or Video. 
  • Under the Teaser Options, authors can add one CTA by clicking on the "Use Linked Call-to-Action Label" radio button and then drop the teasable content. If no Teaser CTA Label defined, the CTA label that will be displayed will come from the teasable content. 
• Set the Layout Variant to "Default" and add this Teaser as value to "copyText" Local Property Settings. 
• Teaser Header and Pictures and Other Media  are not used in this feature.
• Once everything is setup on the Local Property Settings, the author has the option to enable or disable the pop up notifications. 

Below are sample pop up notifications setup for a component and a page.

• The intent is to highlight the latest UI changes on the component or page.
• When multiple notification instances are present on the same page, only the first instance have the display expanded by default. All subsequent notification instances on the page are displayed in collapsed/indicator state (shown). The small green circle on the left is the indicator for notification. Upon click, it opens the notification. The sample is shown on the right side.     
• For a page, the pop up notification opens when a page is accessed.  The sample pop up notification is shown on the "topRight". 
• A pop notification display goes away when the user clicks "Accept". A 30 days validity period is set today for pop up notifications.