UI Composer Reference

The UI Composer can be accessed by going to the Lucy app and then clicking on the gear icon and selecting Build a user interface from the menu. Alternatively, you can search for an existing UI Bundle by clicking on View all interfaces and click it to open it up in.

The UI Composer is where you design and build your custom user interfaces for Lucy.

images/uicomposer-annotated.png

The UI Composer consists of the following parts:

  1. Bundle Explorer
  2. DataSource Explorer
  3. Design Area
  4. Datasource Designer
  5. Toolbox
  6. Property Panel

Bundle Explorer

The bundle explorer shows you all your UI Bundles. You can click the plus icon to add a new screen to the bundle. You can expand each item to see its sub components and ui elements. Clicking on any of them will select that widget or screen and show its properties in the property panel.

See Types of User Interfaces for information on the types of screens you can create.

DataSource Explorer

The data source explorer shows you all the datasources that are accessible in this bundle. This includes:

  1. Data sources defined in the datasource designer.
  2. Any actions in a linked model
  3. Any custom data sources that have been made available in the system.

Custom Data Sources are published by iviva applications and can be added to the bundle. Click the Include a custom data source link to select a custom data source and add it. Custom data sources are useful to provide access to data that cannot otherwise be extracted using the datasource designer or model actions.

You can expand each data source to see its fields. The fields can be dragged into the design surface to bind them to ui elements.

See Binding Data for more information on how to bind datasource fields to ui elements.

Note

Some datasources that represent model actions may not show any fields when expanding the source. You can still bind data to the fields using iviva Expression syntax but interactive binding by drag and drop of those sources may not be possible. See Manually binding data for information on how to do this.

Design Area

This is the center area where you can see your user interface screens, edit them, place ui elements in them and edit their properties.

To add ui elements to container, drag the widget from the toolbox into the design area onto the place where you want to add it. Depending on the type of screen the ui element is added to, it may get added at the bottom of a list of elements, or may get added somewhere in the middle. You can always drag them element around to re-arrange it.

All screens are shown in one giant layout, one below each other. Click on a screen in the bundle explorer to navigate straight to that screen.

UI Elements can be selected by clicking on them. You can move them around by dragging them and you can resize them by dragging any of the corner handles.

The property panel shows details about the selected ui element.

You can select multiple ui elements by holding Shift and clicking on items.

Note

The property panel only shows items for the first selected ui element

Tip

You can also Shift+Click on items in the bundle explorer to select them.

Datasource Designer

The second tab in the UI Composer is where you design custom data sources. See Working with Data Sources for a complete overview on how data sources work.

Toolbox

The toolbox contains a list of all available ui elements. To add a ui element to a screen, drag that item from the toolbox into the design area.

For a full list of available ui elements, see wigetreference

Property Panel

The property panel shows details about the currently selected object. This could be a ui element or it could be an entire screen itself (you can select the screen by clicking it in the bundle explorer). From here, you an edit the various properties of the item. Properties are divided into tabs with different properties being shown in different tabs.

The four common tas are:

  • uic-general - General properties like the element id and tag
  • uic-spacing - The spacing panel where dimension and position properties are set. See Positioning and Placement of ui elements for a completely boring but nevertheless thorough walk-through of how positioning works.
  • uic-appearance - Properties related to the appearance of the ui element. Includes text display properties.
  • uic-actions - The actions editor for ui elements that support invoking actions. See User Interface Actions for more information about invoking actions in UI screens.

From the property panel, you can also copy and paste selected ui elements.

Click the trash icon to delete the selected widget.