Skip to Content
Author's profile photo David Stocker

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:


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.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Younes Hasba
      Younes Hasba


      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?


      best regards


      Author's profile photo Marton Horvath
      Marton Horvath

      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! 🙂




      Author's profile photo Marton Horvath
      Marton Horvath

      Hi David,

      Is there a way to define an event handler function from script?

      Elaborating it a bit. The use case:

      • I have a composite to be displayed N times, created from script.  (COMPONENTS.createComponent(...)
      • I would like to define an action in the main appliaction (drill down) when a button on the composite is clicked. I have defined an event: onClick() - that is fine.
      • I can define the onClick event handler in case the composite is created in design time, non-programmaticcaly... but don't find any way to define it from script. For example: .setEventHandlerFunction([event], [function])





      Author's profile photo Shailaja Naik
      Shailaja Naik

      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


      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!