- SAP Managed Tags:
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
6 Comments
