Skip to Content

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.

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

  1. Mike Howles

    Hey Dave,

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

    (https://blogs.sap.com/2017/12/18/dynamic-apps-in-lumira-2.1-the-component-api/#comment-403633)

    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.

    (0) 
    1. David Stocker Post author

      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.

       

      Cheers,

      Dave

      (0) 
  2. Carl Maib

    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…

    Thanks!

     

     

    (0) 

Leave a Reply