The Constructor component enables you to dynamically create and remove instances of UI components. This component includes the following preset actions:
  • constructor: Inserts a new instance of the connected component into the app.
  • destroyAllInstances: Destroys all active instances of the connected component.
  • onConstructed: Event that triggers when an instance is constructed.
Note: To create dynamic UIs in Uiflow, the Collection component is recommended over the Constructor component. The Constructor component should be reserved for special use cases that require in-depth control.

Construct a component instance

This quick walkthrough outlines how to use the Constructor component to create a Text component instance each time a button is clicked:
  1. 1.
    In the Design view, drag-and-drop a Constructor component into the preview panel.
  2. 2.
    Drag-and-drop a Text component into the Constructor. By placing the Text component in the Constructor, it becomes the Constructor's child.
  3. 3.
    (Optional) Select the Text component and open the quick selection State menu, to change the text label.
  4. 4.
    Drag-and-drop a Button component beneath the Constructor.
  5. 5.
    (Optional) Double-click the Button's text, to change the text label.
  6. 6.
    Click Logic to enter the Logic view, and open the Libraries panel.
  7. 7.
    From the Design References Section, drag-and-drop the following references into the logic flow:
    • Button
    • Constructor
  8. 8.
    Connect the Button's onClick node to the Constructor's constructor node. This calls the Constructor to construct an instance of its children when the button is clicked.
  9. 9.
    Test your application in the Preview panel. Each time you click the button, a new text component instance should appear.