Skip to main content
Version: 2.7

User Interface - Custom Visual Components


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). custom_component_edit

The custom UI Components is then available in UI Editor Marketplace when editing Screens or other custom Visual Components.


Custom Properties

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 “Spec & doc” tab while editing the custom Visual Component.


The custom UI Property can then be used in functions inside the Visual Component. custom_component_prop_use

Exercise 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. exercise_4_reusable_header

  1. Go back to Project “Notes”

  2. Open folder “UI”

  3. Add a new Visual Component named “Header” from the Marketplace

  4. Open the new Visual Component

  5. In Spec & Doc Editor, create 2 String properties: “Title text” and “Left button text”

  6. Back to Visual Editor, go to the 3rd tab and set the Background Color property to black

  7. Create a label named ”Title” by drag & dropping a "Label" brick from the Marketplace and set:

  8. Create a button named “Left button” and set:

  9. Go back to Project ”Notes” => “Notes App” and open screen “New note”.

  10. Add a new “Header” brick from the Marketplace in the screen and set:

    • 1st tab: Title text = “New note”
    • 1st tab: Left button text = “Back”
    • 2nd tab: X = Center, Y = Top
    • 2nd tab: Width = 100%, Height = 90 pixels (selected from the drop-down arrow)