Introduction to Composites and Use Case as a Header

In many object-oriented languages or processes that we design, there is an option to produce or compose parts of reusable code and use it in many places. This allows us to eliminate duplication of logic that can be used in multiple places, also allowing any change to the logic to be done in one place and reflected everywhere it was used.

The concept of Composites was introduced in Lumira Designer 2.0. Composites are simply modular, reusable application blocks that may be plugged into other applications. When called by the user, this app, using composites, is dynamically assembled using the latest version of the composites in it.

Using composites wisely can reduce dashboard development time by modularizing the dashboard features and reusing these composites in many different places. Using composites also helps an organization standardize their dashboards by using pre-designed composites in them.

In this blog, we will walk you through the steps of creating a Header composite, which consists of the following:

  1. A company Logo in the left corner
  2. A formatted text box for Title
  3. A property option to pass on the Title text from an outer application into this composite.

Create Lumira Document

To create a Composite application as a first step, let’s create a Lumira Document and call it “EX_Composites,” which will host this Composite.

  1. Login to Lumira Designer
  2. Under the Documents section Right click and choose Create Document as shown below:

3. Now name that document “EX_Composites” as shown below:

Creating a Composite and Setting Up Logo and Text Box

Now that we have a document created, let’s go to the next step of creating a composite.

  1. Select the Document Name “EX_Composites,” right click and choose Create Composite as shown below:

2. Name it “KFHEADER”  as shown below:

3. Go to Properties and set Width to “1000” and Height to “60”.

4. Now drag and drop the Image component from Basic Components and choose a logo. In this case, we have selected the KingfisherLogo2017Circle.jpg image as shown below.

5. Now, choose the Width and Height of the image box as “200 X 48”.

6. Add a Text box next to the image and enter the Text as “[Title]”, Name as “HEADERTITLE.” In the Layout area of Properties, enter Height as “30”, Width as “650” and type the following code into the CSS Style box:

Setting up the Text properties

We now need a way to pass on the Title from the external applications to this composite KFHEADER we just created. We will do this by creating a Property variable. By doing this, we will be able to set up a custom property called “Title” which will be exposed in the external applications where this composite is being used. By changing the Text input in this Title Property, the external application can change the Title of the Composite. Let’s go through the steps to achieve this.

  1. Select the Formatted Text Component and browse to Outline section. Right-click on the Properties folder and choose “Create Property” as shown below:

2. Name the Property as Title as shown below:

3. Once created, select the Title under the Properties section in the Outline window and move over to the Properties tab to the top right corner and provide the following details: Title as Title, Description as Header Title and Default Value as [Title]:

4. Now, we need to bind this property to the Text component. To do this, select the Text box and delete the default text in Properties section and hit the + sign under the Binding column as shown below:

5. You will notice that under the Interface Property section, Title is already selected. In case of scenarios where you have multiple properties, you can always drop down and choose one among them as shown below:

6. Now Save this entire Document along with the Composite by hitting the Save button.

7. Drag and drop this Composite into your Application

8: Position it to the Top Right Corner as shown Below

9. Now, in the Properties tab, under the Display section, change the Title to a custom Title. In this example, change it to “This is Header Composite” and you will see that reflected in the Application:


To wrap it up, the example we have walked through above is the simplest use case of Composites. We can include many standardized Chart and other components and using Custom Properties and Function Variables, pass in the parameters as needed, thus simplifying the job for everyone and having to create the component once for use in many places.

If this blog didn’t quite answer your question or you have other Business Intelligence questions or concerns, please feel free to contact us.

increase your knowledge

See more Business Intelligence insights or get future articles sent right to your inbox

increase your knowledge

Read More about Lumira in these recent Blogs