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.