openSAP

SAP Analytics Cloud – Become an Augmented BI

Expert
Week 5 Unit 1

00:00:05 Hello, everyone. Welcome to week five,

00:00:09 SAP Analytics Cloud, analytics designer. My name is Jie Deng.
00:00:14 I am product manager for SAP Analytics Cloud. So I will start with unit one,
00:00:21 Application Design Overview. So what is an analytical application?
00:00:28 What is analytic designer? An analytical application could be a very simple dashboard,
00:00:34 could be also very complex, guided analytical applications, or planning use cases, or smart
applications.
00:00:43 So analytical applications could be different flavors of your analytical applications or
dashboards.
00:00:51 Analytical applications expose custom logic based on the scripting, based on the eventing.
00:00:58 So analytics designer is a capability within SAP Analytics Cloud that will help you to create
your analytical applications.
00:01:09 So with analytics designer, you get a rich set of the capabilities.
00:01:16 And that will enable you to write your script capability, eventing, CSS capabilities, OData
services.
00:01:25 And also with analytics designer you get a dedicated design environment
00:01:30 so that an application designer or developer can conveniently work with this environment
00:01:36 and write the scripting, write coding, and configure the CSS, and configure the theming,
00:01:42 and create such kind of analytical applications. And in addition, we also provided extension
capabilities,
00:01:50 so that, using analytics designer, you can create any customer visualizations or your own
widgets,
00:01:58 which are then reused in the analytical app. So analytics designer as a capability
00:02:05 is totally integrated within SAP Analytics Cloud. So with other the capabilities
00:02:12 you already learned from the week, like data modeling, like a data connection, like
visualizations,
00:02:20 and also like the whole smart features, and we are all together in SAP Analytics Cloud,
00:02:28 which means analytics designer can also leverage all of these existing capabilities.
00:02:33 And then add analytics-design-specific capabilities like eventing, like scripting, like theming.
00:02:40 And then to create very powerful analytical applications. And these analytical applications,
00:02:49 because we use lot of powerful features, and then it will be much more flexible
00:02:55 to adapt your business needs. And your end users can get very convenient user interfaces,
00:03:03 visually attractive user interfaces, to work with it. So we provide a customizing capability,
00:03:10 integration capability, extension capability, and also the content network
00:03:16 used by a leverage content network. You can export or import analytical applications between
different tenants.
00:03:22 An analytical application can also be run on SAP Analytics Cloud mobile app or on the Safari
browsers.
00:03:34 So it's ready for mobile consumptions. And in the future, we also will add the reuse aspect
00:03:40 into the analytical application. So from the detailed functionality point of view, I want to
mention,
00:03:50 first, the analytical app includes most of the story features, like chart and the table images,
input control, linked analysis,
00:03:58 linked dimension, hyperlink, all of these important story features are included already in the
analytical app.
00:04:09 And then, based on that, we also added an analytical application fundamental capability,
00:04:16 like simple widgets, like container widgets, like a checkbox group, like dropdown boxes,
00:04:22 to give you more widgets, so more control to build a different kind of analytical app.
00:04:29 And, of course, scripting capability, very important. Using the scripting capability,
00:04:33 you can do any customizations or interactions. Script variables, script objects
00:04:40 will modularize your coding, and the two are reused in your analytical app.
00:04:45 And we have the technical objects. With the technical objects,
00:04:49 you can leverage the capabilities like calendar task integration, like planning capabilities,
00:04:55 like data change insight capability. And also, analytical applications
00:05:00 have a very tight planning integration, meaning all of the planning capabilities like in story
00:05:07 work also in the analytical designer. So it will be exposed as a toolbar
00:05:12 or the quick menu on the chart or table. In addition, we provide the script access
00:05:18 to those planning capabilities, so that you, as an application designer,
00:05:22 can very be flexible, using this capability to create a very customized planning workflow.
00:05:31 In addition to that, you can apply the theming or CSS capability
00:05:35 to make your analytical application visual more attractive. You can apply responsive layout
capabilities to create applications once
00:05:44 they are running on different designs of your desktop or different designs of your mobile
devices.
00:05:49 Now we provide alerting capability, data change insight capability,
00:05:54 to give you the push notification about the most important critical situation in your analytics
app,
00:06:01 so you will be proactively informed. We also have the hyperlink support for image and shape
widgets
00:06:08 and we have the flexible navigation between different artifacts and also transferring
parameters by leveraging the script API,
00:06:17 and analytical applications have integration with the mobile iOS app. In addition, we also
provide this embedding extension capability,
00:06:27 so that you can embed an analytical app into a third-party application,
00:06:31 or using the custom widget SDK to create any visualizations or any widgets as you like.
00:06:38 And you can leverage the OData capabilities to build a close-loop scenario
00:06:45 and you can trigger an OData action from an analytical application in the SAP back end,
00:06:52 like SAP S/4HANA, or you can get the information from those systems like SAP S/4HANA,
BW, BPC,
00:07:01 and these systems get this information from these systems back to the analytical app.
00:07:07 That's the capabilities for the OData. That's all the capabilities that the end user will get
00:07:14 at the application run time. For the application designer,
00:07:17 we provide a very user friendly, intuitive design time to enable the developer to work very
conveniently
00:07:25 within this environment to create an analytical app. And in addition, we also provide the demo
samples
00:07:35 that you can directly install in your tenant. And you can get the already completed demos

2
00:07:42 that you can already run it or you can also get some demos more on the feature level,
00:07:47 for example, how you can create dropdown boxes. So this kind of samples are available in the
sample content.
00:07:55 You can install that in your tenant. You can already get your hands on it
00:08:00 and for the sample content, I want to mention, we also deliver the generic analysis ad-hoc
content.
00:08:07 That is comparable to ad-hoc analysis in Lumira. And you can do table-based slice/dice
analysis based on the navigation panel,
00:08:17 and also leverage the printing capabilities and the bookmarking capabilities.
00:08:22 So in case you want to do some ad-hoc analysis on the SAC model, then please you can
directly install
00:08:29 this sample content and get your hands on it. Okay, now I would like to go to the demo part
00:08:38 to show you the highlights demo of analytical application. First, I would like to show you
00:08:49 a simple analytical application. First, have a look at how it works at application runtime.
00:08:57 So here, you see within this simple analytical application, we have input control.
00:09:04 So by selecting the input control, I'm able to interact with the widgets in the analytical
applications.
00:09:11 And, also, here we see the linked analysis. So once I selected, for example, juice,
00:09:18 the applications will be filtered also with this juice. And in addition to this input control on the
linked analysis,
00:09:26 we are adding analytics-designer-specific features. Like custom widgets here,
00:09:31 you see the animation depending on the months, and here is a change for different countries
for the NPS Survey.
00:09:40 Or we are able to see this sales revenue is displayed in this bubble in this way.
00:09:47 So that's both our custom widgets. And also with analytics designer,
00:09:53 we are adding the responsive layout. So now let's simulate how this application works on the
different devices.
00:10:06 So now we go to the browser simulation view, and we will be able to see how this analytical
application
00:10:12 works on this iPhone 12, for example. Then you see the applications,
00:10:19 the custom widgets are moved down and we see here that the layout
00:10:24 is optimized for the iPhone view. I can also now switch to, for example, the iPad Air.
00:10:34 Now we see the iPad Air in a vertical layout and we see that the custom widget
00:10:40 and also these three widgets are displayed in that way. We can also turn the direction of the
iPad Air
00:10:48 from vertical layout to the horizontal layout. So what we will be able to see here
00:10:55 is that the layout has been automatically adapted. Now these two custom widgets are
displayed in parallel
00:11:02 and also these three charts are displayed in parallel. So here is a powerful responsive layout
capability by analytics designer
00:11:13 so that you will be able to create an application once and then this application can be run on
different sides
00:11:20 of the desktop devices or mobile devices. So now have a look into our design time
00:11:27 of this analytical application. So you will see that in the design time
00:11:32 of the analytical application, here is the outline area. This analytical application is created
without any code.
00:11:40 So we are leveraging, for example, this input control, our flow layout the panel for the
responsive layout,
00:11:47 and also the linked analysis to create this analytical application.

3
00:11:53 And to be able to see the linked analysis diagram, we will be able to click on this icon
00:11:59 and are then able to see the linked analysis diagram. That is what it looks like,
00:12:05 these interactions between different charts and the different widgets.
00:12:08 So now we can also, from the linked analysis diagram, manage a relationship.
00:12:14 So for example, chart, I would like to go to manage linked widgets. On the right side, I see
different widgets.
00:12:21 So for example, I'd like to delete chart 8. So click on that and we see this chart has
disappeared for the target widgets,
00:12:30 and then I just click on Done. And then my linked analysis diagram and will be updated.
00:12:38 We see that chart 6 is only interacting with seven widgets, instead of eight before. We can also
go to a particular view, for example,
00:12:48 for chart 4, to see only interactions with chart 4. So with this linked widgets diagram,
00:12:54 you as an analytical application designer or developer will get a very clear view
00:13:01 about the linked analysis relationship input control, all of that within your analytical application.

00:13:08 In addition, you can also leverage the theming capability of analytics designer to assign your
analytical application
00:13:15 to a different look and feel. So currently, if we add in the theming,
00:13:19 we see we are in the corporate dark theme. These themes can be created once
00:13:26 and are stored in the file report and assigned also to the other applications.
00:13:30 Now I can very easily to change to other theme, for example, to the default light theme.
00:13:37 So once I click that, you see my analytical application has a totally different layout. So with
that, it will be very easy to change your application layout and the look and the feel
00:13:51 very conveniently by theming capability. So that's the first demo I want to show you.
00:13:57 One demo without any codes, you can already leverage the existing capability
00:14:02 like input control, linked analysis, linked widgets diagram, and also the theming capabilities,
00:14:09 responsive layout capabilities, to create this kind of analytical application.
00:14:16 As a second demo, I would like to show you a different kind of analytical application.
00:14:22 It's a guided analytical application. So with analytics designer,
00:14:27 you can create a different flavor of analytical app. For example, I'm currently in the Best Run
company.
00:14:34 I would like to get into my analytical application. I click on that and I see, wow, there is a
warning area,
00:14:42 and also in the table I see this margin is in the minus area. So I want to go get some details.
00:14:49 And then this application telling me, there is an alert. My net profit and margin has an issue.
00:14:56 So to solve this alert, there are two proposals. Then based on this UI guidance,
00:15:02 I'm getting to the different proposals. First is proposal one, to improve or to avoid the critical
situation,
00:15:12 I will be able to have the option to change the vendor. For example, from the component seat,
00:15:19 I can change it to another vendor, to Aizen. We see, once I change the vendor,
00:15:24 the simulated margin here has been updated. So here I see the margin from three is reduced
to the 2%.
00:15:32 So that's a one option of the change vendor. So here I can select different vendors
00:15:37 and see how it affects the simulated margin. Another option is I can change a product plan.
00:15:45 For example, I can say, hmm, the mountain bike for this month, and I'd like to have 650
mountain bikes I would like to produce.
00:15:59 But once I move this slider, I see the margin is increasing, but this simulated working time is in
the critical area.

4
00:16:07 So I can, based on the UI widget as guidance, I see I have the options to say, mounting bike
650 is fixed.
00:16:15 So I make that fixed. I let the system suggest to me,
00:16:18 how should I adjust the quantity of other kind of bikes? So I suggest it, I had the suggestion
00:16:27 until I have the 3% here. And if I'm satisfied with this result,
00:16:33 what I can do is that I can now save the planning also preview order.
00:16:38 So based on this UI widget, I can click the button to take the final decision
00:16:44 and to see, in order to reach this production quantity, which kind of raw material I need to
purchase.
00:16:52 And at the end, I can click on the confirm button to make this plan my final plan.
00:16:59 So with that, you will see we are completing a closed-loop scenario, that we are starting with
some critical information and then we analyze it,
00:17:10 we simulate it, and at end, we are taking an action. So now the system's telling me this action
is done.
00:17:18 So now, if we go to the overview page back, we will be able to see,
00:17:23 before it was in the red area, -1%. Now, after I adjust my production quantity
00:17:31 I'm increasing that to 3%. So that's a typical analytical application,
00:17:38 a guided analytical application, using different widgets, UI elements,
00:17:43 to give the end user a guided path that is much more convenient for the end user
00:17:50 to complete their daily work. So that's the two demos I would like to show in unit one.
00:17:59 So that's a part for the unit one overview. In the following unit, you will get more detailed
information
00:18:07 about each highlight I just mentioned. And in addition, I want to point you to more useful links
here,
00:18:15 and then you can get further information about analytical apps. Thank you, bye for now.

5
Week 5 Unit 2

00:00:06 Hello, everyone. Welcome to week five, unit two,

00:00:09 Analytics Designer Fundamentals. In this unit, we will explore the design environment,
00:00:15 scripting, and different analytics designer modes. Let's explore first the design environment
00:00:23 of analytics designer by starting with the canvas. The canvas is a flexible space
00:00:28 where you can explore and present your data, and users can insert all the available
components,
00:00:34 like charts, tables, custom widgets, and so on. Applications have only one canvas,
00:00:40 but scripting and widgets allow you to build several navigation options in your application.
00:00:46 Now, let's move to the toolbar, which is essential to manage your application.
00:00:52 Let's start with the file, where you can have access to the application details.
00:00:58 You can Save and Save As the application. You can, as well,
00:01:02 copy, duplicate, and paste different widgets and also sharing the application with other users.
00:01:10 Under View, we can show and hide two views, which are exclusively in analytics designer.
00:01:16 The first one is the Outline panel, which we can see on the left side of our screenshot,
00:01:21 where you can manage your layout and scripting. And Info panel, which is located at the
bottom,
00:01:27 which contains the errors and the reference list. Under Insert, you will be allowed
00:01:34 to insert charts, tables, and all other available widgets, as well as the custom widgets.
00:01:43 Under Tools, you can do chart scaling, you can create conditional formatting,
00:01:49 and manage your linked widgets diagram. Under Data, we can refresh data.
00:01:54 We can edit the prompts and also link dimensions. And finally, under Display,
00:01:59 you will be able to manage and create your theme via CSS. So now, let's have a look on the
right panel.
00:02:07 If you select a widget on the canvas, the Builder panel opens on the right-hand side
00:02:13 and allows you to configure your widget's data-related settings.
00:02:17 You can, as well, configure the format of a widget with the help of the Styling panel,
00:02:22 which offers you multiple properties for styling. For example, background color,
00:02:27 you can change the font and data formats, and much more. And last and not least, in order to
execute the application,
00:02:35 the user must press Run Analytics Application. Therefore, the application will be executed
00:02:42 in a new browser tab. Let's discover more in detail the Outline panel,
00:02:50 which is an important element in the Design mode. The Outline panel contains
00:02:55 all the visible widgets in the layout area, either directly on the main canvas or in pop-ups.
00:03:01 It contains, as well, the non-visible elements of an application in the scripting area.
00:03:06 And also, you can order the widget, and you can place the different components
00:03:12 which are available in the canvas by just a simple drag and drop.
00:03:17 You can click the plus sign on the script section to add script variables, to add script objects.
00:03:25 You can, as well, add the OData services, predictive models. You can create bookmarks and
much more.
00:03:31 You can maintain, as well, all the script capabilities and use them in every script in the
application.
00:03:42 The Outline has a search bar that filters the complete tree to match your search.
00:03:48 And every script object has a context menu that contains Rename, Find Reference, and
Delete.

6
00:03:55 And when you select one of these objects, the side panel appears and allows you to edit
properties.
00:04:02 The panel opens if you click these objects and closes when you click Done in the panel.
00:04:11 In analytics designer, widgets are user interface elements and can be inserted into the canvas.

00:04:18 There is a wide variety of widgets available. They range from the basic widgets,
00:04:24 like button, text, shape, images, dropdown, checkbox group, radio button group,
00:04:30 to data-bound ones, like table, chart, geomaps,
00:04:36 and further to the custom widgets built by partners and customers.
00:04:42 Once you have added the widget to the canvas, you can then use its Builder panel,
00:04:49 as well as the Styling panel, and also the Action menu
00:04:52 to configure its styling and runtime behavior, and even write script to configure how it interacts

00:05:00 with the other available widgets in the canvas. Let's highlight the basics of scripting capability
00:05:09 in analytics designer. Scripting in analytics designer
00:05:14 allows you to go beyond present narratives, to respond to user interaction in a custom way,
00:05:21 to change the data set results, and to dynamically alter layouts.
00:05:26 The scripting language in analytics designer is a subset of JavaScript,
00:05:30 and the framework that analytics designer offers to users enables the code completion in the
traditional sense,
00:05:38 like completing local or global identifiers, and also enables that semantic code completion
00:05:45 by suggestions, member functions, or similar, and also enable the value help
00:05:53 in the form of context-aware value proposal, like measure of a data source for function
parameters.
00:06:04 Let's now highlight the mode available in analytics designer.
00:06:09 A typical application URL looks as follows, as you can see in the screenshot,
00:06:15 and it contains the word "mode". In Edit mode, where you can design
00:06:19 and edit your application, the URL contains mode=edit,
00:06:25 in Present mode, the URL contains mode=present, and in the View mode, the URL contains
mode=view.
00:06:32 And in order to hide the full toolbar and have full-screen execution of your application,
00:06:38 you can try the mode=embed. The analytics application opens in Present mode by default
00:06:46 when running the application from the Design mode. And you can change the mode,
00:06:53 either by modifying the URL directly. You can just, instead of mode=present, you can change
mode=view,
00:07:02 or also using the navigation options in the user interface. Or you can, as well, click the full-
screen button in the toolbar,
00:07:10 and this action will change the URL from mode=present to mode=view.
00:07:18 And before starting our demo, I wanted to highlight the main steps that we will do together.
00:07:25 The first step, we will create an analytics application by just clicking Analytic Applications
00:07:32 from the left panel in SAC. Then, we will add widgets into the canvas.
00:07:37 We will define our widgets via the Builder and the Styling panel on the right side.
00:07:42 Then, we will add simple events and simple script functions to the widgets,
00:07:47 and then we'll save our application, and then run to see our result.
00:07:54 So let's get started with our demo. So the first step to do
00:08:00 is creating a new analytic application under Analytic Applications tab here,
00:08:08 which is under Story on the left panel of SAC. So I already prepared one application,

7
00:08:16 where, as you can see here, I already added three different widgets in my canvas,
00:08:23 also some text boxes, and also one image here on the top. So let's have a quick view about
this interface.
00:08:34 First, we have the Outline panel here on the left. And as you can see, we can scroll through all
the widgets
00:08:43 and the objects and the components which are already existing in the canvas.
00:08:49 And you can, as I said in my presentation, from the context menu, rename your widget or your
object.
00:08:57 You can delete it. You can show or hide it. So this is the first part.
00:09:01 And then we have the scripting part, where you can add script variables, script objects,
00:09:05 bookmarks, and so on. And by selecting one widget,
00:09:11 you will have the Builder panel on the right side and also the Styling panel for each widget.
00:09:19 So the first step now, it's the creation of a new script variable.
00:09:26 So we need just to click the plus sign. And the purpose of creating a script variable
00:09:33 is to use this variable in our calculated measure that we will create,
00:09:40 and then we will use this variable also to change the percent
00:09:47 of the price via the slider. So let's go step by step.
00:09:51 The first one is creating a script variable. I will give it a name.
00:09:57 I will call it Discount_Percent. As a description, I will give it just Discount here.
00:10:13 As a type, we have here different types. I will use number for the moment,
00:10:19 and as a default value, I will choose 10. Also, we can expose this variable via URL parameter.
00:10:28 Press Done. Okay, so now, the next step, I will add one more widget.
00:10:36 So we go under Insert, and then we click here the widget, and we can change the position of
the widget, of course,
00:10:44 in a super easy way and simple. And also resizing the widget like that.
00:10:54 Okay, here we have the Builder panel of the new widget. And I forgot to mention
00:11:01 that all the widgets existing in the canvas, they are based in one data source,
00:11:06 which is called BestRunJuice_SampleModel. So let's add a new measure.
00:11:15 I will choose the original sales price here. And as a measure and as a dimension,
00:11:23 I will choose the product. As you can see, you can set your measures and dimensions
00:11:30 in a really super easy way. So I will also filter the products
00:11:37 in order to see only the products which contain the word "juice".
00:11:41 We can use the search bar at the top. And then, we can select the products which contain
juice.
00:11:50 Press OK. And here, we add our filters.
00:11:54 We can also add filters by pressing Add Filters here.
00:12:02 So the next step now that we will do is creating a new calculated measure.
00:12:12 So we go back to the Builder panel of our new widget, and then click Add Measure, and then
create a calculation.
00:12:23 So the type that we will choose for our scenario will be Calculated Measure,
00:12:29 and I will call this measure Discount Price. So in our measure list,
00:12:42 it's not existing already the discount price measure, so I will create a new formula
00:12:50 based on our script variable that we already created, which is called Discount_Percent.
00:12:58 So it's a simple, classic formula of discount. By just writing the first letters of Discount_Percent,

00:13:10 we can see it's visible with the help of the wizard here in the formula context.
00:13:32 And then, we click OK. So as you can see here, we have the original sales prices,

8
00:13:39 which are in blue, and we have the discount prices in light blue.
00:13:43 We can, as well, change the color under the Color tab here.
00:13:54 As you can see, we choose in our discount price, as default value, it's 10%.
00:14:04 That's why we can see that, here the original price, for example,
00:14:09 for the watermelon juice, it's 19.65, and the 10% of this original sales price,
00:14:20 10% discount, we will have 17.69. So let's add the same calculated measure
00:14:28 for the other widgets, for the other bar charts. And by adding measure,
00:14:34 I will not create again the calculated measure. As you can see, it's already saved,
00:14:40 and I need just to select it. I will do it also the same here.
00:14:46 It's a bar-line chart. I will add a new measure under the Line Axis.
00:14:53 Discount Price. Okay, great.
00:14:56 So next step, we will add the slider. We go under Insert,
00:15:04 and then we go and we select the slider. So we can also change the position of our slider here,

00:15:18 and also we can resize it. So, now, we will add a really simple line of code.
00:15:28 And the purpose of adding the slider, by moving the slider,
00:15:34 we will see the change in our charts. So we will change the discount value,
00:15:43 which is, by default, 10, by using the slider.
00:15:47 And for that, it's really a super easy script line. So the Discount_Percent, our script variable,
00:16:02 equals slider one, and then we will ask the slider to get the value
00:16:13 from the slider. Okay, great. We can save our application.
00:16:19 And I want to mention that, by clicking on the Edit Scripts icon,
00:16:28 we see that we have a new tab already open next to the canvas,
00:16:34 and where we can write all of our script. So we can also jump from the "Slider_1 - onChange"
script interface
00:16:46 to our Canvas, and we can also close it from here.
00:16:51 So let's now run our analytics application, and let's see the result.
00:17:02 So here we are. We have our application, which is based on four widgets,
00:17:07 and we have also the slider on the top, which is already fixed to 10% -
00:17:12 this is the value that we fixed as default value. And now, by moving the slider, for example, to
50%,
00:17:22 you will see the new values. So here, you have the original sales prices,
00:17:26 which will remain the same, and here, we have the discounted prices,
00:17:32 our calculated measures, after 50%. We can also select 80%.
00:17:40 And here, we have the original sales prices, and also we have the discounted prices.
00:17:49 I wanted to also mention and show you in which mode we are right now.
00:17:56 As I said in my presentation, by default, when running the application,
00:18:02 you would execute it in a new tab, in mode=present as a default mode.
00:18:10 We can change the mode manually at the top. For example, I can choose mode=view,
00:18:21 or also we can change the mode from here if I want to edit the application,
00:18:28 or, as well, if I want to also make it in full screen. If you want to go back to the Edit mode,
00:18:35 you can press the pen here. It's Edit Analytic Application,
00:18:40 and then you will go back to your Edit mode. So in this demo, we were able to add one widget,

00:18:47 creating script variables, writing one line of simple script, also creating calculated measures,
00:18:55 and also adding one slider. Thanks a lot for joining me in the demo.
00:19:03 Before closing this unit, I wanted to give you some really important references

9
00:19:09 and sources that you can visit to explore more analytics designer
00:19:14 and to know more in detail what are the capabilities of analytics designer.
00:19:19 You can visit the Help documentation. You can, as well, visit the Developer Handbook,
00:19:25 where you will find all the features and capabilities that analytics designer is offering.
00:19:31 You can, as well, visit our API reference documentation Web site,
00:19:35 where you will find all the APIs available. And don't forget to visit our SAP Analytics Cloud
community,
00:19:42 where you will find plenty of videos and blogs, which are super, super important for beginners.

00:19:48 Thanks a lot, and see you next unit. Bye-bye.

10
Week 5 Unit 3

00:00:05 Hello, everyone. Welcome to week five, unit three.

00:00:09 In this unit we will highlight more capabilities of analytics designer, which are the script APIs,
00:00:16 events, theming, and CSS. So let's get started with the scripting,
00:00:22 which is super important and an essential feature in analytics designer.
00:00:28 So with scripting, you are allowed to go beyond the present narratives
00:00:33 to respond to the user interaction, to create more complex scenarios
00:00:37 and also guided applications. Scripting in analytics designer is a subset of JavaScript,
00:00:44 which is strongly and statically typed, which means that the types are characteristics or values

00:00:51 that determine what kind of data or structure values or variables can store.
00:00:57 Types are not weak, and dynamic, once you create a string, it remains a string
00:01:02 and you cannot recycle variable names as a new type. You can find within scripting the
primitive data types,
00:01:12 for example, Boolean, that can only store the value true of false,
00:01:18 or string that stores character string. In addition to primitive values,
00:01:23 there are also structured data types, such as objects. As an analytics application developer,
you can create
00:01:30 or add script within the widget events, you can create script variables.
00:01:35 You can create script objects. You can as well create technical objects like bookmark
00:01:40 and export to PDF, and much more. Last but not least, for this slide
00:01:46 I wanted to highlight the scripting help. So by typing control + space
00:01:52 you will get the code completion, an automatic code completion
00:01:57 and a view of a value help list from where you can select an option,
00:02:03 and from where you can read the small definition of every function.
00:02:10 Let's now move to the events. There are several types of events in analytics application.
00:02:16 Some happen in the application itself and some happen on the individual widgets.
00:02:21 So let's start with the application events. For that we have two events, two types -
00:02:26 one that is fired when the application starts and another one that is triggered
00:02:30 in certain embedded scenarios. So the first one called is onInitialization,
00:02:36 this event runs once the application is executed by the user, and it's where your script starts
anything
00:02:43 that you want to be done during the startup. Second one, it's onPostMessageReceived.
00:02:50 If your application is embedded in an iFrame, your application, your analytics application
00:02:56 can communicate bidirectionally with the host Web application using JavaScript post message.

00:03:04 The second part now, it's the individual widget events. Most widgets have an event
00:03:11 that is fired when the widget is clicked by the user. However, some widgets have no events,
00:03:17 for example, like the text table. The data bound widgets, for example,
00:03:21 generally have an event that's fired when the result set of a data source changes.
00:03:27 Most events have no input parameter, like onSelect and onResultChanged.
00:03:38 I choose to highlight two important script features, which are the global script variables and the
script objects.
00:03:47 So let me start with the global script variable, which is a super important capability in analytics
designer.
00:03:53 It's offering to the user really flexibility to create a reusable element

11
00:04:04 that stores a value of a certain type. It can be used with your script, your events,
00:04:10 your calculated measure, data change insight, and bookmarks. As an analytics application
developer,
00:04:17 you can define global script variables, either with primitive types like string,
00:04:23 Boolean, integer, number, and you will be able as well to expose it as an URL parameter,
00:04:30 or also create global script variables with non-primitive types, like button, data source,
00:04:37 chart, and so on. So now let's move to the global script objects.
00:04:44 It's a type of code container, this feature. And users can define a container with a name
00:04:51 and maintain and organize reusable script functions. Note that the function is a procedure
00:04:57 and means a series of instruction to perform a task that can be reused.
00:05:04 It's highly recommended to use global script objects during the building of your analytics
application
00:05:14 because that helps you to reduce the code duplication and that will allow you to have better
performance.
00:05:22 For example, if you have three buttons with the same script, then it makes more sense to
create one global script function
00:05:30 in order to avoid writing more script lines. And you can use this global script function,
00:05:37 the same one, during the scripting of your three buttons. Let me now highlight one last thing
00:05:51 for the script capability, which are the APIs. APIs are super important script capability.
00:06:00 As an analytics application developer, you can enrich your script by using the script APIs.
00:06:07 Analytics designer provides a large variety of script APIs, for example, table API, chart API,
00:06:13 ResultSet API, and much, much more. You can check our API reference list link,
00:06:19 or also the developer handbook, where you can find all the available APIs
00:06:26 that analytics designer is offering with examples. And I will show you,
00:06:34 and I will give you the links in the end of this unit. But let me highlight some of the most
important APIs.
00:06:43 I have chosen as an example the ResultSet API, which allows the analytics application
developer
00:06:50 to access the content of the display table and returns the result set according to the selection.

00:06:58 And if there is no selection, you get all data, the result set, it's an array of the result sets,
00:07:05 and that means dimensions and measures. The getDataSource API, it's also a very used API,

00:07:13 which returns the data source of a table or a chart or also a custom widget.
00:07:19 You can use this API to access the data source dimensions, measures, and members.
00:07:26 And if the table or the chart, or the custom widget has no data source,
00:07:32 then undefined is returned. That's all for script.
00:07:39 So let's now move to the theme. Theming, it's one of the unique
00:07:45 analytics designer capabilities. As an analytics designer,
00:07:49 you can define a theme to store your favorite styles of canvas, of pages, popups, and different
types of widgets,
00:07:59 or choose an existing theme to change the application's look and feel instantly.
00:08:05 After you create a theme, it's saved to the file repository. You can reuse it in any other
analytics application
00:08:12 according to your needs. To create the theme, you must have the appropriate permissions
00:08:18 for this analytics application item, for example, the application creator
00:08:24 and admin roles contain this permission. So then you'll be allowed to create a theme
00:08:31 and also edit the theme. CSS, which is also in relation with theming,

12
00:08:40 you can define a unified theme for your application. So the application-level CSS
00:08:45 brings you more flexibility to your styling. You can define multiple CSS classes,
00:08:51 either as a global default or per widget. You can choose to set some of the CSS classes
00:08:59 that you defined in application CSS as the application's global default CSS class.
00:09:07 To do this, go to the canvas Styling panel in the CSS Class Settings section,
00:09:13 enter your custom class name that you defined in the script
00:09:17 for global default class name. We'll see that more in detail during the demo
00:09:24 because I prepared already CSS class and we will redo the steps live in the demo.
00:09:36 I want to, before going to the demo, I want to close this presentation with one important feature

00:09:46 in analytics designer also, which is the debugging of the scripts in the browser.
00:09:53 Analytics designer supports debugging analytics designer scripts
00:09:58 with the browser development tools. Keep in mind that analytics designer supports
00:10:03 debugging analytics designer scripts only with Chrome browser. And analytics designer is
transforming
00:10:12 the analytics designer scripts before they are run in the browser.
00:10:18 That means they won't look exactly like the scripts you wrote in the script editor
00:10:25 in the analytics designer. To find the analytics designer scripts
00:10:29 in the browser's development tools, the scripts need to be run at least once
00:10:34 during the current session. So now let's move to the demo.
00:10:45 So for this demo for this unit, I prepared an application
00:10:49 which contains all the scripting capabilities that I just highlighted in my slides,
00:10:57 and also I will show an example of how you can change the theme of the application
00:11:04 and how you are able to write CSS and where to write CSS as well.
00:11:11 I will show you where also you can write scripts and how to use the help of the scripts.
00:11:17 So let's get started with scripting and then we'll start with the script variables.
00:11:23 Here we have the Outline panel, we have the Canvas area, and we have the Scripting area.
00:11:30 So now we will focus on the Scripting area. As I said in my presentation,
00:11:37 you are able to create script variables, script objects, bookmarks, export PDF -
00:11:42 it depends on your needs and depends on your scenario. So let's now highlight the script
variables.
00:11:49 I already created a few variables here, and let's for example choose one variable just by
clicking.
00:11:58 We will have the right panel for Script Variable, where we can see the settings and how to set
00:12:06 and how to create script variables. For example, for this one called GlobalURLVariable,
00:12:12 this is the name, you can also add a description. I choose as a type string,
00:12:17 but nevertheless there are other types, like for example, Boolean.
00:12:20 I mean by that, you can set it either to true or false as a default value, and also integer,
number, and so on.
00:12:29 For this case, the type is string and the default value is false.
00:12:35 You can also enable the "Expose variable via URL parameter", which means you can give a
value from the link,
00:12:45 an URL link of the application. Now I will show you
00:12:51 how you can create simple script variables. You need just to add a script variable
00:12:58 by clicking on this plus sign. And then you will have,
00:13:02 again the right panel of the script variable... You can here, for example, give a name.
00:13:08 I will call it Open, or I will call Unit2_Variable,

13
00:13:18 or Unit3, for example. You can give a description.
00:13:22 I will we choose a type, for example a number, and the default value I will choose, for example
20,
00:13:28 and then you press Done, and you can see that it's a super easy and simple way
00:13:32 you can create your script variable, and it's already added. You can, of course, delete or
rename your script variable
00:13:39 or also you can copy it or duplicate it. For example, I will delete the test variable,
00:13:44 and you see it's super easy to manage the available script variables.
00:13:50 Those script variables, you can use them because they're reusable elements,
00:13:55 you can use them during script. For example, if I will open any script tab here,
00:14:08 for example, the onInitialization script of the canvas, this part of script, it's responsible for
calling the script
00:14:19 when the analytic application has finished loading, which means during the execution
00:14:24 and the initialization of the app, all that you wrote here will be executed.
00:14:30 So for example, by just typing the letters gl and then control + space, you will be able to see
00:14:39 all the script variables and you need just to select what you need
00:14:44 and then keep scripting. Of course, you can also use it in the widget itself
00:14:51 if you want to create a calculated measure here, you go to Add Measure.
00:14:58 You can create a calculated measure and also by writing gl, for example,
00:15:06 I can see that I can use the script variable GlobalDiscountPercent as a variable in this formula.

00:15:14 Now let's jump to the script objects, which are basically containers,
00:15:22 which contain functions, and these functions would be managed and maintained
00:15:32 and also organized under this container. So for example, here we have different containers,
00:15:37 for example, Arrays, Cast, and Conditions container, where I created two functions, for
example -
00:15:44 If_else condition or Switch condition: By pressing the edit script,
00:15:50 of course you can edit it and save it. You can use these functions also the same way
00:15:58 as script variables. You can use them while scripting here
00:16:04 in order to respond to your scenario. And it's really highly recommended to use
00:16:11 global script variables and also global script objects because that helps to reduce the code
duplication
00:16:19 and have better performance. That's really super important.
00:16:28 I wanted also to highlight one last thing regarding the script, which are the APIs.
00:16:37 For example, let's add an API. For example, I will choose the getDataSource API
00:16:45 and the setDimensionFilter API. For example, on the event onSelect for the table.
00:16:53 So by selecting this event, a new tab will be opened here
00:16:59 where you can add your script. By the way, any edit script tab you open
00:17:08 it will appear here at the top, and of course you can close it
00:17:13 or you can navigate from one function tab to another one. For example, now we need just the
tab "Table - on Select" function.
00:17:23 It's called when the user makes a selection within the table. By writing TA,
00:17:32 so we see that, and then control + space, I see that I got the help from the scripting capability,

00:17:39 that it's allowed me to select the table, and then point, and then control + space again,
00:17:45 and I will see all the APIs available, we'll do getDataSource API.
00:17:54 By the way, by scrolling down or holding the mouse, you will see all the different definitions of
every API.

14
00:18:03 So for example, I will choose the getDataSource here, and I will use setDimensionFilter.
00:18:10 So, and then you can see here a short definition of the setDimensionFilter.
00:18:17 So I will select setDimensionFilter, and then I can see the syntax.
00:18:21 I need to choose one dimension, and then comma, and then I have to choose the member.
00:18:27 So for that I will choose as a dimension the dimension Product. Of course, you will be able to
select the dimensions and members
00:18:38 which are available under your data source. I mean, for example, in that case,
00:18:43 the table is linked to the BestRun_Advanced data source. So then here I choose the Product,
which is the first one here,
00:18:51 and then comma, and then I can use the "Open member selector" to filter, for example,
00:18:58 in that case I will choose to select all the products which contain the word "juice".
00:19:05 Then I select, I press OK, and then I close the script by semicolon.
00:19:13 Here I was able to use the setDimensionFilter API to filter my product.
00:19:21 That's all for the script and for this quick demo. Let me now highlight another part, which is
theming,
00:19:30 which is a really important part and unique. In the analytics application, you can define a
theme
00:19:37 to store your favorite style of canvas, pages, popups, and different widgets.
00:19:44 For example, let me switch from one theme to another one. The only thing that you have to do,
it's under Display,
00:19:51 you can select your theme. For example,
00:19:55 now we are on the Light Theme, I will select the Theme - KPI - Fiori,
00:19:59 and then the background changes. You can browse for more themes.
00:20:07 You can browse for the available themes. You can also create a new theme,
00:20:13 which means you can define the background of your canvas, popups. And also you can jump
to the widget settings,
00:20:21 and here you can find all the widgets available on analytics designer,
00:20:26 where you can choose the font, the color palette. You have a really good and an important
choice of color here.
00:20:37 And you can of course switch from one widget to another one and set your style.
00:20:47 Also, you can script some CSS lines, as I said. And for that, I prepared a really small example

00:20:57 that we will now copy here, which is this script.

00:21:05 I named my CSS class my-theme, and then I chose to color the dimension member cell this
color here.
00:21:16 So the background color of the dimension member cell on the table then will become light
yellow.
00:21:23 So then we just need to save, and then we can go to the canvas
00:21:31 and we see here the result. Don't forget to assign the name of your CSS class
00:21:40 to your canvas. For that you need to go under Canvas
00:21:44 and click the Edit CSS icon... to the Canvas, and then to the designer, sorry...
00:21:52 Under Styling, you write under Global Default Class Name,
00:21:58 you give the name of your CSS class, which is called my-theme.
00:22:02 So we can check it here again. It's called my-theme here.
00:22:06 So then you will see your changes directly on the canvas. Thanks a lot for having joined me for
the demo.
00:22:19 Before closing this unit, I wanted to give you some useful and important links,
00:22:29 for example like the help documentation, where you can find a lot of structured information.

15
00:22:35 The developer handbook for the people who are interested to know more about script,
00:22:42 theming, and CSS. As I said during my presentation,
00:22:48 in the developer handbook and also the API reference documentation,
00:22:52 you can find all the available APIs with examples. And don't forget to visit our SAP Analytics
Cloud Community,
00:23:03 where you can find a lot of blogs and really useful videos. Thanks a lot and see you in the next
unit.
00:23:10 Bye-bye.

16
Week 5 Unit 4

00:00:05 Hello, everyone. Welcome to unit four,

00:00:09 advanced responsive layout, mobile integration, and alerting.
00:00:16 First, I'd like to introduce the responsive layout. So in analytics designer,
00:00:22 we provide a widget called FlowLayoutPanel as a widget to help you to build responsive
layout.
00:00:29 The advantage of this widget is that you can combine the fixed canvas layout
00:00:35 with this responsive layout together, like demonstrated here on the right side.
00:00:40 You must not always make your whole application responsive.
00:00:45 You can choose to make a part of your analytic application responsive.
00:00:50 For example, application headers should always stay on the top,
00:00:53 but the content area you want to make responsive. So you can, for example, combine like that.

00:01:00 And also, the advantage by this FlowLayoutPanel is that we provide you the capability
00:01:06 to define the breakpoint, and that this definition of the breakpoint
00:01:12 will help you to define how is the layout for your analytical application
00:01:17 displayed on different sizes of your devices. And that's like here.
00:01:22 Within the breakpoint definition, you can define the width of your widget,
00:01:27 you can define the height of your widget, and even you can say, for this iPhone layout,
00:01:34 this text area, I want to hide it, and then you can also hide the widget.
00:01:39 So it's very flexible via the breakpoint definition to make your application look different,
00:01:47 have a different layout on the different devices. And also the whole definition is more the
configuration part.
00:01:56 No coding is needed - it's a pure configuration. After we are leveraging the FlowLayoutPanel
00:02:04 to build a responsive scenario, we can run this responsive analytical application
00:02:11 also on mobile devices. So first, we have the tight integration
00:02:16 with SAC mobile iOS app. So analytical application can be displayed
00:02:22 within this iOS app. The user can leverage the typical iOS app capability,
00:02:29 like to do some annotation in the application, and to share this application,
00:02:35 or to refresh this application. Also, within this iOS app,
00:02:40 also the user has the option to make this application favorite, and so on.
00:02:46 And also, we support this iOS application also support live and also import connection
altogether.
00:02:54 And we support for the iOS app integration iPad in portrait mode and iPhone in landscape
mode.
00:03:03 And in addition, if you want to interact from or jump or hyperlink between the story
00:03:09 and the analytical app, it will also be supported within this iOS app.
00:03:16 In case you are doing the embedding app scenario, you want to embed your analytical app
00:03:21 into third-party applications. In that case, we also support native iOS Safari browser.
00:03:30 Now, with that, in addition, we support some gestures, like Shake event,
00:03:34 like LongPress event. Also, on the onOrientationChange event,
00:03:39 you can turn your iPad to the vertical layout or to the horizontal layout.
00:03:45 To be able to run analytic applications on the mobile, you need to set the application to Mobile
Enabled.
00:03:54 Now, let's have look into the Data Change Insights capability.

17
00:03:57 Data Change Insights is an intelligent auto-discovery of significant data changes in a
dashboard application
00:04:04 within a particular period. That means, as an application consumer,
00:04:10 I can go to this analytical application. I can subscribe to certain charts I'm interested in
00:04:16 with a priority, with a threshold. Once I have subscribed to this Data Change Insights,
00:04:24 I will get this Data Change Insights information as an email in my inbox
00:04:31 or in the notification area in the SAC. Or these data change insights will be all visible
00:04:37 on my home screen, or even these data change insights can be pushed
00:04:43 to the SAC iOS app. The Data Change Insights capability
00:04:48 supports both live and also import connections. And here, we are leveraging the scheduling
infrastructure
00:04:56 to generate snapshots, and comparing the snapshots
00:05:00 based on your setting priority and also the threshold. And identify the most important data
change,
00:05:06 and send that to your inbox, to notification, and so on. And here, we also support saving
snapshots
00:05:14 in a remote repository schema. In case you don't want to save your snapshots in the cloud,
00:05:21 you can also have that option. In addition, we provide the different script APIs
00:05:27 to support you to build these Data Change Insights capabilities further
00:05:32 in the analytical app. Here is how you can see the Data Change Insights
00:05:39 on your home screen. So you only need, on the home screen,
00:05:43 to configure this Data Change Insights tile on your home screen,
00:05:47 then you will be able to see the data change insights across all your analytical applications.
00:05:56 In case you don't want to have this auto-notification or auto-discovery,
00:06:02 you have more complex logic to calculate when this threshold should be met.
00:06:08 And also you want to send that as a notification or email, and we also give you the scripting
capability,
00:06:17 Application.sendNotification, to enable you to send this information
00:06:24 as a notification or as an email. So you can use the scripting capability
00:06:29 to do some complex calculation logic, and so on, and then use the script API
Application.sendNotification
00:06:36 to send to your email inbox, and so on. And here is also some email server information.
00:06:45 So now, I would like to show you demos about mobile, and also about the Data Change
Insights capability.
00:06:58 First, I would like to show you the responsive layout demo and also the mobile application
demo.
00:07:07 In front of you, you see an analytical application in design time.
00:07:11 The left area is the outline part. We see that this analytical application
00:07:16 is using a widget called FlowLayoutPanel. As I mentioned, explained in the slides before,
00:07:23 you can use FlowLayoutPanel to build responsive scenarios. So you can define different
breakpoint rules to identify,
00:07:34 depending on the width of your screen, how your layout of the application should look like.
00:07:40 So for example, for this analytical application, in case the width is less than 414 pixels,
00:07:48 then each widget should occupy 100%. And the header area, it should be a height of 200
pixels,
00:07:57 and the KPI area should be the height of 600 pixels. So let's have a look into,
00:08:03 currently, in the design time, in the analytics designer,
00:08:07 you can simulate it, how it looks like. So let's choose the iPhone X.

18
00:08:13 The width is 375. We see that each widget occupies 100% of the width.
00:08:21 And the header area is here 200 pixels, and also this KPI area, the height is 600 pixels.
00:08:31 So it depends on your different breakpoint rules, and you can define different heights for your
widgets.
00:08:41 So now, have a look into in case a screen width has been changed.
00:08:44 So let's, for example, change to the iPad in the vertical layout.
00:08:53 That's 762 pixels. It exactly matches this breakpoint 2.
00:09:00 And we also identify that each widget is 100%, but in the header area, it's 200 pixels,
00:09:06 and also in this KPI area it's 350 pixels high. You see here is less height than the first one.
00:09:16 So depending on different breakpoint rules, you can very flexibly identify
00:09:23 how many spaces your widget should occupy. So that's the first flow panel layout.
00:09:31 And within this flow panel layout, we see it contains three further flow panel layouts,
00:09:37 for details, for KPI, and for header. So now, let's have a look into this header area.
00:09:43 In the header area, I also further define the breakpoint rules,
00:09:48 and we can also now... For the iPad in the vertical layout, I think it looks fine.
00:09:55 Now, let's go to the iPhone X, for example, for the small size,
00:09:59 to the vertical layout. We see everything is fine,
00:10:03 but the text is getting very small. And for the iPhone, maybe I don't want to read the text,
00:10:11 or the text is not really mandatory, necessary, so I want to hide it.
00:10:17 That's also a possibility, what you can do with analytics designer.
00:10:21 Go to the breakpoint rules, and also you want to, if it's less than 414 pixels,
00:10:28 you want to hide a certain widget. You just select hide the Text_1.
00:10:32 You see, then this widget can be hidden. So here, it's very flexible
00:10:37 to identify the look and the feel. So now, have a look into the second flow panel.
00:10:46 KPI area. This area, right? So now I am on the iPhone,
00:10:51 and here, I only define one breakpoint. How about it looks, for example, on the iPad?
00:10:58 So let's go to the iPad and also into the vertical layout. We see there's still four KPIs in parallel.

00:11:05 Now, you can add another breakpoint. For example, I want to also identify
00:11:11 if this is less than 812 pixels, each widget should occupy 50%.
00:11:17 So let's have a look into that, 50%, and we see then this automatically
00:11:25 for this iPad in the vertical layout, and this KPI flow layout panel will look like that.
00:11:33 So let's add in these rules and then save this application. So within the FlowLayoutPanel,
00:11:39 you can have a nested flow layout panel, and then you can very flexibly identify the height
00:11:46 of your flow layout panel and the height of the widget, and also whether you want to also hide
some widgets
00:11:57 in some layout area. So now, let's go to the application runtime.
00:12:03 I will switch to the application runtime now. We will see how it is exactly on the runtime.
00:12:11 So it basically should be the same, like also in the design time.
00:12:16 So we can further here, and also go to the developer tools, and also onto simulated different
sizes.
00:12:23 So currently, we are on the iPad mini, and you see that these KPI tiles are displayed in that
way.
00:12:31 And then, if we go into the iPhone 12 explorer, then every widget is occupying the 100%.
00:12:39 So that's a very convenient flow layout panel. By defining the breakpoint rules,
00:12:45 and without writing any coding, only the configuration, you can reach the very flexible,
responsive layout.

19
00:12:53 In order to run this analytic application on the mobile devices, you need to do one thing.
00:12:58 Go to Analytic Application Details and then make this application mobile enabled.
00:13:06 So once you turn on this toggle, then your application will be run on mobile devices
00:13:12 or run in SAP Analytics Cloud mobile app, mobile iOS app. Okay, with these settings,
00:13:20 you will be able to build responsive layout scenarios and also publish your applications on the
mobile devices.
00:13:29 So that's the first demo I would like to show you that, without any coding for you, free,
00:13:36 using the responsive layout rules, you will be able to configure
00:13:40 very different responsive scenarios. So now, let's move into the second demo,
00:13:49 Data Change Insights demo. So Data Change Insights is a capability
00:13:53 where you will be able to get the information from SAC to tell you what kind of data changes
you have
00:14:02 in your analytical application. So you will be able, as an application consumer,
00:14:07 you will be able to see these data changes on your home screen.
00:14:11 So here, on the home screen, we have a Data Change Insights tile,
00:14:17 and you will be able to also see this Data Change Insights notification.
00:14:22 In your notification area, you see top five data changes.
00:14:25 Or these data changes can be also shown, sent to you. Within this email, we exactly see
00:14:33 comparing yesterday and today, and what kind of data changes have been happening
00:14:39 in my application. Then I can open the analytic application.
00:14:45 Now, let's go back into our home screen. I would like to explain this Data Change Insights tile.
00:14:53 So you, as an application consumer, can see this information. Just go to Home Screen
Settings
00:14:59 and add this Data Change Insights tile to your home screen. And here, you will be able to see

00:15:06 all the data change insights for all your subscribed analytical applications.
00:15:12 So you see this information in a very central place for all your analytical applications you
subscribed to.
00:15:19 We see there's some decrease of quantity sold by product, so I just can click on that to see
more details.
00:15:26 So it will visualize like a chart. And it's telling me
00:15:31 what are the comparisons, today and yesterday. And also this is subscribed by myself,
00:15:37 and the importance is normal. So here, you see all of the details
00:15:41 also in a visualized way here. Now, we can also go to this area to do some filtering.
00:15:50 So we can go to the default, which is Top 10. You can also customize it.
00:15:56 For example, I only want to see the top three in that case. Or let's go back to the default of the
Top 10,
00:16:03 and then you will be able to use a notification to see the notification area.
00:16:07 And we can also filter for different time ranges, filter for different importances,
00:16:13 and also filter for different subscription types. It could be that I've subscribed myself
00:16:19 or my colleague has subscribed for me. So here, you have different filtering capabilities
00:16:26 so that you can filter your data changes to get the data changes that are more important for
you.
00:16:33 And we can also do a search. For example, I am only interested
00:16:38 in the KPI for gross margin. So I select it, and then I will be able to see these three
00:16:47 gross margin-related data change insights. And if click I on that,
00:16:51 I will be able to get into the analytical application. So click on that.

20
00:16:56 Now, I'm getting to the analytical application, like here. So we've already seen the result
00:17:04 of the Data Change Insights. As an application consumer,
00:17:08 I will receive that via email, via notification, and also on the home screen.
00:17:13 Now, I would like to show you how you can, as an application consumer, subscribe to it.
00:17:19 So if you go to analytical application, for example, go to this chart, click on these three dots,
00:17:25 you have a Data Change Insights capability. You can subscribe with a high importance,
00:17:31 or normal, or unsubscribe. You can also set a subscription range,
00:17:36 which means to set some threshold. Here, I set a threshold to say,
00:17:41 if the gross margin, the delta value, is more than 4 million,
00:17:47 then it should send the notification to me, or data change insights for me,
00:17:53 otherwise I'm not interested. So here, you can set a threshold,
00:17:58 either the delta value or a fixed value, or include or exclude, and so on.
00:18:04 So once you have set it for each chart, then you can go to Tools,
00:18:09 and go to Subscribe Data Change Insights. Within this Data Change Insights dialog,
00:18:14 you will be able to identify what kind of top data change insights
00:18:19 you want to subscribe to, and in which channel it should be pushed to you.
00:18:24 And you can also set these settings on who should be the receiver.
00:18:28 For example, currently, I am the only receiver. You can also add your colleague as a receiver.

00:18:33 Click on the Create. Once you have created

00:18:36 and you have subscribed for these data changes, then you will be able to see these data
changes also,
00:18:43 like the result order I've shown you before, as an email, as a notification,
00:18:48 or as the Data Change Insights tile on the home screen. So for this part,
00:18:53 if we look into the analytical application design time, go to edit analytical application design
time,
00:19:02 you don't need to write any code to enable this capability.
00:19:07 All you need to do is go to Analytic Application Details and then Enable Data Change Insights.

00:19:14 So that's it. Once you have enabled that,

00:19:17 then you will be able to add the application runtime, like here, what you have seen before,
00:19:23 to subscribe to it using the context menu. Right? So that's what you have seen before.
00:19:29 Like, if I click on that, then you will be able to subscribe to it.
00:19:34 And another way is that, I also want to display these data change insights
00:19:39 inside my application. So for that, here, it's also built within this example,
00:19:45 so I click on that. You will be able to see that,
00:19:48 the top six data changes that are happening since January 27. So you can also display this
Data Change Insights text
00:19:56 as you want in your analytical application. To be able to do so for this part,
00:20:02 we provide, in the analytical application, the script API to do that.
00:20:07 So let's go to design time, and then we will be able to see here the technical component
00:20:12 called DataChangeInsights. And based on this technical component,
00:20:17 we are providing different script APIs, like here. And to be able to show the text
00:20:24 in the analytical application, we are providing the DataChangeInsights
00:20:28 as a technical object with the different script APIs, like here what you can see,
00:20:36 and with the different script APIs to enable you to compare different dates

21
00:20:46 and then push that as a text into the analytical app. So here, in addition, in the analytical
application,
00:20:52 we provide you with the script API so that you can compare more flexibly the dates, as you
want,
00:20:59 and also then show these data change insights as text in your analytical app, like here.
00:21:07 So that's the two demos, Data Change Insights demo and also mobile demo
00:21:12 that I wanted to show you in unit four. So here, I hope you learned the responsive capability
00:21:19 of the analytical application and also the Data Change Insights and alerting capability
00:21:24 that we provide. Thank you.

22
Week 5 Unit 5

00:00:05 Hello everyone, welcome to unit five, application integration.

00:00:11 Within this unit, I would like to introduce two aspects of application integration.
00:00:16 One is using post message, a capability to embed analytical applications
00:00:22 into other third-party applications. The second one is to use the OData capability
00:00:28 to do some back-end integrations with some SAP back-end systems.
00:00:35 So first, we'll have a look into the embedding capabilities by leveraging the post message
capability.
00:00:42 There are two embedding scenarios you can do with analytical applications.
00:00:47 One is that you can embed analytical applications as an iFrame into third-party applications.
00:00:55 That is scenario one. In that case, by leveraging the post message capability,
00:01:01 you can do both-direction communication - from the analytical application to the host HTML
page,
00:01:10 or from the host HTML page back to the analytical application. The second scenario is within
00:01:16 a host analytical application. You can embed third-party applications,
00:01:22 third-party HTML5 pages as a Web page widget. Here the same -
00:01:27 you can do both-direction communication via post message APIs, or the post message
capability.
00:01:36 Now let's look in detail at how these two scenarios are working.
00:01:41 So first, the scenario is that we are embedding analytical applications
00:01:46 as an iFrame into third-party applications, or third-party HTML5 pages.
00:01:54 So first, these host HTML5 pages could be multiple levels.
00:01:58 So you can embed one HTML5 page, and then embed, again, the host HTML5 pages -
00:02:06 that could be multiple levels. The prerequisite to do so is that
00:02:13 you need to set the host HTML page as a trust origin for the SAP Analytics Cloud,
00:02:21 in the SAP Analytics Cloud administration part. So once you set it as a trust origin,
00:02:27 then we can enable the communication between analytical applications
00:02:32 and also the third-party applications. So here, in case we want to send information
00:02:39 from analytical applications to the third-party applications, or host HTML page,
00:02:46 then we are using the capability post message APIs. So you look into the sample code, it's
called post message.
00:02:55 If we want to receive information from the third-party applications,
00:03:01 or third-party HTML pages, in that case, we are leveraging the eventing code
00:03:09 onPostMessageReceiveed event. So here you can receive information
00:03:14 from outside to analytical applications. So that's the first scenario.
00:03:21 Now have a look into the second scenario. We want to embed a third-party application,
00:03:27 or HTML5 page, into a host analytical application. So here we're also leveraging
00:03:36 the post message APIs to do the communication on both sides. Here you can see also the
sample code, how to do that.
00:03:47 So that's the first integration aspect, embedding capabilities so that you can use
00:03:53 post message capabilities to do the embedding scenarios too very flexibly embed your
analytical application
00:04:02 into other third-party applications. Or you can communicate with any other third-party
applications
00:04:10 by leveraging these capabilities to do the communication.
00:04:14 So that's the first part of unit five. The second part I would like to introduce

23
00:04:22 is leveraging the OData capability that we provide with analytical designer
00:04:27 to enable the closed-loop scenario, to enable the insight-to-action scenario.
00:04:34 A very typical use case is that, if we look at the scenario here,
00:04:38 and we are within an analytical application, we analyze the data.
00:04:44 And we also maybe do some simulations to find a solution to solve the current business-critical
situation.
00:04:53 After that, we want to take action. For example, the action could be, in this scenario,
00:05:00 I want to update a material price. Update a material price, these things are happening
00:05:06 within the S/4HANA system. So by leveraging the OData capability,
00:05:11 I can, from an analytical application, trigger an OData action in the S/4HANA system here.
00:05:18 So once I click on the button Update, then the material price in the S/4HANA system
00:05:24 will be updated. So here we enable the communication
00:05:28 between an SAP Analytics Cloud analytical application, and also the S/4HANA system.
00:05:35 Here, we can either trigger an action called Update Material Price, or I can also go to the
S/4HANA system, for example, to say,
00:05:44 get the material price back to my analytical application. For example, I want to display that on
my dashboard.
00:05:52 So here, with this OData capability, we enable a closed-loop scenario,
00:05:58 or insight-to-action scenario. And we are supporting the back-end systems,
00:06:04 SAP HANA, SAP BW/BPC, and SAP S/4HANA on-premise. So in order to do so, you need to
define an OData connection
00:06:18 in SAP Analytics Cloud. Here, keep in mind you are creating a live connection.
00:06:26 So SAP Analytics Cloud, analytics designer, the OData capability needs a direct connection.
00:06:34 So once you are defining the connection, please select the connection as a direct connection.

00:06:41 Then you enter the host URL on the client, and then you either select single sign-on
00:06:47 or use the username or password. This way, you are creating an OData connection
00:06:53 with a back end. Once you have done that, you go to the analytical application.
00:06:59 Go to the technical objects, OData Services. Click on the plus button to add OData Services.
00:07:09 Now once you click on the plus button, it will be on the right side to ask you
00:07:13 to enter your connection. That's a connection that we defined before,
00:07:18 a direct connection. And then you need to enter an end-point URL.
00:07:24 You will get this end-point URL from your S/4HANA system, from your BW/BPC system, or
from the connections
00:07:36 that we mentioned before. We mentioned our S/4HANA system.
00:07:42 So once you get this end-point URL, you type here, and click on the metadata refresh.
00:07:49 You will be able to see this end-point version, entity sets, and also if you are triggering an
action,
00:07:56 you will exactly see the action name. Here we see in the screenshot this material price update.

00:08:03 If you have done that, it means you have successfully added OData services into the analytical
application.
00:08:10 Then by leveraging the script API based on these OData services, you will be able either to
trigger this action,
00:08:17 or you will be able to read some information from these OData entities.
00:08:24 So in my example, you can see that we are using these OData services to trigger an action.
00:08:32 For example, I want to update a material price, and via the script I can give also
00:08:37 which material I want to update the price for. So this way it is very convenient,

24
00:08:43 using a button or using any event, using this script API to trigger an OData action
00:08:49 and to transfer the parameter you want to give, like here. Or you want to get some information,
like
00:08:56 get the material price, get the quantities, and also to be used in the analytical applications.
00:09:04 So that's the OData part. By leveraging the OData capabilities,
00:09:10 you will be very conveniently be able to create a closed-loop scenario,
00:09:14 and also to enable the insight-to-action scenario. Now let's get into the demo part.
00:09:23 Here, I would like to show you how you can embed an analytical application within a hosted
HDML5 page.
00:09:32 So in front of you, you see a local hosted HTML5 page. So you see that's my local server
address,
00:09:40 I'm hosting an HTML5 page. Here on top is content coming from the hosted HTML5 page.
00:09:48 Below, I am embedding an iFrame within this HTML5 page. Within this iFrame is an analytical
application.
00:09:58 So here we can have a both-direction communication. First, I move the discount percentage,
00:10:07 and then the discount percentage will filter on the analytical application the chart and the table.

00:10:15 And this discount percentage also will affect here the discounted price.
00:10:20 Can you see here? So once I move that, you will be able to see
00:10:24 the interactions. So let's move to 20%.
00:10:32 So once I move to 20%, you see I have used 20% to calculate the discounted price.
00:10:40 And also, this 20% is also sent to the hosted HTML5 page, and the discounted price
00:10:47 will be also calculated based on this 20%. So here we have enabled the communication
00:10:55 from the analytical application in SAC to the hosted HTML5 page.
00:11:01 Then let's have a look into the other direction, the interactions.
00:11:06 So once I click on this mango juice or pineapple juice, I am able to filter below in the analytical
application
00:11:15 to the mango juice. Or I click on the strawberry,
00:11:18 and then the strawberry juice will used as a filter to filter the chart and table.
00:11:23 Here, I'm able to post the message from the hosted HTML5 page
00:11:29 to the embedded analytical app. So the communication, both directions.
00:11:36 So now we'll have a look into how we can enable this both-direction communication, how we
can implement it.
00:11:45 First, I have a look into this particular analytical application,
00:11:50 what we need to do to enable this communication. We have seen that first, we are receiving
information
00:12:00 from the hosted HTML5 page. Like, I click on the mango juice,
00:12:05 and so this will be used as a filter to set to my tables or charts.
00:12:10 So this received information from outside can be implemented by the
onPostMessageReceived event.
00:12:19 So if you click on this FX in this analytical application, and go to the onPostMessageReceived
event,
00:12:27 click on that, and we will be able to see here
00:12:31 if the message is mango, we see that, it will set the filter
00:12:36 to the particular chart and the table. So that's the communication from the host
00:12:42 to the HTML5 page to the analytical application. The other communication is also, we have
seen that,
00:12:50 once the application is rendering, then this discounted price

25
00:12:55 and also original sales price have been shown to this HTML5 page.
00:13:01 So here we are also using the onInitialization event. Once the application is rendering,
00:13:08 we are sending the information. The original sales price, we see that.
00:13:15 From the mango, from pineapple, from strawberry, from watermelon, we send the original
sales price
00:13:22 and also the discount information to the hosted HTML5 page.
00:13:29 That's the first step. And we also have seen that once I move the slider,
00:13:35 also it will affect the HTML5 page, this discounted price.
00:13:41 So let's have a look into the slider part. Here is a slider, go to the FX.
00:13:47 Once we have moved the slider, we are posting the discount information
00:13:53 onto the hosted HTML5 page. So that's the three places we can have the communication
00:14:04 between an analytical application and also the hosted HTML5 page.
00:14:09 Of course, you can use any event that you want to send the post message event
00:14:15 to the hosted HTML5 page. So in my example, I'm moving the slider,
00:14:21 and then the discount information will be sent to the hosted HTML5 page.
00:14:27 So that's what you need to do in the analytical application itself.
00:14:31 And also as a prerequisite, don't forget in the SAC administration part,
00:14:38 you need to go to App Integration to set your local server
00:14:45 or your third-party application URL address as a trusted origin for this SAP Analytics Cloud
server.
00:14:54 So here, in my example, I add a local address here as a trusted origin.
00:15:00 With this setting, we enable the communication between this local server under the SAP
Analytics Cloud,
00:15:09 this tenant. Now let's have a look into
00:15:16 what do we need to do for the HTML5 page, which kind of implementation we need to do
00:15:23 to enable this embedding scenario. So now we'll have a look into this HTML5 page.
00:15:31 In this HTML5 page, you see that as a user implementation, I added some images
00:15:38 to different juice types. And then, what's important is that
00:15:42 the analytical application is embedded within an iFrame in this HTML5 page.
00:15:49 So within this iFrame, I need to identify the application URL.
00:15:54 So that's what you have seen here. That's the application URL.
00:15:58 So we suggest that if you embed an analytical app into a third-party application, please use the
embed mode.
00:16:08 With embed mode, we will not see the SAC shell. It's much more convenient, and it looks
better.
00:16:14 So here I'm using the analytical application with the mode embed.
00:16:19 To identify, this application will be run within this iFrame.
00:16:25 And the next is that we want to send the information from this HTML5 page
00:16:31 to the SAC analytical application. So here I'm sending the messages,
00:16:38 you see the mango, pineapple, to this SAC tenant. So that's what you need to identify,
00:16:46 the second step. And the third step is that
00:16:49 you are using this coding to calculate, based on the information, the discount information,
00:16:57 you will calculate what is a discounted price and then display it in the HTML5 page.
00:17:04 That's basically this coding, this part. So that's what you need to do in your HTML5 page.
00:17:11 So as a final result, you basically see this runtime information.
00:17:18 Under that, we can send the mango juice as a filter to the analytical app.
00:17:25 And also from analytical app, I can send these discount percentages

26
00:17:30 to the HTML5 page to enable the interaction in both directions.
00:17:37 So that's today the demo for this unit, how you can embed an analytical application
00:17:44 into the hosted HTML5 page by leveraging the post message API capability.
00:17:54 Thank you, that was unit five, integration. I hope you enjoyed this unit.
00:18:01 Bye for now.

27
Week 5 Unit 6

00:00:05 Hello, everyone. Welcome to week five unit six,

00:00:08 Analytics Designer, Custom Widgets. In this unit, we will highlight
00:00:12 an important capability in analytics designer, which is the custom widgets.
00:00:17 Let's have a quick preview first. The SAP Analytics Cloud custom widget is a framework,
00:00:23 that allows users to extend the predefined sets of widgets provided by analytics designer
00:00:28 with their own custom widgets. Custom widgets are very simple and useful features.
00:00:34 For example, if a user needs a specific user interface element or particular visualization of
data,
00:00:40 or certain functionality in the analytics designer, which is not provided by the predefine set of
widgets,
00:00:47 then he can think about building his own custom widgets that cover his scenario and use
cases.
00:00:55 Custom widgets are smoothly and simply integrated into the analytics designer, like any other
predefined widget.
00:01:02 You just need to upload your JSON file, we'll highlight that in the next slide,
00:01:07 into the SAC tenant, and then you will be able to add the custom widget
00:01:12 like any predefined widget to your canvas. Let's highlight now the structure and the different
components of custom widgets.
00:01:22 Technically, a custom widget is a simple set of files. You have to keep in mind,
00:01:27 the most basic custom widget consists of simply two files. First one is the JSON file, which is
the metadata,
00:01:35 and the JavaScript file, which is the Web component. More complex custom widgets
00:01:40 add more files to this, which means more web components,
00:01:44 more JavaScript files, you can add as well CSS files, images, and so on.
00:01:49 That depends on the complexity of the custom widget that you want to build. To create custom
widgets, you don't need any special software.
00:01:57 At the moment, at the beginning, a simple text editor will do.
00:02:02 However, when your custom widgets get more complex, then we recommend a good
JavaScript editor,
00:02:08 which will make development for you, the development offer easier. The structure of a widget
has at least two parts, and possibly up to four.
00:02:18 Let's start with the metadata file. JSON file, which is uploaded to the SAC tenant.
00:02:25 It defines everything that SAC needs to know about the widget. How it's identified,
00:02:31 its properties, events, methods, and where the web component implementation can be found.
00:02:36 This file is required. The main Web component is a JavaScript file
00:02:41 containing the implementation of the Web component in the application canvas. This file is
also required and needs to be visible to the end user
00:02:49 as their browser will be taught to fetch it, When this widget is encountered in your application.

00:02:56 Where it is hosted actually is up to the developer, and up to the use case and scenario of
usage of the custom widget.
00:03:03 For example, a partner or community member implementing the main Web component for use
by many customers
00:03:10 may want to host it on their favorite cloud platform. Or while a customer implementing widget
for internal use,
00:03:18 might just want to run a node GS server, with HTTP server, to host it internally. An optional
styling Web component,

28
00:03:30 it's optional as I said, it's not basic, it's not required,
00:03:34 but if you want to extend your styling panel this JavaScript is where you will define
00:03:39 the content that you will be adding to the styling panel. The styling panel can be synchronized,

00:03:44 with the widget properties. Also the builder Web component,
00:03:49 like the styling Web component but for the builder panel. Having both options lets you
00:03:54 allocate your design panel widget configuration tasks to the panel that fits best. Let's now jump
and talk about deployment
00:04:04 which is a really super important part for custom widget. To host the custom widget,
00:04:08 you need two locations, on which these files are distributed.
00:04:13 First, the SAP Analytics Cloud instance, on which you can upload the custom widget JSON
file.
00:04:20 We'll highlight that more in the next slide. And the HTTP Web server, with HTTPS enabled,
00:04:26 on which you upload your Web component files. The Web server acts like a simple repository

00:04:34 of the resources files. And all these files are static.
00:04:37 They aren't processed or executed on the Web server. The JSON file contains the URL
references that point to those resources files.
00:04:49 Of course, there are some small restrictions for custom widgets that you should take into
account.
00:04:55 For example, the custom widget works only with Google Chrome browser and Microsoft Edge.

00:05:03 So as I said previously, the JSON file should be hosted in the SAP Analytics Cloud.
00:05:10 And for that, you should redirect, to the Custom Widgets tab,
00:05:15 which is under Analytic Applications, on the left side of SAC in the left panel,
00:05:21 and you just need to press the plus sign on the custom widget and then upload your file,
00:05:28 I mean by that your JSON file. Know that you need the appropriate permission,
00:05:33 and the rights in order to create and upload custom widget in SAP Analytics Cloud.
00:05:39 So not any user with the basic permissions and rights is able to upload or create a custom
widget.
00:05:53 A custom widget can also be linked to a data model like any other standard widget in the
application designer.
00:06:03 By adding your custom widget, you have just to press plus
00:06:07 under the insert in the toolbar of the design time in app designer, then you go down,
00:06:13 you will find the custom widget, you choose your custom widget
00:06:16 that you already deployed and uploaded previously, and then you will add it to the canvas.
00:06:26 And then the builder panel will appear and then you have just to link your model.
00:06:30 And then you have to set your measure and also set your dimensions.
00:06:37 As I said, previously, a custom widget has at least two parts,
00:06:40 and possibly up to four. But what you see here is the metadata.
00:06:46 It's a JSON file. It's an empty one,
00:06:49 You can see, I want to highlight the Syntax and the different parts that should be defined.
00:06:56 Basically most of the JSON files contain the syntax, depends on the complexity, as I said,
00:07:03 but mostly all the JSON files use the same syntax and the same definitions.
00:07:09 You should define the Web components elements, which contain the metadata that the widget
needs
00:07:14 for accessing and using the Web component JavaScript files. Also defining the properties
elements

29
00:07:20 where your properties will go. And as an example, I choose to highlight the new properties
definition, called dataBindings,
00:07:29 which is responsible for the data binding via the builder panel that I already showed in the
previous slide.
00:07:38 And also you have to define the method elements where your script API method definitions will
go.
00:07:46 All the widgets have a handful of a standard script method. And this element allows you to
define the script commands
00:07:54 that you want to have available to your widget. And last but not least, the events method,
00:08:00 which defines the script event that you will want your widget to have. These main and basic
definitions have to be set in your JSON file.
00:08:19 Here we have the JavaScript file. Let's have a look at the screenshot that you can see now.
00:08:26 As I said, it's a JavaScript file, it's based in JavaScript,
00:08:29 and contains the implementation of the Web component in the application canvas.
00:08:33 Here you can define the template, you can define the custom element,
00:08:37 and all the functions that cover your scenario, and all the functions that you want to write
00:08:43 in order to have your own custom widget. The JavaScript file
00:08:50 is different from one custom widget to another one. It depends on the complexity, it depends
00:08:55 on your use case, it depends on your scenario, and what kind of custom widget you want to
build.
00:09:00 You could have a simple custom widget, and you can have a really super complex custom
widget,
00:09:07 with super advanced JavaScript code. So let's jump to the demo,
00:09:14 to highlight more the custom widget. So in the demo, I will show you how you can add the
custom widget
00:09:24 to the canvas in the design time mode in app designer, and also I will show you how you can
upload your custom widget to your SAC tenant,
00:09:35 and then we will have like a quick preview of the custom widgets file, meaning the JSON file,
00:09:42 and also the Web component file. For our demo, I choose to add bar chart, a custom widget
00:09:51 to the application that we used in the unit two. So I deleted one standard widget
00:09:59 and then I will add now a custom widget. And for that we just need to go
00:10:06 under Insert, press the plus sign, and then scroll down to the Custom Widgets,
00:10:12 and then we will see all the custom widgets available in this tenant. So I will choose the bar
chart custom widget.
00:10:24 This is the default size that I define in my JSON file, so I will resize it and also change the
position.
00:10:37 So next step I will open the designer and I will select a model
00:10:44 in order to set my measure and my dimension. So, for that I will choose this model,
BestRun_Advanced.
00:10:55 And I will set as measure quantity salt, for example. And as a dimension I will choose sales
manager.
00:11:07 And here we are now we can see the result of our selections. We see here the sales manager,

00:11:15 and also the quantity sold by every sales manager. We can as well add another measure,
00:11:21 I would choose, for example, the quantity sold plan, and the result was super fast
00:11:31 to see the result of our selected measure and dimension in the custom widget. So let me save
my application,
00:11:43 So we go under files here, and we save our application.

30
00:11:52 So next step now to do is to show you how we can upload the custom widget to the SAC
tenant.
00:12:01 So the question is, how can we see our custom widget under custom widget in the design time
of app designer?
00:12:12 So it's really simple and easy. I will go back to the home of the SAC tenant,
00:12:21 I will redirect myself to the analytic applications, where you can create a new application,
00:12:28 and I will click on the Custom Widgets tab, in order to add my custom widget.
00:12:36 So you can see here we have all the available custom widgets in this tenant here. And to add
a new custom widget,
00:12:44 you need to press the plus sign here and select your JSON file, which is in your local
repository.
00:12:56 And then press okay. And then you need just to create a new application
00:13:03 and you will find your new custom widget under the Custom Widgets tab, under Insert.
00:13:11 So now the next step, I want to invite you to have a really quick preview
00:13:19 of what the JSON file and the Web component file, I mean by that the JavaScript file, look like,
in our case for this bar chart custom widget.
00:13:34 So let's start with the JSON file. As I said in the presentation
00:13:40 it's really important to define certain functions, properties, method, events, and also Web
components.
00:13:53 So let's get started with the Web component definition. As we can see here, we have two Web
components,
00:14:01 we have two definitions, so we have the first one,
00:14:04 which is the main Web component, and here we can see the path, it's super important to write

00:14:10 where your Web component is located under which server, if it's local server or another server
located in another place.
00:14:27 So it's super important to give the right value for that, and we have also the styling Web
component,
00:14:36 which is an optional Web component. In my case here we have two Web components,
00:14:41 we have the main, which is required and we have another Web component,
00:14:47 which is the styling Web component. In addition, for that we need to define as well the
properties,
00:14:58 we can see here we have different properties definitions, for example like the caption, the
model, the width, and the height,
00:15:06 which I set as default, the width to 600 and also the height to 400.
00:15:15 Also we can define the method elements, but before that let me also highlight the data binding
element definition.
00:15:27 So for that, I define a new data binding, which is called myDataSource,
00:15:35 and I defined as a feed the dimension and the measure. And we have two types of feeds,
00:15:43 we have the type dimension for the dimensions of course, and we have the type main
structured member for the measure.
00:15:52 So this method is responsible to have the builder panel on the right side.
00:16:01 Of course, here we have also some method definitions like the caption, set caption,
00:16:07 and we can also define the events methods, which are in our case here
00:16:18 the onResultChange and also onClick. So to resume, for the JSON file
00:16:30 it's very important to define the Web component, the properties element, where your properties
also will go,
00:16:39 the method element, where the script API method definition also will go, so all the widgets
have a handful of standard script methods,

31
00:16:49 and this element that I just showed you now allows you to define the script commands
00:16:56 that you want to have available to your widget. And last but not least,
00:17:05 you can also define the events method. Don't also forget to give your custom widget a name
and ID,
00:17:17 for our case here, we give name BarChart Widget, and as a new instance prefix, BarChart.
00:17:26 So let's now jump to the Web component, it's the Web component of the custom widget
00:17:32 that we are in our application called barchart.js, it's JavaScript file.
00:17:39 And for the Web component actually there is lifetime
00:17:46 and life cycle on the custom widget Web component, which I mean by that custom widget
framework
00:17:54 called specific JavaScript functions of the Web component in really defined order.
00:18:01 So there are some functions that are called when the custom widget is rendering for the first
time,
00:18:09 there are also some function that are called when the custom widget is updated,
00:18:17 and also there are some functions when the custom widget is removed from the canvas, for
example, or the analytics application is also closed.
00:18:30 So there is some function who is responsible for executing the different calls. So let me
highlight some functions available in our case here.
00:18:44 For example, the constructor function, for example it's called for when the custom widget is
rendering for the first time.
00:18:58 Also the connectedCallback, the onCustomWidgetBeforeUpdate
00:19:05 also is called for the first time when your custom widget is surrendering for the first time.
00:19:13 There are also some other functions that are executed after update of the custom widget,
00:19:20 for example, onCustomWidgetAfterUpdate. So I want to mention that the JavaScript file or the
Web component of the custom widget
00:19:39 are different from one custom widget to another one. It depends on the complexity of the
custom widget
00:19:47 and depends on type of the custom widget that you could have really simple JavaScript file
00:19:56 and also really simple JSON file and as well as really complex JSON file and also JavaScript
file.
00:20:10 Thanks for joining me, and before I close this unit
00:20:13 I want to give you some resources maybe to explore more,
00:20:19 to try the custom widget. And for that I invite you to visit the Help Documentation link,
00:20:25 also our Developer Handbook where you will find a custom widget chapter,
00:20:31 and then also visit the API Reference Documentation. And the most important thing,
00:20:36 visiting our SAP Analytics Cloud Community where you will find several blogs and several
videos,
00:20:47 which will help you to start with the custom widget. Thanks for joining and see you for the next
unit.

32
Week 5 Unit 7

00:00:06 Hello, everyone. Welcome to unit seven, Performance Best Practices.

00:00:12 This is the last unit of week five. So here, I would like to introduce the performance best
practices
00:00:20 for you to speed up the performance of your analytical application. I would like you to
remember
00:00:28 the most important performance best practices you can apply to your analytical app.
00:00:34 First, try to load invisible widgets all in the background. Then, use the pause refresh API as
much as possible.
00:00:45 Only enable the planning tables when the planning is really used.
00:00:51 And also, when you use the script API setDimensionFilter, please leverage the member info
object instead of the ID.
00:01:01 So these four are the most important performance best practices that you can immediately
already leverage and apply to improve your performance.
00:01:13 Next, also very important is the design of the application. So try not to build the huge, large
analytical applications.
00:01:24 That's also not very organized for your end users. Try to organize this analytical big application

00:01:32 into some small applications and try using a script API to link them together
00:01:38 or using a landing page to link them together. Or if you really need to put all of the information

00:01:45 into one analytical app, try to organize it using different tab strips, using different tabs, using
different pages,
00:01:53 so that your end user gets a better overview of your analytical application. And with this you
can also build up, actually speed up your performance,
00:02:07 analytical app performance. And also analytical design script API is very important.
00:02:14 There are different tips and tricks that you should consider and the same are the widgets and
also other considerations.
00:02:22 I will not have enough time to explain every single performance best practice within this unit,
00:02:29 so I will go through the most important performance best practices. For all other details, here in
the links are a blog
00:02:37 and the developer handbook that you can later on have a detailed look into. And also the story
performance best practices
00:02:46 are also important for you, because the story and the app share the same widgets.
00:02:51 So also have a look in there. And in addition, we have also two SAP Notes
00:02:57 to provide you additional performance best practices information. First, loading invisible
widgets in the background.
00:03:06 So if you have a different tab strip or different pages, and the content on the second tab or on
the second pages
00:03:14 are at the beginning not visible to the end users. So try to set these invisible widgets
00:03:20 to loading in the background. With that way, you will be able to speed up
00:03:25 your on startup performance. You can set this invisible widget loading the background
00:03:32 either via the application settings here or you can set it directly in the URL parameter.
00:03:40 And the advantage of the URL parameter is that you can test immediately
00:03:45 how much you have improved your performance if you set the widgets, invisible widgets,
loading in the background.
00:03:56 The second of the tips and tricks, or performance best practices, is leverage the pause refresh
capabilities as much as possible.

33
00:04:05 So, for the pause refresh capabilities, you can cover three scenarios.
00:04:11 The first scenario is that you can pause the initial refresh of your widgets until they are
modified during application onlnit event
00:04:19 to optimize the application on startup performance. That's a first use case.
00:04:26 The second use case is if the widgets are invisible you can pause the refresh.
00:04:32 If they are getting visible, then you can trigger the refresh. The stereotypical use case is that
00:04:37 if a user is doing a lot of interaction like here, set filter and add dimension to the A table,
00:04:44 add measure to the table, you can let the user first complete all set
00:04:48 of these user interactions, and then trigger the data refresh
00:04:52 for the chart or table all at once. So for these three typical scenarios,
00:04:58 you can leverage the pause refresh capability. Either you can set the pause refresh
capabilities
00:05:05 in your widgets, in the build panel. Under there are three, you can set to always refresh,
00:05:12 or automatic pause refresh, or always pause. Automatic pause refresh means
00:05:19 if the widget is getting active, the data refresh will be triggered.
00:05:24 If the widget is inactive like invisible, then data refresh will not be triggered.
00:05:31 That's the automatic pause refresh for this option. You can either set here,
00:05:37 and combine with the script API that we provided to set each chart on tables pause refresh to
true or false,
00:05:46 or to set the application pause refresh to true or false. If you have multiple widgets to do,
00:05:53 we recommend using the Application.setRefreshPaused and refresh to true or false,
00:05:59 because that will also save your performance if you use this scripted API.
00:06:05 The next is, as I mentioned, using a MemberInfo object for setDimensionFilter script API.
00:06:13 We are using a lot of set dimensions in the analytical application to set a filter.
00:06:18 And in that case, if you are using ID, it will trigger a back-end trip,
00:06:22 an unnecessary backend trip. So if we are using the MemberInfo object,
00:06:27 we can avoid the back-end roundtrip. And if you have a description,
00:06:33 then please just actually write this description. And for this MemberInfo object
00:06:40 if you don't have a description, does not matter just use a simple dummy description.
00:06:45 In that case, you avoid a back-end roundtrip and then it will improve your performance.
00:06:51 So always use MemberInfo for setDimensionFilter script API, instead of ID.
00:06:59 Those are the most important things to remember. And I already mentioned at the first slide
00:07:06 first to reach the best on startup performance. Please consider combining
00:07:13 loading widgets in the background plus Pause Refresh capability.
00:07:18 Also, for your on initialization event please don't access unnecessary widgets.
00:07:26 If you really need to access, also access at least a number of the invisible widgets.
00:07:34 And the second, if you have the planning scenario, switch off the planning capability of
planning tables
00:07:40 if they are not needed. Only switch the planning capability on
00:07:45 if these planning tables are really used for the data input. And then apply the pause refresher
as much as possible.
00:07:55 And also for the planning use cases, you can also leverage the pause refresh capability at the
end,
00:08:02 or use MemberInfo object for setDimensionFilter script API,
00:08:07 instead of the ID to avoid the back-end round trip. So those are the most important things to
remember
00:08:15 for the performance best practices. And you can immediately leverage it

34
00:08:21 in your analytical application to speed up the performance. Now, I would like to introduce
00:08:27 how you can analyze your performance. First, what we are delivering is a performance
analysis tool as an analytical application,
00:08:36 to help you to analyze your performance, to know where the bottleneck is.
00:08:41 So you will find this analytical application in the folder System, then go to SAC Content.
00:08:48 You will be able to see this analytical application. With this analytical application,
00:08:53 you will be able to see the back-end statistics, network statistics, front-end statistics,
00:08:58 and also the application script execution time. So when you know the bottleneck,
00:09:04 you can do the further analysis. Like for example, if I know well,
00:09:09 in here the onInit event takes quite long, then I can further analyze this,
00:09:14 why the onInit event takes so long? Next we provide a script performance measurement popup
to you
00:09:22 that will help you to analyze the script performance. So you need to add this string in your
application URL
00:09:32 after the application.html. So first add this string to your application URL,
00:09:39 and then use Ctrl + Shift + A, then you can trigger this performance measurement popup.
00:09:45 And here it will show you how long your script is running. And it will identify some bottleneck
00:09:53 like in this red area, it will show you, for example, background loading awaiting for the table to
be initialized.
00:10:01 So based on this guidance, which are marked with the red, you know that is a bottleneck, there
is an issue,
00:10:09 and you can, based on the performance best practices guide, solve this issue.
00:10:15 But with this performance popup, you can really know where the bottleneck is
00:10:19 and why your performance for this scripting execution takes so long. And then you have the
chance to improve it.
00:10:27 So in the demo, I would like to show you how you can trigger the performance measurement
popup,
00:10:32 to analyze the script performance. Now I would like to show you in a demo
00:10:41 how you can use a script performance measurement popup to analyze your script
performance
00:10:48 and also apply the most important tips or best practices that I have shown you on the slide
before.
00:10:56 So in a front of you, you see an analytical application you see in the design time.
00:11:02 And this is a very technical application. And in the outline, we see a lot of tables,
00:11:08 only most I have 25 tables and that they are all invisible. And the idea from this technical
application is that
00:11:16 I have a lot of invisible tables. But what I would like to show the final result is that
00:11:23 I want to use my initialization event in order to get access to the table 25,
00:11:29 this is also an invisible table, and to set a filter to the table 25.
00:11:34 And then I'll get this filter text in a text element. So that's the scenario that we have.
00:11:43 So since these widgets are all invisible, and so first I would like to apply
00:11:48 that for the invisible widgets, we can apply the loading in the background
00:11:54 and that if we apply that, then it will speed up the on startup performance
00:11:59 for your analytical application. So for that, for all of the invisible things
00:12:04 we can put this load invisible widgets in the background. So once these invisible widgets turn
to visible,
00:12:13 then it will start rendering. So it will save the time for the on startup performance.
00:12:20 So that's the first step we are doing. So after that, we will be looking to how it looks

35
00:12:27 in the application runtime. Now I go to the application runtime.
00:12:32 And then I would like to refresh this application again. Then you will be able to see
00:12:38 how this application is running. We have this loading indicator
00:12:42 and then we will be able to see from this table we set the filter and then we get the text,
00:12:48 this is the income statement. So now I can use the script performance measurement popup
00:12:58 to analyze my on startup performance. So as a prerequisite, you need to add the
00:13:06 ?APP_PERFORMANCE_LOGGING=true in the application URL. And its position needs to be
exactly after app.html,
00:13:19 and in this position, you need to add this string into your application URL, like I explained in the
last slide.
00:13:30 So now I already added this string to my application URL. And then the next step is using the
Ctrl + Shift + A
00:13:38 to trigger this popup. So now you see this performance popup.
00:13:46 Now we see that it's waiting for table 25 to be loaded in the background.
00:13:51 And also the description factor, it's also taking time. So we know that.
00:13:56 Now we are going into how to opt optimize it. So first I close this script performance popup.
00:14:04 Let's go to the design time. So let me go to the design time.
00:14:11 Once we switch to the design time, we know in the application on startup performance here,
00:14:17 we get access to the table 25. But if we look at the table 25,
00:14:22 go to the starting panel, we know this table 25 is an invisible widget.
00:14:31 But we still need this invisible widget in the on initialization event.
00:14:36 So based on the best practices, we should actually always initialize this widget,
00:14:43 this table 25, already on startup. It does not make sense to load that in the background,
00:14:50 because I need this widget already for the on startup event. Even it is invisible, but I can
identify,
00:14:58 it should initialize on startup. Okay, that's as a first step.
00:15:04 So now let's save it as a first optimization, the first step.
00:15:09 Let's save it, and then have look into the runtime, how this performance has been changed.
00:15:16 So we go to the Runtime again, again we trigger this performance popup
00:15:20 by using the Ctrl + Shift + A and we see this waiting table to be loaded in the background,
00:15:27 compared to the first run, already reduces the time. There is still some time needed,
00:15:34 but compared to first run already reduced. Then let's have further look into
00:15:39 how we can further optimize. So close this one again, and then let's go
00:15:44 to the design time again for this analytical app. So we know that this table is used
00:15:55 for the on startup event. And after this table is rendered,
00:16:00 and then I set the filter again on the onInit event. So for that we know actually the first
rendering
00:16:08 we can use a pause refresh to first pause it, that this widget should not be rendered with the
data.
00:16:17 And only after the filter is set already, then we render the data. Okay, so based on, then we
can first go to the table 25,
00:16:30 go to the designer, go to here, go to the data refresh behavior.
00:16:39 So what we want is now this data refresh should not happen.
00:16:45 And only after we set the filter should the data refresh happen again.
00:16:50 So we go to always pause refresh. So you notice once I click on the Always Pause,
00:16:59 then the planning enabled is also not checked anymore. Because it does not make sense,
00:17:07 and this table is a planning table. So in that case, I first pause the data refresh,

36
00:17:13 and the planning is also set to disabled. And once later on, the filter is set, then I use a script to
refresh this table,
00:17:23 and then I set the planning enabled again. Using that, I can save on time data refreshing in
startup.
00:17:33 So with that, we go to our on startup event again. So application on initialization event again.
00:17:42 So what I next will do here is that I will, after basically data is set to get the data sources, under
sets the filter,
00:17:54 what I will do is that I will set a data refresh, trigger the data refresher. So here we are using
the script like a ds. and using the Ctrl + Space here,
00:18:08 and we can do Ctrl + Space here. And we can go to the setRefreshPaused here.
00:18:16 We see that here. And set refresh paused to false.
00:18:22 Because it was disabled before, now I want to trigger again.
00:18:26 And after that, I also want to set my table to planning enabled in that case. So what I would do
is that Table_25.
00:18:45 and I'm using this Ctrl + Space again, and using the getPlanning
00:18:54 and also again Ctrl + Space, and setEnabled to true, because it was disabled before.
00:19:04 So let's now save this application. Then we go back to the runtime again
00:19:10 to see how this on startup performance has been changed. So go to the runtime,
00:19:18 and then, using the Ctrl + Shift + A again, to trigger the popup.
00:19:25 You see waiting for table 25 to be loaded in the background.
00:19:29 All these red areas are gone. All the rest is I need to use the description
00:19:36 instead of the ID, if I'm using the set filter script command.
00:19:41 So why? Because we basically set the table 25 to pause
00:19:48 after the set the filter of the table 25, and I then trigger the data refresh
00:19:53 and I then trigger the table to be planning enabled. With these best practices, you can already
save the whole of this red area.
00:20:03 And we also can reduce from the performance the overall performance from here and to 2,330
millisecond.
00:20:13 Now let's optimize this part. So I close again and go to design time.
00:20:21 We learned before that for set filter script command, we should leverage the description
instead of the ID.
00:20:31 So go to the added scripts, go to the on initialization event.
00:20:34 We see this part, right? And with this part, we see we are using ID.
00:20:41 So now I would like to leverage the description. I don't know any description, but that does not
matter,
00:20:47 we can also leverage some default or stand up a description does not matter.
00:20:56 So let me use the description. Then I'm using basically here abc to use that,
00:21:05 using just a default or dummy description. Okay, so only using the description part.
00:21:12 So that's it, so let's save it. And then we go to runtime again.
00:21:19 Let's go to the runtime. Looks into maybe refresh again here
00:21:25 let's have look into the performance popup part. And this time we see that this performance
00:21:39 is really quite quick and on to 2,000 millisecond, and everything is basically to be optimized.
00:21:49 Okay, so that was the unit seven, Performance Best Practices, and also we are going to the
end of the week five.
00:21:58 I hope you enjoyed this week, and also learned the whole feature highlight
00:22:03 of analytics designer. Thank you.

37
Week 5 Unit 8

00:00:05 Hi, we have now reached the last unit of this openSAP become an augmented BI expert
course.
00:00:14 And I hope you enjoyed the course as much as I did. As you've learned in this course,
00:00:22 SAP Analytics Cloud is really the only tool that combines monitoring business intelligence
00:00:28 with projection planning, with simulation, with the predictive and augmented capabilities. And
of course, we went through the importance
00:00:38 of data preparation, wrangling, and modeling of data. You learnt about creating stories and
advanced stories,
00:00:47 and applying augmentation and predictive scenarios to it. And in the end, you learnt all about
creating analytical applications with analytics designer.
00:00:58 Well, I think that's a huge amount of content, really bringing you into a stage that you master
the product inside out.
00:01:06 Very important is that we also refer you to a number of resources. Very important resources,
like there is the help.
00:01:16 We have to community pages for analytics with best practices, and guides, and insights.
00:01:21 We have learning journeys, we have blogs, and we also have the release notes.
00:01:27 And definitely don't forget all the other openSAP courses for planning,
00:01:33 advanced planning, connectivity, what have you, that you can leverage. I wish you a pleasant
end of this course.
00:01:41 I wish you all the success in your exams and your certification. Thank you so much.

38
www.sap.com/contactsap

© 2022 SAP SE or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company.

The information contained herein may be changed without prior notice. Some software products marketed by SAP SE and its distributors contain proprietary softwar e components of other software vendors.
National product specifications may vary.

These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP or its affiliated companies shall not be liable
for errors or omissions with respect to the materials. The only warranties for SAP or SAP affiliate company products and services are those that are set forth in the express warranty statements
accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.

In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or t o develop or release any functionality
mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategy and possible future developments, products, and/or platform directions and functionality are
all subject to change and may be changed by SAP SE or its affiliated companies at any time for any reason without notice. The information in this document is not a commitment, promise, or legal obligation
to deliver any material, code, or functionality. All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are
cautioned not to place undue reliance on these forward-looking statements, and they should not be relied upon in making purchasing decisions.

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company) in Germany and other
countries. All other product and service names mentioned are the trademarks of their respective companies. See www.sap.com/trademark for additional trademark information and notices.