Skip to Content

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.



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);

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

You must be Logged on to comment or reply to a post.
  • Hey Dave,

    Great new feature!  In case you have an answer faster here, I asked Reiner in his post this question:


    Basically: Is it possible to set Event Handler logic/pass a function reference to a dynamically created component?  For example, we create a new Button in script, is it possible to set an 'On Click' handler?  .copyProperties didn't seem to do the trick either, as a possible workaround.

    • Hi Mike,


      Not directly and it would be a security hole to allow dynamically created event handlers at runtime, as would would create a possible entry point for malicious code injection.  The workaround would be to put all the button event handlers into a single script, already attached to a template button, from which the script would be copied with the other properties.  Then use a variable to decide which one to actually execute.




  • David,

    You mention enhanced scheduling in this blog entry, which is something I'm trying to learn more about for a current project. Where can I find out more details on enhanced scheduling within Lumira 2.1? It does not seem the documentation is available yet...




      • Hi David,


        I tried to implement the dynamic components and assigned a data source. But when i click on cross tab to show this new cross tab component, it is pulling all the metrics associated to the data source.

        How can we show only the required metric in the new cross tab component?

        I am using only metric in the assigned data source. but still all the metrics are shown up in the dynamic component of the cross tab.

        Here i selected on male data to show the detail breakdown based on RACE. 

  • The component is to write might be anything from the palette in the segments sheet, including and composites that might be accessible. In the code consummation menu, composites take after the example ComponentType. 

  • Thanks for your post, if you find anyone need assignment help can look to the below link.

    <a href="http://">assignment writing service</a>

  • MyAssignmentHelpNow provides assignment help sydney service to the students of Australia...We are well known and most demanding writing service provider over there. If you are looking for best writing service provider over there, then we are the one-stop-shop for you.