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
- When the user clicks whichever chart is currently displayed in the composite, the chart click event is triggered. (this is already implemented)
- We edit this script to fire the chartToggle event.
- The chartToggle in the app is fired
- 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.
Hi David,
great Blog, bring in all together for the Composites.
i tried now the Composites from different use cases.
i was not able to make a Composite where the Chart should consider the conditional formatting of the datasource.
i tried using a property in the Composite to activate/deactivate the conditional formatting for the Chart, but seems not to work.
do you have any idea?
thanks
best regards
Younes
Hi All,
Good post, just to extend a bit and hopefully save some time for whoever reads it, in essence: don't try to use "this", use "me" instead.
Elaborating a bit: in case you have multiple instances of the same composite in your application, you may want to identify it somehow in case of an onClick event. You may think that this.getName() or a custom this.getCompositeID() would be good for the job, but it is not working.
Unfortunately even the built in script helper will offer to you "this", with your custom Composite functions, but it doesn't work for me. (verson 22.0.2)
It throws an error like: TypeError: Cannot find default value for object. (MATERIAL_LINE_1.__materialLineOnClick__()#5),
Instead of this.getName() use me.getName(). That works perfectly.
Hope that helps someone! 🙂
Regards,
Marton
Hi David,
Is there a way to define an event handler function from script?
Elaborating it a bit. The use case:
Regards,
Marton
Hi, How can I re-use composite in other applications?
When I copy comment dialog from sample to my application, it works when I excecute locally. But I cannot upload it to BI platform. It gives me error -
The document uses composites from the following document
.sampletolearn
Only self contained documents can be uploaded.
I am new to SAP and Lumira designer. Can someone help what I am missing here
Thank you very much!
Shailaja