Intro



SAP Insider Reporting & Analytics – Design Studio Demo and Sample CodeIntroFor the demo, we are going to build a dashboard using the eFashion universe. The demo will cover creating scripts using content assistance, arrays, global script functions, dynamic visibility, and CSS. The dashboard will contain a crosstab with summarized sales revenue by year and a bar chart with sales revenue data by year and month. The user will be able to filter the crosstab and chart using two dropdown boxes. We’ll use a button to perform dynamic visibility.The SetupLet’s create a new dashboard using the basic layout template.Next, we’ll drag and drop a button and two dropdown boxes from the basic components panel.Next, rename the button component, BUTTON_HIDE. Then, change the button text to Hide Components.For ease of use purposes, let’s rename our two dropdown boxes. Note: If you don’t rename the components, then your code will differ from the sample.The top dropdown box will be renamed DROPDOWN_YEAR. This component will allow users to filter on year.The bottom dropdown box will be renamed DROPDOWN_STORE. This component will allow users to filter on store name.Crosstab ComponentLet’s bring our first analytic component into our dashboard. Drag and drop a crosstab into the dashboard.Next, let’s create a data source for our crosstab. Navigate to add data source and click on the browse button. Next, select the eFashion universe and put DS_CROSSTAB in the Data Source Alias field.Before we can finish creating the data source, we need to edit the query specification. Click on the Edit Query Specification button and let’s build our query. Let’s include the following objects in the DS_CROSSTAB data source: Year, Store name, and Sales revenue.Once the data source has been created, we need to assign it to our crosstab. We can do this by dragging and dropping the data source from the outline panel to the crosstab.Below is what the crosstab should look like at the moment. The reason the crosstab only contains the Sales revenue in the initial view. In order to fix the crosstab, right click on the data source in the outline panel and select Edit Initial View.From here, we can change what appears in the crosstab. The panel on the left shows all the objects that we included in our query. Drag and drop the Year object into the rows section. In the Live Preview panel, we can see what the data would look like in the crosstab. Click next and let’s look at the crosstab now.Here is what the crosstab looks like after editing the initial view:Chart ComponentNext, we’ll create the bar chart that will show a lower level of detail than our crosstab. To do this, drag and drop the chart analytic component onto the dashboard.Just like the crosstab component, we will need to create and assign the data source component to the chart. Once again, we’ll use the eFashion universe. Let’s make sure that we rename our data source, DS_CHART.Next, we’ll edit the query specifications. The DS_CHART data source will contain Year, Month, Store name, and Sales revenue.After creating the new data source and assigning it to the chart analytic component, the chart should look like this:We’ll need to edit the initial view of the data source to get our chart looking right. Right click on our DS_CHART data source and click on Edit Initial View. We want our chart to display the sales revenue by year and month. Therefore, we need to drag and drop the Year and Month objects into our initial view. Bring them into the columns section.The chart should now look like this:Dropdowns – Loading ValuesNow that we have the basic layout of the dashboard set up, we can start to breathe some life into our dashboard! The first step to creating working dropdown boxes is to load data values into them. When the user first starts up the dashboard, we want the dropdown values to be loaded. In order to do this, we will need to look at the outline panel in the bottom left corner. Then we will need to click on the application or dashboard name.Once we’ve clicked on the application, we need to look at the Properties panel to the top-right side of the screen. In the Properties panel, scroll down to the bottom of the panel till you see On Startup. Clicking on the On Startup line will make button appear to the right containing ellipsis (…). This button will allow you to edit the On Startup script.Let’s click the Edit the script button. The Script Editor screen will let us load our dropdowns with values. Please see Sample Code – Load Dropdowns with Values On Startup//Load the Years into the Dropdown - DROPDOWN_YEAR ComponentDROPDOWN_YEAR.setItems(DS_CROSSTAB.getMemberList("OBJ_188", MemberPresentation.INTERNAL_KEY, MemberDisplay.TEXT, 100,"All Years"));//Load the Store Names into the Dropdown - DROPDOWN_STORE ComponentDROPDOWN_STORE.setItems(DS_CROSSTAB.getMemberList("OBJ_376", MemberPresentation.INTERNAL_KEY, MemberDisplay.TEXT, 100,"All Stores"));After completing the script, let’s run our dashboard. We can now see that the dropdowns have values in them now.Clicking a dropdown shows all the values that have been loaded.Dropdowns – Create Interactive FiltersNow that we have values in our dropdowns, we need to add additional functionality to them. Let’s create a script that filters our charts based on the user’s dropdown selection. To do so, we need to click on the DROPDOWN_YEAR component. This will cause the Properties panel to change based off this selection. Let’s click the Edit the script button on the On Select line.Sample Code – Add Filtering Functionality to DROPDOWN_YEAR//Original Manual FilterDS_1_CROSSTAB.setFilter("OBJ_188", DROPDOWN_YEAR.getSelectedValue());DS_2_CHART.setFilter("OBJ_188", DROPDOWN_YEAR.getSelectedValue());One thing to note about the script is that we are actually filtering the data sources themselves. Additionally, OBJ_188 refers to the Year object’s unique id. We can think of the code as such:Filter the data source’s Year based off the dropdown’s selected value.Next, let’s add the same functionality to the store dropdown. Let’s add the following code to the On Select portion of that component.Sample Code – Add Filtering Functionality to DROPDOWN_STORE//Original Manual FilterDS_1_CROSSTAB.setFilter("OBJ_376", DROPDOWN_STORE.getSelectedValue());DS_2_CHART.setFilter("OBJ_376", DROPDOWN_STORE.getSelectedValue());Just like the script for the year dropdown, we are filtering the data sources themselves. OBJ_376 is the store object’s unique id. We can think of the code as such:Filter the data source’s Month based off the dropdown’s selected value.Let’s run our dashboard and see the dropdown functionality in action. If we select a year value in the top dropdown, we can see that both the crosstab and the chart have been filtered.Dynamic VisibilityFrom time to time, we may want to dynamically show or hide components in the dashboard. Let’s step through a simple example. We’re going to set our button to dynamically hide or show all analytic components in the dashboard. Let’s begin by clicking on our button and then edit the On Click script.Sample Code – Dynamic Visibility//Hide All Componentsif (BUTTON_HIDE.getText() == "Hide Components") {CROSSTAB_1.setVisible(false);CHART_1.setVisible(false);BUTTON_HIDE.setText("Show Components");}//Show All Componentselse{CROSSTAB_1.setVisible(true);CHART_1.setVisible(true);BUTTON_HIDE.setText("Hide Components");}The code works by checking the displayed text of the button. Using the setVisible() function we can then show or hide each component. Finally, we change the text of the button using the setText() function.Next, let’s check our code by running the dashboard.When we click the button, we can verify that our code works. The analytic components disappear when we press the button.Creating Script Functions and Global Script ObjectsScript functions can be very powerful and can improve the scalability of your dashboards. Let’s create a script function. First we need to navigate to the outline panel in the bottom left hand corner and scroll to the bottom of the panel. Next, right click on the Technical Components folder and navigate over Create Child and then click on Global Scripts Object.Let’s right click on the Global Script Object that we just created and select Create Script Function.When creating a script function, we need to think of our function in general terms. What is the purpose of this function? What type of objects should the function accept? Our function should filter the object within the data source passed to the function. The filter should use the selected value from the dropdown component passed.Using the previous information, we can create our script. Please note that the script references the input parameters and their names.Sample Code – Script Function//Filter the Data SourceDataSource.setFilter(Object_to_be_Filtered, Dropdown_Selected.getSelectedValue());Now that we’ve create the script function, let’s put it to use. Let’s go back to the On Select script for our year dropdown component. We can comment out our previous code using two forward slashes ( // ). After commenting out our old code, let’s add new code that utilizes our script function.Sample Code – Filtering Using Our Script Function in the Year Dropdown//Original Manual Filter//DS_CROSSTAB.setFilter("OBJ_188", DROPDOWN_YEAR.getSelectedValue());//DS_CHART.setFilter("OBJ_188", DROPDOWN_YEAR.getSelectedValue());//Filtering Using Script FunctionsGLOBAL_SCRIPTS_1.FilterComponents(DS_CHART, "OBJ_188", DROPDOWN_YEAR);GLOBAL_SCRIPTS_1.FilterComponents(DS_CROSSTAB, "OBJ_188", DROPDOWN_YEAR);Let’s set up our store dropdown to utilize the script function as well.Sample Code – Filtering Using Our Script Function in the Store Dropdown//Original Manual Filter//DS_CROSSTAB.setFilter("OBJ_376", DROPDOWN_STORE.getSelectedValue());//DS_CHART.setFilter("OBJ_376", DROPDOWN_STORE.getSelectedValue());//Filtering Using Script FunctionsGLOBAL_SCRIPTS_1.FilterComponents(DS_CHART, "OBJ_376", DROPDOWN_STORE);GLOBAL_SCRIPTS_1.FilterComponents(DS_CROSSTAB, "OBJ_376", DROPDOWN_STORE);By running the dashboard, we can see that the dashboard still filters like before.Creating an Array and Combining it with Our Script FunctionBy Combining our script function with an array, we can super charge our script function. Let’s take a closer look at our On Click script for the year dropdown. We have two lines of code; One line filters the data source DS_CHART and the other line filters the data source DS_CROSSTAB. The only thing that differs between the two lines of code is the data source. We can use this to our advantage.Let’s create an array in our On Select script for the DROPDOWN_YEAR component. Sample Code – Creating an Array of Data Sources//Create an Array Called DataSourceArray that Contains All Data Sourcesvar DataSourceArray = [DS_CROSSTAB, DS_CHART];The array we just created can be thought of as such: An array called DataSourceArray that contains two data sources. DS_CROSSTAB in the first index in the array and DS_CHART in the second index.DS_CROSSTABDS_CHART2Using a forEach-Loop, we can traverse the array and filter each data source along the way. If we need help with the syntax, we can active content assistance by pressing CTRL + SPACE.The during each loop during the forEach-Loop, the data source in that array index gets passed to our script function. The script function in turn filters the data sources.Sample Code – Script Function and Array Combo for the Year Dropdown//Create an Array Called DataSourceArray that Contains All Data Sourcesvar DataSourceArray = [DS_CROSSTAB, DS_CHART];//ForEach-Loop that Filters Each Data Source in the ArrayDataSourceArray.forEach(function(DS_From_Array, index) { GLOBAL_SCRIPTS_1.FilterComponents(DS_From_Array, "OBJ_188", DROPDOWN_YEAR);});The big benefit to using this method is that it scales very well. If we needed to filter on more data sources, we just simply added it to our data source array. Our previous methods of filtering would have required that we write one additional line of code per each new data source.Sample Code – Script Function and Array Combo for the Store Dropdown//Create an Array Called DataSourceArray that Contains All Data Sourcesvar DataSourceArray = [DS_CROSSTAB, DS_CHART];//ForEach-Loop that Filters Each Data Source in the ArrayDataSourceArray.forEach(function(DS_From_Array, index) { GLOBAL_SCRIPTS_1.FilterComponents(DS_From_Array, "OBJ_376", DROPDOWN_STORE);}); ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download