Custom component, Part 3: Add Fiori-like dialog to your app

[Dan_Wroblewski]

See all 3 parts of the custom component series:

• Part 1: How to install our tooltip custom component
• Part 2: How to build the tooltip custom component
• Part 3: How to get a Fiori-like dialog box component

Both the tooltip and Fiori dialog are available for use now.

2 great colleagues of mine, Niall Comer and Conor Brennan, from the Customer Success’s Center of Excellence in Ireland, created this Fiori-type dialog for SAP Build Apps. It allows you to customize the buttons, label and message, and grays out the screen while the dialog appears. It also centers the dialog, whether you are on the web or on mobile, and re-centers as the web screen is resized.

On mobile it looks like this:

I took what they did and created a custom component, whose token is (in EU10 only):

Qfptkoc4OFmK-fu8M0g1qg

Go to the component Marketplace (EU10 landscape only) and search for this token, and install the component. 

• In case you are not on EU10, I have also published an app that includes the component so you can see how it works and is built. 

To test it, remove all components except for a container, and a button inside the container.

Select the page (click on the canvas), and enable Style → Advanced → Stretch to the viewport height, and clear all the Style → Padding.

To the container, set Style → Padding to 24 pixels on top, left, and right, to restore the padding.

Add the Fiori Dialog component outside the container, at the bottom.

Set the following properties for the Fiori Dialog component:

• warning label
• warning message
• warningButton
• warningShow – this turns on the dialog. Create a page variable of type true/false and bind the page variable to this property.

Setting up the component

In addition to the above properties, you need to do the following on the Fiori DIalog component:

• Bind Properties → Advanced Properties → Visibility to your page variable, but also set the Set preview value to false.  
• Set its Layout → Position to Absolute, and it's Z-index to 100.
• Set its Layout → Width and Height to Custom, and select the following:
  • For width, select Set Width, and set the width to the formula: systemVars.dimensions.screen.width
  • For height, select Set Height, and set the height to the formula: systemVars.dimensions.screen.height
• Still with the component selected, go to Style → Default → Edit, and edit the styles of any of the components inside (like the color of the icon/label, or the type of icon). You must set the Background color of the BackgroundBlur component to black with 45% transparency (you will create a new color palette). 

Add logic to your button to set your page variable to true, so the dialog appears on button click.

Add event handlers for ClosedSelected and ClosedSelected events to perform the appropriate actions based on the user's actions. 

Now it should work like this:

How it was created

This is just a short summary of what was done to create the custom component.

Inside a container, the following components were added, and then the outer container was converted to a component by clicking Convert to New Component in the Properties tab.

The above created the basic dialog box:

Inside the component template editor, we created the following:

• Properties to let developers set the dialog texts and to enable the dialog
• Events to let developers capture which button the user clicked

In the inner components, the properties were used to set the corresponding property. For example, the label property set the title of the dialog.

And the events were triggered when a user clicked a button. For example, for the action button, a click sets the property to hide the dialog, and then the ClosedSelected event is triggered, which can be captured in the containing app.

NOTE: Currently there is no way to set certain layout properties on the component itself, so these must done by you, the consumer of the component.

If you want to modify the component

Currently, if you open the component with the component template editor, you will not see the dialog box. To see it, do the following:

• Select the component, and then for the Visibility property, switch Set preview value to true.
• Open the component in the component template editor, select PopUpContainer, and for the Visibility property, switch Set preview value to true.

Ideas for further development

Here are some ideas for enhancements:

• Add a property and output to the component so you can set the property before using the dialog and then check the property when receiving the events.
• Enable the user to customize the icon.
• Enable additional buttons.