Dynamic Components

Last week, we released SAP Lumira 2.1. It included some long wished-for features, such as support for scheduling. There was another Designer feature, that you might have overlooked, which could potentially change how you build your application; dynamic components. Dynamic components allows you to dynamically add data sources, components and even composites, at runtime, via scripting. Reiner Hille-Doering, Lumira Designer’s architect, just published a comprehensive blog post on the topic. This is a less deep companion introduction, to ease you into the feature..

Before you can add any dynamic components to your application, you’ll need a COMPONENTS technical component. To add one, right click on Technical components, in the outline pane and select Components.

To add your first dynamic component, use the script method createComponent().

The only mandatory parameter is the component type. The component type may be anything from the palette in the components pane, unluding and composites that may be available. In the code completion menu, composites follow the pattern ComponentType.LUM_<guid>_<CompositeName>

For example, to create a new Text component,

var newText = COMPONENTS.createComponent(ComponentType.Text);

If only the component type parameter is given, the new component is put into the root of the layout. If your app is very simple, this might not matter. If your app is more complex, you’ll want to exercise control over where your component lands. You can put the desired container alias in as the second parameter. E.g. to create a new Text component, inside an existing panel with the alias PANEL_1.

var newText = COMPONENTS.createComponent(ComponentType.Text, PANEL_1);

Of course, dynamically generated compnents have no properties, so you might have to define everything; e.g. by setting the text after adding the text field.

var newText = COMPONENTS.createComponent(ComponentType.Text, PANEL_1);
newText.setText("Hello World");

Being lazy with copyProperties()

Reiner has in depth examples of setting component properties after dynamically creating them. If you have an existing component which can act as a template however, you can also simply copy its properties in one go. Suppose you have a formatted header text field, TEXT_1, somewhere in your app, with the following CSS styling.

font-weight: bold;
font-style: italic;
font-size: 250%;

You can apply every property from in one go, with the copyProperties() and then fine tune the ones that you want to be unique.

COMPONENTS.copyProperties(TEXT_1, newText);

Dynamic Data Sources

The new COMPONENTS technical component also allows you to dynamically create data sources. E.g. I can create a new, undefined data source with the alias “DS_DYNAMIC”, with the createDataSource() methd.

var newDataSource = COMPONENTS.createDataSource("DS_DYNAMIC");

An undefined data source is not very interesting, so we’ll need to adding it the old fashioned way, using the assignDataSource(). In this case, we’ll assign the data source to info provider “YEPM_CP_058”, which was from the Teched 2017 hands on BW system, B4H.

newDataSource.assignDataSource("29", 
                               DataSourceType.INFOPROVIDER, 
                               "YEPM_CP_058"
                               );

If we then add a crosstab to PANEL_1 and attach it to the new data source, we can display the info provider in its default state in a crosstab.

var newCrosstab = COMPONENTS.createComponent(ComponentType.Crosstab, PANEL_1);
newCrosstab.setDataSource(newDataSource);

Hopefully, you’ll be able to experiment and discover ways to put this powerful new feature to work.