Skip to Content
Author's profile photo Sushma Prabhakar

SAP Lumira 2.0 – Designer – Composites

SAP Lumira Designer – Composites

In this blog, I would like to introduce and explain about Composites which is newly introduced in Lumira 2.0 .

Composites can be considered as an “app within an app”. Composites are components, which are similar to SDK components, but composites can be created by an application designer itself.

Composites are available for usage only in the SAP Lumira Documents mode (A new preferred Start mode). A document can contain several composites. But a composite cannot be part of another composite.

A composites are  reusable. Create a composite as part of one document and reuse in another document via referencing.


After launching the Lumira designer in the Lumira Documents Mode, in the Documents view (In case if it not found in your layout, go to View à Select Documents) there are 2 folders:

BI Platform Documents and Local documents

Step 1: Creation Of Composites

Under Local Documents create an application


Specify a name for the document   E.g.: COMPOSITES_DOC

Now within the application create a composite, E.g.: LOGO



Step 2 : Composites- Interface Properties

Interface properties allow the users of your composite to configure their instances. These properties will be displayed in the Property sheet for a selected composite instance in an application

In the outline view, under Interface à Properties,

Right click and Create Property

In the property View fill the entries as shown


 After which all the 5 properties are created –


Step 3: Binding of Composite Interface properties:

Add the shape component to the layout and assign a shape to this component from the additional properties

Now we can bind the interface properties created in the composite to the properties of the SHAPE component.

Go to the properties view of the SHAPE component, click on binding icon of the Line Color property

Expand Source, where Type = Interface Property Binding   , all the Interface properties created are now available for binding .

Select the interface property Line Color.

Similarly do the same for all other Shape component properties.

Step 4: Embedding a composite in an application

Create an application, say COMP_APP inside the lumira document COMPOSITES_DOC

Include the composite LOGO inside the application. Save and execute the application locally .

The Shape component’s properties are set based on the values that we have defined in the interface properties.

Change values inside any of the interface property definition, and re-execute the application. It should be reflected in the Shape component.

In this way, we can control the values assigned to any of the property of the component via the interface properties.


Step 5: Creation of Events in the composite

It should also be possible to define events inside a composite.



The event which we have created now, would appear in the events section of the composite inside the app.(Go to the appà Layout àLOGO_1

In the On Click event of the Shape, write the following script


Similarly create another event, say My_OnChange

Now add a switch component inside the composite and in the On Change Event of the switch, add the following script



Step 6: Usage of Interface events of the composites

Composite events allow the application designer to react to defined actions of this composite. This is the same as as an event for standard components like the On Click event of the Button component, for example. These events are exposed as an event property in the Property view of an instance of this composite.

In the Application , now add 2 Text components .

In the My_OnClick add the following script

TEXT_1.setText(“The Logo is Microscope. It is an optical instrument used for viewing very small objects”);

and in My_OnChange Event  add the script

TEXT_2.setText(“My OnChange Event has been Triggered”);

Now save the Composite and Application and execute it at runtime.

Now click on the Shape component  , it triggers the My_OnClick event , which sets the text for TEXT_1 Component .

Similarly change the state of the switch component, which triggers the My_OnChange  event , which sets the Text_2.


Step 7: Usage of Interface functions of the composites

Interface functions define the script functions of your composite.

In the composite’s outline view àFunction à Create Function My_Function,

Script the following for the

if ((SWITCH_1.isVisible() == true) ) {


} else {



Now in order to trigger the function My_Function , create a button, say Appear/Disappear in the application and in the On_Click event of this button , call the function


Save and execute the application, click on the newly created button Appear/Disappear.

If the switch component inside the composite is visible, on clicking the button it becomes invisible and vice versa.


Step 8: Global Variables and Functions

Under the composite create a global Variable as shown

Now add a Check box to the Composite.

Create a global scripts Technical component and then a global script Change_Size

And add the following script to it

if (CHECKBOX_1.isChecked() == true)  {

Text= ‘New Microscope’;

Size = alter + Size;


Now add a checkbox component to the composite and in the On click event of it call the global script GLOBAL_SCRIPTS_1.Change_Size();

Now execute the application and on checking the check box, the line size of the Shape component changes, and the tool tip changes from microscope to new microscope.


Step 9: Properties of composite

There are some properties of Composite such as Title,Created by , width , height


By default the above created composite  is available under Composites

If you like to assign a custom group for your composite it can be done via

Display à Component Group à Specify a name , say Mygroup

Now the composite is available under Mygroup


I hope this blog helps in better understanding of composites and its usage.


Thanks, Sushma

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Pierrick HORPIN
      Pierrick HORPIN

      Thank you Sushma for this blog.

      I have one question, do you know if it is possible to share a Composite between applications embedded in 2 different Lumira documents ?



      Author's profile photo Former Member
      Former Member


      yes, you can share/use Composites across several different documents.

      Best regards

      Author's profile photo Ramesh Jothimani
      Ramesh Jothimani


      Does this event in Composite will be helpful to trigger an Function Module or PC in BW level or composite is completely used for sharing between multiple Lumira reports?


      Ramesh J

      Author's profile photo Mario Panzenboeck
      Mario Panzenboeck

      Thanks for this blog!

      Is it possible to use the events to navigate in an application when a user clicks on an icon, which is embedded in an composite provider?! How to do this?

      I´m not able to use global variables between application and composite.

      I know the other way - pass variables from application to composites (e.g. values for kpi tiles) but not the other way round...



      Author's profile photo Rafat Nadaf
      Rafat Nadaf


      Thank you for the blog.

      Can we not publish the dashboard to BI launchpad which uses composite?

      I am getting error when I try to publish the local copy to BI launchpad.

      Please help.




      Author's profile photo Shailaja Naik
      Shailaja Naik


      thank you for the blog.

      When I use composite from another application (copied it from another application - comment dialogue) and Upload to BI Platform it prompts error -

      "The document uses composits from the following document


      Only selft contained documents can be uploaded".


      Please help.