Using Composites and Adaptive Layout in Lumira Designer, Part 2

In Part 1 of this blog series, we went over the basics of the Adaptive Layout Component, how it’s used, and why it’s valuable to use in your applications.

In this blog, we are going to go over the basics of Composites and show a simple, yet powerful, example that demonstrates how Composites can save time and money when building your dashboards.

Basics of a Composite

If you’re not familiar with what a composite is, think of it as a re-usable set of components. Many times in a dashboard you want to analyze each KPI the same way, but have a large number of KPIs that you want to analyze.

In our example in this blog, we will show a simple Composite that represents a KPI Tile that shows Sales with a year over year comparison. The reason a Composite comes in handy for this is because KPI Tiles can be quite repetitive. For example, if your company had ten Product Lines and you want each Product Line to have its own KPI Tile, you can build the composite for the KPI Tile once and then re-use the Composite 10 times for each Product Line instead of having to build each KPI Tile ten times.

You can also reuse the same composite in multiple dashboards, providing consistence and saving huge amounts of development time.

When building a Composite, there are three different Interface Components you can use: Properties, Events, and Functions.

Properties are fairly straightforward and can be bound to certain objects, such as a title text box so that the text value of that text box can be defined in the Application instead of in the Composite. So, using our ten Product Line example, you would be able to define a different Title for each Composite for the different Product Lines.

Events are used so that you can pass an On Click Event for a certain object in the Composite to the Application, and then write the specific code for that On Click Event in the Application instead of in the Composite. This way, each Product Line Tile could have its own On Click Event depending on which tile is selected.

Functions are very powerful and allow you to pass Input Parameters from the Composite to the Application so that you can define the values for the Composite in the Application. There are a large number of options for Input Parameters, ranging from String to Float to Boolean. Or, you can even use something such as DataSourceAlias, which allows you to pass in the Data Source in the Application. You can also write code that is static every time, such as setting an icon red, which doesn’t need an Input Parameter, inside of a Function and then call that Function in your Application.

Example of how to build a Composite

Now that we have gone over the Basics of a Composite, I’m going to dive into an example to show you exactly how to build one.

The first step is to create a Composite. When you’re inside of your main Application, right click on your Application Name in the Documents section and select Create Composite. Then, enter a meaningful Name for the Composite and click Create.

Once you’re in your new Composite, you’ll need to build whatever it is you want in the Composite, just like you would have in the Application itself. In this example, we’ll be building our Sales KPI Tile.

In this example, as you can see in the screenshots below, we’ve added a Panel with a Grid inside of it and a title at the top. On the left side of the Grid, we have a Text box showing this is for Sales $ This Year and another Text box below that for the actual sales value. On the right side of the Grid, we have a Text box showing this is for the variance compared to last year, another Text box below that for the last year variance percentage, and an up icon that is green.

Now that we have the Layout created for our KPI Tile, we’ll need to add a Property and some Functions so that we can assign certain values in the Application itself later on when we actually have our Data Sources.

We’ll start by adding a Property so that we can assign the name of the Title in the application.

Right-click Properties and select Create Property.

Add a meaningful name for your Property (in our case it’s title_property), set a Description stating that this Property is to set the Text for the title, so that you know what it is for in the Application, and set a default value such as Title.

Next, we’re going to bind the text value of the Title Text Box to the Interface Property you just created.

Click on the Title Text box in your Layout, look in the Properties Window and click the Bind + Sign for Display – Text.

Next, make sure that you have the Type set to Interface Property Binding and the Interface Property set to the Property you just created, in our case Title_Property.

The next step is to add some Functions.

First, right-click Functions and click Create Function.  Then, give it an appropriate Name and Description.

Double click on your newly created Function to edit the Script. For our example, the first Function we’re creating is to assign the TY Sales Value to the Text Box. As you can see in the screenshot below, you’ll need to create an Input Parameter of Type String.

Next, for the Script you’ll enter what’s shown in the screenshot below, which represents SALES_VALUE as the Text Box and setText, which sets the text value of the Text Box and param (you can name this whatever you want) as our input parameter.

For our second Function it is very similar to the first Function except this time it is for the LY Variance Percentage. You’ll enter what’s shown in the screenshot below which represents VARIANCE_VALUE as the Text Box and setText, which sets the text value of the Text Box and param as our Input Parameter.

For our last Function, since we have the green up arrow as our default for our Icon, we’ll need a Function for the cases where we want the Icon to be a red down arrow for a negative variance.

In this Function, we don’t need an Input Parameter since this is static but we will need to set the color of our Icon named VARIANCE_ICON to red and change the type of Icon to a down arrow as shown in the Script below:

Wrapping it up

This concludes our second blog, walks you through the Basics of Composites and gave a simple example of how to create a Composite for a Sales KPI Tile using Properties and Functions.

Be on the lookout for our final blog in the series, where we’ll show how to bring what we’ve learned in the first two blogs together to connect our Composite to data in an Application and use the composite multiple times in an Adaptive Layout Component for various Product Lines.

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

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

increase your knowledge
increase your knowledge

Read More about Lumira in these recent Blogs

By |2018-09-02T17:39:34+00:00August 10th, 2018|Kingfisher, Lumira, Lumira Designer, New features|0 Comments

About the Author:

Andrew has more than 7 years of experience and specializes in the EIM field, with a solid background in front end as well. He has strong experience with SAP HANA, Data Services, Information Design Tool, Lumira, Crystal Reports and Web Intelligence. He has worked in a number of industries such as Retail, Energy, Manufacturing, and Healthcare with direct experience working with two Fortune 100 companies. Andrew enjoys playing and watching sports, being outdoors, and traveling in his free time. When he’s not busy pulling for the Atlanta Sports teams you can reach him at