Create a simple responsive analytical application

Create a simple responsive analytical application

You are going to execute the following steps within this exercise:

  • Add and configure a flow panel, charts, table, slider and click event on the canvas

  • Define a Global Script Variable

  • Use a Global Script Variable for calculated measures

  • Set the application to mobile enabled

  • Use a theme with your application

  • Download SAC iOS Mobile APP and run the application

Lesson 1: Add Flow Panel, Slider, Text to the Canvas and Create a Script Variable

  1. Click on the Main Menu icon.

  1. Select Files.

  1. Select the folder Public.

  1. Navigate to the folder Analytics_Designer.

  1. Click on the application AD_EXE1 to open it and then you will save it with My Files folder.

IMPORTANT !!

Before you start the different steps of the exercise,
  1. Click on the Save icon Save As.

  1. Be sure that you are under the folder ‘My Files’ or ‘Analytics Cloud’ (may be different). Just save in the default area that SAC shows in the dialog box.

  2. Press OK and the application will be saved under your private folder.

  1. Now you can navigate back to My Files again.

  1. At the top (highlighted to the right) click Files.

  1. This will take you back to your private file folder. Click on the exercise AD_EXE1_YOUR_NAME to open it.

  1. Now you will add a Flow Panel widget to the canvas under the Content Area. Please switch to the Content Area by clicking on Content_Area from the layout panel on the left.

  1. Move to Insert from the toolbar and click on the + sign, then select the widget Flow Layout Panel.

  1. You should see that the new widget (Flow Panel) was added as a new component in the Layout under Content Area.

Note: Please ensure that the FlowLayoutPanel_1 is located under Content_Area.

  1. Define the layout configuration of the Flow Panel by opening the designer panel

  2. Switch to the Styling tab.

  3. Change the default configuration to:

  • Width: auto

  • Height: auto

  • Left: 0 px

  • Top: 250 px

  • Right: 0 px

  • Bottom: 0 px

  1. Define the responsive rule configuration of the Flow Panel by switching to the Builder panel and adding 2 Break points to set the behaviour of the widget with a different screen size.

  1. Define the break points as shown in the screenshot:

  • Break Point 1:

    • Screen Width: 414 px
    • Widget Width: Each widget = 100%

  • Break Point 2:

    • Screen Width: 800 px
    • Widget width: Each widget = 50%

Let’s add a Text Widget. This widget will be used as a description for the Slider that we will insert later.

  1. Select Content_Area from the Outline Panel first, in order to create the Text Widget under Content Area.

  2. Click on the (+) sign from the insert toolbar and then select Text.

  1. Expand Size and Position and define the layout configuration of the Text widget as follows:

  • Width: 384 px

  • Height: 32 px

  • Left: 16 px

  • Top: 165 px

  • Right: auto

  • Bottom: auto

  1. Enter Discount Percentage in the text field.

Now we will add a Slider widget to the Content Area.

  1. Select Content_Area and then click on the plus sign again (+) to insert the Slider.

  1. Define the layout configuration of the Slider widget as follows:

  • Width: auto

  • Height: 80 px

  • Left: 0 px

  • Top: 170 px

  • Right: 0 px

  • Bottom: auto

  1. Toggle the Designer panel to the Builder panel.

  1. Select the following options for the Slider:

With the previous step we defined the Slider as a widget. Now, we are going to define a script variable to represent the currently selected (via slider) discount value.

  1. Go to Scripting > Script Variables View.

  2. Click on the icon + to add a new Variable.

  1. A new Panel will be opened. Let’s Configure our Script Variable.

  1. Enter the following configurations:

  • Name: Discount_Percent

  • Description: Discount

  • Type: number (because the variable should represent numerical values)

  • Default Value: 10

  1. Check the box for: “Expose variable via URL parameter” (This option enables you to pass script variable values via a URL parameter).

  1. Select Done to close the configuration panel.

  1. Click on the Save icon, then select Save from the display options.

Congratulations! You have finished Lesson 1 of this Exercise.

In Lesson 2, we are going to add different types of charts and table widgets to the Canvas, and also write a simple script for widgets.

Lesson 2: Add Charts, Table and Script to Widgets

  1. Select FlowLayoutPanel_1 and then click on the Chart icon to add a Chart (bar chart) to the canvas under FlowLayoutPanel_1.

Now you need to select a data source for the Chart widget. We will use BestRun_Advanced as a data source.

  1. To find the data source click on 'Select other model’.

  1. Use the search bar on the top right from the Pop up to search for our data source as shown on the screenshot.

  1. Once the BestRun_Advanced data source has been found, click to select it.

  2. Toggle to the Builder panel to add measures and dimensions.

  1. Select Product as a dimension via Add Dimension.

  2. Select Original Sales Price as a measure via Add Measure.

Let’s add a Calculated Measure based on the script variable which we already defined in the previous part of the exercise.

  1. Click add Measure.

  1. Click on Create Calculation ….

  1. Select Calculated Measure as Type.

  1. Enter the name of the calculated measure: Discounted Price.

  1. Edit the formula and enter:

(1-( [@Discount_Percent]/100))* ["BestRun_Advanced"Original_Sales_PriceActual]

  1. Press OK to confirm and to close the Calculation editor as well.

After we added 2 measures and 1 dimension, let’s add a filter in order to show only some specific set of data in the Chart. In this case we will filter on the Product

  1. Click on Add Filter.

  1. Click on Product. We want to filter on the Product dimension.

  1. Search for Juice.

  2. Select Mango Juice, Pineapple Juice, Strawberry Juice and Watermelon Juice.

  3. Click OK to confirm.

As you can see in the result, we have now built a chart based on one dimension which is Product (only Juice Product) and 2 measures:

  1. Let’s add another type of chart a Tree Map Chart. Click on the icon Chart in order to add another chart widget.

Note

Don’t forget to select the

  1. Select Styling – check and keep the default layout configurations for the chart widget:

  • Width: 384 px

  • Height: 384 px

  1. Toggle to the Builder panel in order to modify the default Chart Structure to Tree Map:
  • Under Chart Structure > Distribution > Tree Map

  1. Add Original Sales Price as a Measure.

  2. Add Sales Manager as a Dimension.

  3. Add the same filter as the previous chart. (Steps: 15/16/17)

Let’s add another type of chart which is a Combination Column & Line.

  1. Click on the icon Chart to add another chart widget.

Note

Don’t forget to select

  1. Toggle to the Builder panel in order to modify the default Chart Structure to Combination Column & Line:
  • Under Chart Structure > Comparison > Combination Column & Line

  1. Add Original Sales Price as a Measure (Column Axis).
  2. Add Discounted Price as a Calculated Measure (Line Axis).
  3. Add Store as a Dimension.
  4. Add the same filter as the previous chart. (Steps: 15/16/17)

Let’s add another type of chart which is a Stacked Bar/Column.

  1. Click on the icon Chart to add another chart widget.

Note

Don’t forget to select the
  1. In the Styling Panel, keep the default layout configurations for the chart widget as the previous charts:

  • Width: 384 px

  • Height: 384 px

  1. Toggle to the Builder panel to modify the default Chart Structure to Stacked Bar/Column:
  • Under Chart Structure > Comparison > Stacked Bar/Column.

  1. Add Original Sales Price as the first Measure.

  2. Add Discounted Price as the 2nd Measure.

  3. Add Location as a Dimension.

  4. Add the same filter as the previous chart. (Steps: 15/16/17)

  1. Let’s now add a Table. Click on the icon Table under the insert toolbar.

Note

Don’t forget to select the

  1. Toggle to the Styling panel to set some properties for the Table.

  1. Define the layout configurations for the Table widget:

  • Width: 750 px

  • Height: 368 px

  1. Switch to Builder Panel, we are going to add measures and dimensions to this table.

  1. Select ‘Add Measure/Dimensions’ to add a dimension to our Table.

  1. Select Product as a dimension.

  1. Let’s manage the Columns of the table by clicking the filter icon in order to select the proper Members and calculation. Hover your mouse pointer over the Account dimension and the Filter icon will appear (and disappear when the mouse pointer is not hovered over).

  1. First, delete the default selected member. Again, hover the mouse pointer in that area to make the x appear.

  1. Use the search bar to search for the Original Sales Price and Discounted Price, then click OK to confirm.

  1. Add the same filter as the previous Charts to the Table. (Steps 15/16/17)

  1. Click on the Save icon and choose Save.

Next, we will define the onChange event for the Slider widget that we defined in the beginning of the exercise.

  1. Position your mouse pointer on Slider_1 and click on the fx icon which appears.

You can see that a Tab Slider_1.onChange is open next to the Canvas Tab. Within this Tab we will add the Script.

  1. The coding should cover the following logic: Assign the value of the current selection of the slider to script variable Discount_Percent. You can use the scripting wizard to write the command, or you can copy and paste the following line of code:

Discount_Percent=Slider_1.getValue();

The last step is tracking what happens when the application is initialized. This is done through the onInitialization function of the Canvas itself.

  1. To write the responsible script, please hover over the Canvas in the layout outline panel and click on the fx icon, then select onInitialzation.

Now we need to define the script to set the variable value in the slider.

  1. Enter the following code:

Slider_1.setValue(Discount_Percent);

  1. Click on the Save icon and choose Save.

  1. It’s time to show how this application is working at runtime. For that please click Run Analytical Application.

As you can see, you built an Analytical application which composed of different widgets (different type of Charts/ Table/ Slider) within a responsive frame which is the Flow Panel feature.

  1. Try to reduce the size of your browser in order to see how the Flow Panel that we used will behave.

  1. Next, please change the value in the Slider and check the charts and table behaviours.

  2. You can try to enter at the end of the URL:

&p_Discount_Percent=75

  1. In the definition of the script variable, we selected the option Expose Variable via URL Parameter. This makes it possible to set the variable value via URL. In the URL of the analytic application, just enter a new parameter that starts with "p_" and is followed by the script variable’s name: &p_Discount_Percent=75

Congratulations! You have finished Lesson 2.

Lesson 3: Changing Theme

Using a Theme provides the application designer with an efficient and reusable way to define the style of the application. When you choose a theme, you change the app's look and feel instantly. In this Unit, we will show you how to use a theme.

  1. Go back to the application by selecting the correct tab on your browser and click on the Display icon.

  1. Select Browse for More Themes …

  1. Redirect to the folder Public >> Analytics_Designer, then choose the theme ADBlackTheme.

  1. Go back to the Canvas and you can see now that the Theme has changed.

Next, we will show which theme preferences can be changed.

  1. Click on the Display icon again, and hover over the active theme ADBlackTheme, then click on the Pencil icon.

  1. You will now see the CSS script used for this theme. With Analytical Applications you have the possibility to write and load your specific CSS script.

You can also explore the different options available and you can change the Theme Preferences of any widgets available on your application.

  1. Choose Widget Settings in order to see the different Theme Preferences.

  1. Click Cancel to exit the Theme Preferences pop up.

  1. By hovering over the Canvas from the outline panel you can click the styling icon in order to edit the application CSS code. A new tab called Application-CSS will appear where you can start editing the CSS code based on the supported Class Name.

  1. Click on the Save icon and select Save.

  1. Click Run Analytic Application to see how the new selected theme look like in the runtime.

Your application should resemble the following screenshot:

In Lesson 4, you will download the SAC mobile app from the Apple Store and run it on your Device.

Lesson 4: Download SAC app from Apple Store and run the application

Before downloading the SAC app, let’s set the AD_EXE1 application as mobile enabled. Ensure you are in Edit Mode in the application.

  1. Under the setting icon, click Analytical Application Details.

  1. As shown the Mobile support option is disabled.

  2. Please enable the mobile support.

  1. After enabling the Mobile support, click Save.

Now let’s test the application with your mobile device.

  1. Open the Apple Store and search for the SAP Analytics Cloud app and download it in the same way you would download any app with your phone.

  1. Next, open the app and create a Password for the app.

  1. Enter the Server URL: https://experienceacademy.eu10.hanacloudservices.cloud.sap/

  2. Press Connect.

  1. Use your credentials to connect to the tenant in order to find your application and run it on your Mobile.

  1. Redirect to your files and select the application AD_EXE1.

Congratulations! You Have completed all the lessons in this Exercise.

Summary

After having successfully completed the exercise, you are now able to:

  • Know the basic workflow of creating an Analytical Application

  • Configure Tables and Charts

  • Understand the capability of a script variable (with URL parameter)

  • Get the basic concept of scripting capability

  • Use a Theme via CSS code

  • Set an application to mobile enabled

Learning

SAP FacebookSAP YoutubeSAP LinkedIn