Function: showUI()

function showUI<T>(ctx: Context, element: ContainerElement): Promise<{
  data: T;
  button: string;
}>;

Defined in: src/UI/index.tsx:126

Shows a dynamically generated UI.

Type Parameters

Type Parameter	Default type
T	any

Parameters

Parameter	Type	Description
ctx	Context	Context for rendering
element	ContainerElement	Container element: bubble, modal, shield, or splitView

Returns

Promise<{ data: T; button: string; }>

Object with form data and clicked button value

Remarks

Container Requirements:

• Root element must be bubble, modal, shield, or splitView
• Containers may include headerBar, group, navigationBar
• Wrap content elements in group

Resolution:

• Use buttonList with items that have resolve: true, or navigationBar with buttons
• Returns {data: {fieldName: value, ...}, button: "buttonValue"}
• IMPORTANT: Buttons in navigationBar must have a 'value' property to identify which was clicked

Example

const {data, button} = await showUI(ctx, bubble([
  headerBar({title: 'User Information'}),
  group([
    inputField({name: 'firstName', label: 'First name'}),
    currencyField({name: 'salary', label: 'Salary', currency: 'dollar'}),
    select({
      name: 'country',
      items: [{value: 'us', label: 'US'}, {value: 'de', label: 'DE'}]
    })
  ]),
  navigationBar({
    buttons: [
      {text: 'Cancel', value: 'cancel'},
      {text: 'Submit', value: 'submit'}
    ]
  })
]));
// data: {firstName: "Mark", salary: "5000", country: "us"}
// button: "submit" or "cancel"