Containers¶

Container widgets improve design consistency and implementation efficiency.

Use them to modularize repeated UI structures and compose pages.

Widget Types¶

Form¶

Form is a structured widget for embedding and managing child pages inside a parent layout.

• How to use

  Step	Description and Tip
  1. Place widget	Drag and drop the Form widget into the desired layout position.
  2. Set ID	Set a unique layout ID in Property so scripts can reference this Form.
  3. Create child page	Create a page to display inside the Form area and design it.
  4. Call from script	In parent script, call formId.loadForm("page/path") to load the child page.
  5. Run and test	For first sync, run child page first, then run parent page.

• Notes

  • FormContainer acts as the parent container.
  • Parent pages can directly recognize only immediate child pages.
  • Use $rootForm.postMessage(key, value) to send data to the top-level parent regardless of hierarchy.
  • On first execution, run in this order: child page -> parent page.

Component¶

Component creates reusable UI blocks (including actions) that can be inserted across pages.

• How to use

  Step	Description and Tip
  1. Place component	Drag the Component widget from the Content area to your page.
  2. Set name	In the property panel, set Component -> id (for example test.component).

• Notes

  • If you override a property in a specific instance, later changes in the base component for that property will not apply to that instance.
  • Changes in a single instance do not modify the base component.