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

COMPOSITE.fireEvent(“My_onClick”);

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

COMPOSITE.fireEvent(“My_OnChange”);

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

SWITCH_1.setVisible(false);

} else {

SWITCH_1.setVisible(true);

}

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

LOGO_1.My_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