So far in this blog series, we looked at an overview of SAP Analytics Cloud – Application Design use case and created our first interactive analytic application. Now we will explore popups a bit further.

Popups

Popups are container widgets that can hold other widgets. During runtime, they can be configured to ‘pop up’ on top of the application to deliver contextual insights. This also allows the users to view secondary insights on-demand, conserving valuable real estate.

View the popup in action here. (Note that this is an enhanced version of the application that we built in the previous exercise).

SAP Analytics Cloud – Application Design Series: 3 – Leveraging Popups

Following are the steps to implement a popup.

1. Add a Popup Widget

Select the plus (+) icon in the ‘Popups’ view.

SAP Analytics Cloud – Application Design Series: 3 – Leveraging Popups

Adding a Popup

You will be presented with a separate popup canvas with its own outline.

SAP Analytics Cloud – Application Design Series: 3 – Leveraging Popups

Popup Canvas

Clicking on the canvas header allows you to toggle between main canvas & popup canvas.

SAP Analytics Cloud – Application Design Series: 3 – Leveraging Popups

Toggling between main canvas & popup

As with the main canvas, you can configure the Popup styling using the options. Note that the dynamic sizing option is not available for popups.

SAP Analytics Cloud – Application Design Series: 3 – Leveraging Popups

Configuring Popup Styles

2. Configure Popup Header & Footer

Under the ‘Builder’ settings, you can enable the header & footer for the popup. This allows you to designate a title and the type of buttons needed for the footer.

SAP Analytics Cloud – Application Design Series: 3 – Leveraging Popups

Configuring header and footer for the popup

Note that the button is identified by the name ‘button_close’. This identifier will be later used during scripting.

3. Add & configure components on the Popup Canvas

You may add a table or a chart to the popup canvas and configure it to show additional information.

SAP Analytics Cloud – Application Design Series: 3 – Leveraging Popups

Adding components on the popup

4. Define the interactions (using Scripting)

Now that we have set up two canvas elements (main & popup), it is time to set up the interaction between the two. Note that the popup canvas is disabled/hidden by default.

On the main canvas, add a button titled ‘Product Report’. We would want the popup to show up when the user clicks on this button.

SAP Analytics Cloud – Application Design Series: 3 – Leveraging Popups

Adding a button to the popup

Add the script Popup_1.open(); in the onSelect() event of the Product Report button.

SAP Analytics Cloud – Application Design Series: 3 – Leveraging Popups

script for the button

Now on the event onButtonClick() of Popup, add the following script to close the popup.

SAP Analytics Cloud – Application Design Series: 3 – Leveraging Popups

closing script for the popup

Save & run the analytic application. You will be able to invoke the popup when needed during runtime and close it as required.

* * *

In the subsequent blog we will explore how to dynamically show/hide widgets in analytic applications.

Reach out to us here today if you are interested to evaluate if SAP Analytics Cloud is right for you.

Subscribe to our Newsletter

5920 Windhaven Pkwy
Plano TX 75093.

+1 888-227-2794

+1 972-232-2233

+1 888-227-7192

solutions@visualbi.com