Knowledge Center

Knowledge Center > Commerce > Zuora for Salesforce Development Resources > Zuora for Salesforce Component Library > Zuora for Salesforce Global Components > Notification Component (version 6.0+)

Notification Component (version 6.0+)

This article describes the Notification component available in the 6.0 or higher versions of Zuora for Salesforce. It includes a description, resources, a list of attributes descriptions, and a sample code.

About the Notification Component

The Notification component is a UI component that displays a success, warning, or failure message. It is designed to replace <apex:pageMessages/> or <apex:messages/> in custom Visualforce pages. 

As of the Zuora Quotes version 6.0, this component was redesigned to use an option object similar to the Property, List, and Lookup components. The component supports the following:

  • A warning message type formatted with a yellow background color
  • Modal popup mode
  • Up to two buttons with custom actions and labels

The component displays a title and a message body against a background color. The background color, title, and body are determined at runtime based on the success or failure value of the operation.

The Notifications component consists of the following:

  • Notification.component: The Visualforce component that can be embedded on a Visualforce page.​
  • NotificationOptions.cls: The Apex class that contains the developer-specified configuration options.

Notification Component

Notification Component Attributes

The Notification component supports the following attributes.

Attribute Type Required? Default Value Description
backAction String No An empty string

The JavaScript executed if the user click the Back button. If set to any non-blank value, the Back button is rendered.

backButtonLabel String No Label.NOTIFICATION_GO_BACK

The label for the Back button

continueAction String No An empty string

The JavaScript executed if the user clicks the Continue button. If set to any non-blank value, the Continue button is rendered.

continueButtonLabel String No Label.NOTIFICATION_CONTINUE

The label of the Continue button

failureBody String No N/A The static message body upon failure. Use this attribute only if you do not want to add messages to the page context dynamically.
failureTitle String No Label.Error_Page_Submission The title for the Failure message.
id String Yes N/A An identifier that allows the component to be referenced by other components in the page
isPopup Boolean No false

If true, the component renders as a modal window.

options NotificationOptions No N/A The notification options.
 
rendered Boolean No True Specifies whether the component is rendered on the page
successBody String No N/A The static message body upon success.  Use this attribute only if you do not want to add messages to the page context dynamically.
successTitle String No Label.Confirmation The title for the Success message.

NotificationOptions Class

NotificationOptions Class Properties

The NotificationOptions class supports the following properties.

Property Type Required? Default Description
backAction String No An empty string

The JavaScript executed if the user click the Back button to negate the request. If set to any non-blank value, the Back button is rendered.

backLabel String No Label.NOTIFICATION_GO_BACK

The label for the Back button

continueAction String No An empty string

The JavaScript executed if the user clicks the Continue button to affirm the request. If set to any non-blank value, the Continue button is rendered.

continueLabel String No Label.NOTIFICATION_CONTINUE

The label of the Continue button

failureBody1 String No N/A

The static message body display on failure.  

Important: Use this attribute only if you do not want to add messages to the page context dynamically.

failureTitle1 String No N/A The title for the failure message
isPopup Boolean No false

If true, the component renders as a modal popup.

successBody1 String No N/A

The static message body displayed on success.  

Important: Use this attribute only if you do not want to add messages to the page context dynamically.

successTitle1 String No N/A The title for the Success message
warningBody String No N/A

The static message body display on warning.  

Important: Use this attribute only if you do not want to add messages to the page context dynamically.

warningTitle String No N/A The title for the warning message

These properties are available for the backward compatibility in Zuora Quotes Q2 '13. The component attributes values will be used and not the NotificationOptions class properties.

Sample Codes

Add a Success and Failure Message

zqu:Notification successTitle="{!$Label.CONFIRMATION}" failureTitle="{!$Label.ERROR_PAGE_SUBMISSION}"/>

You do not have to pass the actual error messages into the Notification component.  You can use the standard ApexPages.addMessage() to add the Confirmation or Error messages into the page context in your Apex code.  The Notification component is able to render all the messages in the Page context inside of the message box.  For example:

ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.CONFIRM, Label.SENDTOZBILLING_SUCCESS));

<code class="plain" bitstream="" vera="" sans="" mono',="" 'courier="" new',="" courier,="" monospace="" !important;="" font-size:="" 1em="" border:="" 0px="" outline:="" float:="" none="" vertical-align:="" baseline="" position:="" static="" left:="" auto="" top:="" right:="" bottom:="" height:="" width:="" min-height:="" inherit="" background:="" !important;"="">

Add a Warning Message

SampleController.cls

This sample code adds a warning message to your page.

public class SampleController {

  //Constructor
  public SampleController() {
    //Add a message of severity warning. It will automatically render in the notification component
    ApexPages.addMessage(new ApexPages.message(ApexPages.Severity.WARNING, 'This item may require further attention!'));
  }

}

SamplePage.page

This sample code displays the warning on a page.

<apex:page controller="SampleController">
  <zqu:Notification />
</apex:page>

The following page is rendered:

WarningNotification_notificationSample.png

Add a Modal Window

SampleNotificationController.cls

The following sample code adds a modal popup.

public class SampleNotificationController {

  public zqu.NotificationOptions notificationOptions {
    get;
    set;
  }

  //Constructor
  public SampleNotificationController() {
    //Init notification options
    notificationOptions = new zqu.NotificationOptions();
    notificationOptions.isPopup = true;
    notificationOptions.continueAction = 'continueToNextPage();';
    notificationOptions.backAction = 'stayOnCurrentPage();';
    notificationOptions.backLabel = 'Remain';

    //Add a page message prompting the user for input
    ApexPages.addMessage(new ApexPages.message(ApexPages.Severity.WARNING, 'Click Continue to navigate away from this page, or Remain if you wish to stay on this page'));
  }

  /* Apex methods to expose as javascript through actionFunctions */

  //Return a page reference to the next page to be navigated to
  public PageReference continueToNextPage() {
    return new PageReference('/apex/SamplePage');
  }

  //Return a null page reference to clear out page messages and stay on current page
  public PageReference stayOnCurrentPage() {
    return null;
  }
}

SampleNotification.page

This sample code display a page with the modal popup.

<apex:page controller="SampleNotificationController">
  <apex:form>
    <!-- Expose apex methods as javascript -->
    <apex:actionFunction name="continueToNextPage" action="{!continueToNextPage}" immediate="true" />
    <apex:actionFunction name="stayOnCurrentPage" action="{!stayOnCurrentPage}" immediate="true" />
    <zqu:Notification options="{!notificationOptions}" />
  </apex:form>
</apex:page>

The page with the modal popup is displayed:

Example of a page with a modal popup

Last modified
13:41, 2 May 2015

Tags

This page has no custom tags.

Classifications

(not set)