Lumira 2.0 Designer Highlights – Composites (part 4 – Interface Properties)
Last time, we took a high level tour of Composite interfaces. Now we’ll look at interface properties. Remember that composites and the apps hosting them don’t share a common scope. Interface properties are properties that are visible in both the application scope and the composite scope. Interface properties are effectively global properties inside the scope of composite and visible outside it.
In this installment, we’ll take the example document, with its composite and app and expose the text of TEXT_1 to the app designer as a property.
Exposing Text_1’s text as a composite property
To add a new interface property, go to the outline pane and navigate to the Interface section, near the top of the outline tree. Right click on Properties and select Create Property.
We’ll name our new property headerText, so that the designer will find its meaning intuitive.
If you were to edit one of the scripts events inside the composite now, you would notice that the new interface property is available in the script editor’s value help.
In the properties pane of the new headerText interface property, set a default value, so that something is displayed, even if the designer has not set a value. This is mostly a designer usability aid, so that when the header label is bound to this property, she will see that it is present, even if she has not set it yet.
To bind TEXT_1 to the interface property, select it, navigate to the properties pane and on the Text property row, click the plus sign to set it to bound. For the type of binding, select “interface Property Binding”.
Choose the interface property. In this case, we only have one interface property, so the choice is easy.
Save the composite. The app will refresh. After it is done, select the composite in its outline (CB_COMPOSITE_1) and you will see in the properties pane that there is a property called headerText in the Display group. This is the interface property. You can edit its value here and the new value will be reflected within the composite’s instance in the app.
Hello David,
Thanks for this nice blog post.
The composite itself has an onPropertyChanged event one can use to react to changes of the properties - for example if you need to update a color based on whether the deviation of two property values is positive or negative.
And, another useful thing, in the binding you can supply a formatter function - eg. to control the number of decimals when displaying a KPI.
Oliver
Hello David,
Thanks for this nice blog post.
I followed every instruction from your blog. Text_1 as a composite property is not working for me.
My lumira desinger version is 2.1, that is the reason I did not import your sample application for reference.
Have you ever noticed error like this one while copying composite from one application to another?
Am I doing something wrong, something very basic may be.
After this error it copies the composite though. I dont know the impact so I am bit skeptical to use it.
Thank you in advance for any suggestion.
Regards,
Shalaja