Blogs / SAP / SAP Analytics Cloud / Analytic Applications / SAP Analytics Cloud – Application Design Series: 3 – Leveraging Popups

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

Dec 6, 2018

SHARE

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.


Corporate HQ:
5920 Windhaven Pkwy, Plano, TX 75093

+1 888-227-2794

+1 972-232-2233

+1 888-227-7192

solutions@visualbi.com


Copyright © Visual BI Solutions Inc.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Share This!

Share this with your friends and colleagues!