Lumira 2.0 Designer Highlights – Composites (part 6 – Interface Events)

We’ve taken a high-level tour of Composite interfaces, implemented an interface property and an interface function. Now we’ll look at interface events. Suppose we wanted to enhance our example composite so that an event in the host app was triggered whenever the user toggled the chart type. We will add a chartToggle event to the composite to do this.

The Plan

1. When the user clicks whichever chart is currently displayed in the composite, the chart click event is triggered. (this is already implemented)
2. We edit this script to fire the chartToggle event.
3. The chartToggle in the app is fired
4. Whatever script the app designer added to the chartToggle event is triggered. In our example, all we’ll do is issue a popup alert, with the text “Chart Toggle Event fired”.

The Implementation

With the composite open in the Lumira Designer editor, go to the Outline pane. In the Interface section, right click on Events and select Add Event. Name the event chartToggle. This will be the name of the event when we reference it via script to fire it later.

With the new event selected, go to the properties pane. Give it the title “Chart Toggle” and a description. “Chart Toggle” will be the name of the event that the app designer will see in the properties pane later.

Edit the On Select event script of SPREADSHEET_1. Add the following line of script:

COMPOSITE.fireEvent(“chartToggle”);

Do the same for the CHART_1 On Select event.

Save the composite. After the app has refreshed to reflect the changes, go to is and select the composite. In the properties pane, you will see the Chart Toggle event.

Double click on the Chart Toggle event to edit its script. Write the following line of code into the event:

APPLICATION.alert(“Chart Toggle Event fired”);

Save the app and test it. When you toggle between the chart and spreadsheet, you should now get an application popup.

That’s it. You now know your way around composite and can make full use of them.