Custom reusable Visual Components can be created in a project.
Custom Visual Components can be edited the same way as a screen (using UI Editor).
The custom UI Components is then available in UI Editor Marketplace when editing Screens or other custom Visual Components.
Custom Visual Components sometimes need custom Properties (in the example below, the header has custom string property to set its title)
The property can be added in “Context Editor” tab while editing the custom Visual Component.
The custom UI Property can then be used in functions inside the Visual Component.
Exercice 4 - Reusable Header
The goal of this exercise is to create a reusable header where the title and the text of a button can be customized.
- Go back to Project “Notes”
- Open folder “UI”
- Add a new Visual Component named “Header”
- Open the new Visual Component
- In Context Editor, create 2 String properties: “Title text” and “Left button text”
- Back to Visual Editor, set Visual Component background color to black
- Create a label named ”Title”
- X = Center, Y = middle
- Text Horizontal Alignment = Center
- Text color = white
- Text = display Header’s “Title text” property using a function
- Create a button named “Left button”
- Theme class = “”outline”
- X = 10, Y = middle
- Text = display Header’s “Left button text” property using a function
- Go back to Project ”Notes” => “Notes App” and open screen “New note”
- Add a new “Header” in the screen
- X = Center, Y = Top
- Width = 100%, Height = 90
- Title text = “New note”
- Left button text = “Back”