SAP Lumira Designer 2.1 brings with it a host of much awaited features, and one among them is the “Components” Technical component. This component brings into SAP Lumira Designer the power to dynamically create new components on an application on the fly.

This blog delves deeper into the abilities of this component – as part of this blog, we’ll aim at putting this into a common business scenario that we encounter. (At this point, we’re assuming that the user reading this blog has worked on SAP Lumira Designer already and is aware of how to create applications and how to script on the application)

About the component

 The “Components” technical component lets developers dynamically dynamically create components of almost any type (Charts, Crosstabs, Buttons, List Boxes etc.) at runtime by using the appropriate scripts. But the component is not limited to this. The other abilities of this technical component include:

• Creating new Data Sources at run time
• Creating property binding for existing components
• Copying the properties of one component to another

The real power of this component is in the fact that new components that are created can even be bound to data sources on the fly. For instance, imagine the flexibility in creating a new chart at runtime, a new data source for this chart, and binding the two together!

Working with the “Components” technical component

 To dynamically create new components on the fly, it is necessary to add the “Components” Technical Component to your application. You can only add one of these to an application, but you can then use scripting to dynamically create any number of components at runtime. To do this:

1. Right click on the Technical Components folder (found in your Outline View)

2. Select the menu option Create -> Components (outlined in the image below)

Dynamically creating a new component at run time

 In this section, we jump to the crux of a Use Case we mentioned earlier – on selecting a Data Cell on the Crosstab, we will aim to generate a new Chart to show the selected KPI split by Product Category to the user. This is to simulate quick Ad-Hoc Analysis on an application.

1. Create a Global Variable of type VizFrame. We will name this variable ‘chart’.

2. Create another Global Variable of type DataSourceAlias. We will name this variable ‘ds’.

3. Create a new Panel Container (PANEL_1). We will use this Panel that we create to house a new Chart that we will generate at runtime. In our example, we’ve also used CSS to give this panel a white background. The panel’s default visibility is “false”.
 
4. Create an Icon component (ICON_1) within PANEL_1. This Icon component will be used to close the Panel after it is displayed to the user.

The Outline View should now look like this:

5. Select CROSSTAB_1 and navigate to its Properties. Set the property Selection Type to Single Data Cell.

6. Open the On Select property of CROSSTAB_1. We will now enter the following scripts one after the other:

i. Add the following script to create a new Chart component and place it within PANEL_1. We will also set the Layout properties of the Chart to ensure it fits correctly into the Panel:

chart = COMPONENTS.createComponent(ComponentType.com_sap_ip_bi_VizFrame);
PANEL_1.moveComponent(chart);
chart.setWidth(Layout.AUTO);
chart.setHeight(Layout.AUTO);
chart.setTopMargin(35);
chart.setLeftMargin(5);
chart.setRightMargin(5);
chart.setBottomMargin(5);

ii. Add the following script at the end of the previous script block to set the Chart type to a Bar Chart:

chart.setType(ChartDisplayType.BAR);

iii. Add the following script after the previously added script block to create a new data source (which we will later link to the chart we created in step 6. i.):

ds=COMPONENTS.createDataSource();

iv. Add the following script after the previously added script block to link the data source created in the previous step to a Query or InfoCube on the backend system (We are deriving the name of the query and the connection from the existing Data Source DS_1):

ds.assignDataSource(DS_1.getInfo().system, DataSourceType.INFOPROVIDER,
DS_1.getInfo().infoProviderTechnicalName);

v. The new data source ‘ds’ is initialized. It needs to be modified a bit for our requirement – to show the selected KPI aggregated by Product Category for the Region that was selected on the Crosstab. To do this, we need to move the dimension “Product Category” to the rows of the Data Source, and also set filters on the “Region” and “Key Figure” dimensions to only show the data for the selection made. Add the following script to the previously added script:

ds.moveDimensionToRows("ZR_PRDCK");
var x = CROSSTAB_1.getSelectedMember("0MEASURES0000000000000009");
var reg = CROSSTAB_1.getSelectedMember("ZR_STOKY__ZR_REGKY");
ds.setFilter(ds.getMeasuresDimension(), x);
ds.setFilter("ZR_STOKY__ZR_REGKY",reg);

vi. We have created the required Chart and the Data Source. All that remains is to link them together. Add the following script at the end of the previously added script to do this:

chart.setDataSource(ds);
PANEL_1.setVisible(true);

Components are created, and the properties are set during run time itself.

Deleting a previously created component

 The scripts written above will create a new chart component each time the user selects a data cell on the Crosstab. This will create overlapping Charts. To avoid this, we need to scripts to delete the created component once it has been used.

Insert the following scripts in the On Click event for ICON_1 to delete a component and close the Panel that was created each time the user clicks on the icon:

COMPONENTS.deleteComponent(ds);
COMPONENTS.deleteComponent(chart);
PANEL_1.setVisible(false);

The components which are created during the design time can also be deleted using this script, if the component ID is known.

Copying Properties

 Let’s add more to the scenario we’re working on – Let’s assume that we already have a chart in the application (CHART_1) with a specified set of properties (series colour, font, margin values, etc.). As part of our scenario, we want the chart we create to mirror the same properties of the chart already present. To do this, we just need to add a line of script to step 6.i., where we are creating a new Chart.

COMPONENTS.copyProperties(CHART_1, chart);
/*CHART_1 is source; chart is target*/

Once we’ve copied the properties from the existing Chart, we can still use appropriate APIs to override some of the properties such as the Chart Type or the Layout properties.

Can I save the component I created dynamically?

 If you have dynamically created a new component, it is not possible to save the created the component. You will not be able to bookmark the newly created component either. The components so created are purely for Ad-Hoc Analysis.

Summing up..

 Until SAP Lumira Designer 2.1, the only way that the scenario above could have been achieved on the tool was to use additional components and data sources and merely display them on click of the crosstab. This would in turn deteriorate the performance of the application by adding to the number of components and the data sources in the application. With the addition of the new technical component this can be avoided, limiting the creation of new components to only when necessary.

This component is more useful for developers aiming to implement Ad-Hoc capabilities to an application, than for end-users. With Result Set Iteration in place, this component will prove even more useful for developers. (keep watching this space for more along those lines). In conclusion, the “Components” Technical Component is a powerful new addition to SAP Lumira Designer and should serve as a boon for developers!

Got questions? Click here to get in touch.