In general, Flex Operations tools are broken into separate ElementDefinition JSON blocks (such as toolbar, body, separate tab definitions) and the containing UI definition. These are not all required; elements and sub-elements can be added as desired.

The definitions/elements folder contains a number of files indicating the structure for each of the different types of element that can be used in the layout configuration, that can be used as a reference. For each of the element types you can find examples in the standard product configuration files or example configuration tasks.

The definitions/types folder includes a number of JSON files that define various structures or choice lists referenced by the element definition files, for example:

This indicates that date can either be a Boolean true/false value or a more complex DateOptions structure. The definition of the DateOptions structure can be found in types/DateOptions.jsonc:

The ElementDefinition contains attributes common to all UI elements (although not necessarily applicable to all). For example, type, which indicates the type of UI element it represents - this is required for all elements.

For example in eventDetails.js, we define some fields as the header:

This first part indicates that we are starting a panel with standard Responsive layout (default: small:12, medium:12, large:12). The strings for the children elements will be found under the “fields” element in the associated NLS file, which in this case is
nls/client/tools/eventDetails.jsonc.

We then continue to add children:

This section defines a responsive sub-panel, but with a change to the default sizes. Responsive elements stack horizontally until the combined sizes are greater than 12, at which point the next element starts a new row. The small, medium, and large lines refer to the width of the tool itself. So when the tool is narrow (small), this panel will take all 12 of the horizontal slots, and the next panel will need to stack below it. When the tool is medium width, it can share a row with the next panel, and at a large width, 4 of these panels will share a row. This allows the tools to adapt dynamically to the browser width.

Now within that panel we define our true child elements:

The EVENT_IDX, PHASES, NUM_CALLS, and NUM_CUST_OUT are already defined in the standard product fields and referenced via their ID:

Similarly, for buttons, menu items, and so on, you can reference standard actions defined in this.actions, using the action attribute as shown below (action ADD_COMMENT in this example):