Steps to customize the notification using page composer:

This is a step by step guide to customize external notification using page composer. In this example, we
will update an existing label value in a notification.

Initial Steps:

 Create a sandbox with 'Page composer' selected and enter.

 Click on 'More details' under the in-app notifications bell icon to display the BPM worklist area.
 Click on 'Administrative Tasks' and search for a notification via search box e.g. 'Online..'
 Click on one of the notifications retrieved via search results and the notifications details will
open
 Click on the 'Edit' option on the top left corner of the notification
Updating existing labels
 Select the 'Structure' tab on the top to display the 'dock area' on the right hand side (the dock
area can be re-positioned as needed)
 Click on the label which needs to be updated, the corresponding label code will be selected in
the dock area.
 Click on the edit icon on the dock area to display the Component properties for the selected
label.
 Click on the drop down next to 'Label' option and select 'Expression builder' option from the
drop down options to open the Expression editor.
 In the Expression editor, enter the desired text in the Text area
 The syntax for updating the code name is #{bindings.ValueofLabel.inputValue}
o e.g. #{bindings.ProcurementBUName.inputValue}
o #{bindings.NegotiationTitle.inputValue}
 Click on 'Test' button to verify if the newly entered value is being returned.
 Style can be added to the new label text by selecting the 'Style' tab for formatting options

 Click on 'OK' button to exit the Expression editor and return to the Component properties area
 Click on 'Apply' and 'OK' button. Ensure the 'Visible' checkbox is checked.
o Note: If accidentally visible checkbox is unchecked and OK is clicked, click on the code of
the same label in the dock area and check the checkbox by entering the component
properties.
 The new label text is now displayed on the notification.
 Publish the sandbox after making all the needed customizations.
Similar steps can be followed for other customization in the notifications:

Hiding a label:
 Select the 'Structure' tab on the top to display the 'dock area' on the right hand side (the dock
area can be re-positioned as needed)
 Click on the label which needs to be updated, the corresponding label code will be selected in
the dock area.
 Click on the edit icon on the dock area to display the Component properties for the selected
label.
 Uncheck the 'Visible' checkbox and click on 'Apply' and 'OK' button.
 The label is now hidden from the notification.

Deleting a label:
 Select the 'Structure' tab on the top to display the 'dock area' on the right hand side (the dock
area can be re-positioned as needed)
 Click on the label which needs to be updated, the corresponding label code will be selected in
the dock area.
 Click on the edit icon on the dock area to display the Component properties for the selected
label.
 Click on the X icon on the top of the dock area and the label will be deleted from the
notification.

Note*: Deleting a label is not recommended, since it will be hard delete and the label cannot be
retrieved.
If still a label is deleted by mistake, one can exit the edit and the sandbox without saving any change.

Updating label value:

 Select the 'Structure' tab on the top to display the 'dock area' on the right hand side (the dock
area can be re-positioned as needed)
 Click on the label value which needs to be updated, the corresponding outputText code will be
selected in the dock area.
 Click on the edit icon on the dock area to display the Component properties for the selected
label.
 Click on the drop down next to 'Value' option and select 'Expression builder' option from the
drop down options to open the Expression editor.
 In the Expression editor, enter the desired binding code for the label value
o All the label values which can be updated in the notification are mentioned above
o The syntax for updating the code name is #{bindings.ValueofLabel.inputValue}
 e.g. #{bindings.ProcurementBUName.inputValue}
 #{bindings.NegotiationTitle.inputValue}
 Click on 'OK' button to exit the Expression editor and return to the Component properties area
 Style can be added to the new label text by selecting the 'Style' tab for formatting options
 Click on 'Apply' and 'OK' button. Ensure the 'Visible' checkbox is checked.

o Note: If accidentally visible checkbox is unchecked and OK is clicked, click on the code of
the same label in the dock area and check the checkbox by entering the component
properties.
  The new label value is now displayed on the notification.

Adding hyperlink/Image
 Select the 'Structure' tab on the top to display the 'dock area' on the right hand side (the dock
area can be re-positioned as needed)
 Click on the label under which hyperlink needs to be added and the corresponding label code
will be selected in the dock area.
 Click on the + icon on the dock area to display the Add contents work area
 Click on the 'Components' option to open the list of components which can be added
 Click on +Add option against hyperlink or Image as desired and click on 'Close' button
o Only click once to add one hyperlink. Clicking on more than once will add the no. of
hyperlinks as the add option is clicked
 A new code component 'Hyperlink' is added under the corresponding panel label code in the
dock area
 Click on the hyperlink and select the edit option from the dock area.
 Enter the destination URL in the 'Destination' text area.
 In the Display options, click on the drop down next to 'Text' option and select 'Expression
builder' option from the drop down options to open the Expression editor.
 In the Expression editor, enter the desired text in the Text area
 Click on 'Test' button to verify if the newly entered value is being returned.
 Click on 'OK' button to exit the Expression editor and return to the Component properties area
 Style can be added to the new label text by selecting the 'Style' tab for formatting options
 Click on 'Apply' and 'OK' button. Ensure the 'Visible' checkbox is checked.
o Note: If accidentally visible checkbox is unchecked and OK is clicked, click on the code of
the same label in the dock area and check the checkbox by entering the component
properties.
 The new hyperlink is now displayed on the notification.