Skip to main content

User Interface - Custom Visual Components

Introduction#

Custom reusable Visual Components can be created in a project. custom_component

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_component_marketplace

Custom Properties#

Custom Visual Components sometimes need custom Properties (in the example below, the header has custom string property to set its title) custom_component_prop_view

The property can be added in “Context Editor” tab while editing the custom Visual Component. custom_component_prop_create

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

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

  1. Go back to Project “Notes”
  2. Open folder “UI”
  3. Add a new Visual Component named “Header”
  4. Open the new Visual Component
  5. In Context Editor, create 2 String properties: “Title text” and “Left button text”
  6. Back to Visual Editor, set Visual Component background color to black
  7. Create a label named ”Title”
  8. Create a button named “Left button”
  9. Go back to Project ”Notes” => “Notes App” and open screen “New note”
  10. Add a new “Header” in the screen
    • X = Center, Y = Top
    • Width = 100%, Height = 90
    • Title text = “New note”
    • Left button text = “Back”