Skip to main content
Version: Next

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 “Spec & doc” 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

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)