Skip to Content
Author's profile photo David Stocker

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.

Assigned tags

      11 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Nithyanandam Venu
      Nithyanandam Venu

      Good one 🙂

      Author's profile photo Mike Howles
      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.

      Author's profile photo David Stocker
      David Stocker
      Blog 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

      Author's profile photo Carl Maib
      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!

       

       

      Author's profile photo David Stocker
      David Stocker
      Blog Post Author

      Does this help?  https://help.sap.com/viewer/375f536c27e245ed86526277de1fdeef/2.1.0.0/en-US/7b389f4f8a7247848d1c7743c3f53bb3.html

      Author's profile photo Pieter-Jan Vaernewijck
      Pieter-Jan Vaernewijck

      Thanks for the excellent explanation.

      Is it possible to use assignDataSource() with offline datasources imported from discovery?

       

       

      Author's profile photo David Stocker
      David Stocker
      Blog Post Author

      Yes, it is possible!

      Author's profile photo Krishna Boga
      Krishna Boga

      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. 

      Author's profile photo Former Member
      Former Member

      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. 

      Author's profile photo sepide sin
      sepide sin

      Hello David,

       

      Thanks for your post,

      Do you have any idea how can I implement this in Design studio?

      This is the link of my question , I would be appreciate if you can tale a look at this.

      https://answers.sap.com/questions/749988/create-dynamic-buttons-in-sap-design-studio.html

      We are in Design Studio and we can not go to Lumira right now

       

      Thanks

      Sepide

      Author's profile photo Siddharth Saxena Latest
      Siddharth Saxena Latest

      I am a web developer and i want to learn SAP. Can you please tell me where to start learning?