UI Designer Embedded widgets

If the row has some space at the end, the widget will fill the remaining empty space in the row. If the row has no empty space, the dropped component will be automatically resized to fit a row width.

According your needs, a container can have any number of rows.

To add a widget in a new row, a container has two dropzones where you can drop a widget from the palette. These dropzones are located at the top of the container and at the bottom of the container. When your mouse hovers the upper or lower border of a widget in a row, the dropzone becomes visible, as shown in these examples:

Example 1: add a title widget in a new row above a paragraph widget:

Example 2: add a paragraph widget in a new row below a title widget:

When you drop a widget in one of these two zones, a new row is automatically created.

A container can repeat the content dynamically. This is useful if you need to repeat a set of components for each element in a data collection. Bind the Repeat content property to an array variable. To specify the current element of the collection, use $item.
This is useful if you want to display some property of the current element.

You can save any container as a fragment (from the properties panel header, widget actions menu). This enables you to reuse the set of widgets in other pages.

Use the tab container to structure a page using tabs.

Tabs can be display vertically or horizontally. By default, tabs is stacked above the content. If you want to display tabs in the left of the content, you can follow this tutorial.

Type property allows you to customize the tabs style ('tabs' or 'pills').

Each tab is a container widget. To edit a tab name, select the corresponding tab to display its properties.

The tab’s properties allows you to customize default display and behaviour of tabs based on data and/or JS expressions. For example you can hide or disable tab with a dynamic expression.

Tab title can be calculated dynamically to display and render html.

Use the form container to enable form validation for input widgets. The form container also exposes a local $form which is the AngularJS form object associated to the form container. In the Bonita Studio, if you define a contract for the task or process and click on the UI Designer icon, the generated form already contains a form container to embed default input widgets to collect the information that need to be passed to the contract to be verified. You can then define the validation you need on the input.
For example, you can bind the button’s disabled property to $form.$invalid to prevent user from clicking the button, until the form inputs are valid.

Use the modal container to create a pop-in window. This modal container can be opened with a button by choosing Open modal in the button’s "Actions" property. Choose a name for the Modal ID property so you can define what modal container the button will display. This ID must be unique for a given page. Any button located inside a modal container can close the modal on success, during any action, when choosing Close modal in the Action property. The Size of the modal container can be changed by selecting small, medium or large in the drop-down menu. There is also an option to remove the animation when the modal container appears. Doing so will make the modal container appear instantly, without a fade-in effect. This is useful if multiple successive windows need to be shown.

You can add a little padding between the modal container content and its borders by typing modal-body in the CSS classes property. For a more structured content, you can add different plain containers inside the modal container, and specify any of the following CSS classes for each container, depending on its location in the modal:

A modal container cannot be located in another container. We recommend dropping all modal containers at the bottom of the whiteboard, for clarity. To embed a pop-in into another pop-in at runtime, drop the first modal container at the bottom, drop the second modal container below the first one, and drop the button that opens the second pop-in within the first modal container.

Use the input widget on a form or page. There are four types of input:

Use the text area input widgets on a form or page to collect large text.
The rich text area allows the user to format and style their input, add images, links, and so on.
You can customize the toolbar for the end-users by selecting options among the available values of the toolbar properties.

Use an autocomplete widget to offer the user a list of possible values based on data entered in the field. For example, in a firstName field, if the user types chri, the values chris, christine, christian, christiane are proposed. The user selects the correct value. To define the available values, bind a data source to initialize the suggestions. For suggestions that are an array of objects, you can specify a displayed key to identify the attribute to show as a suggestion in the widget. The value must be bound to a variable that will hold the selected suggestion.

Use a select widget to offer the user a drop-down list of values. The user selects the required value.
The available values property is used to populate the list of available values. Alternatively for simple data, you can provide a comma-separated list of values (for example, red, green, blue).
You can also use data binding and specify a variable to populate the list of available values. In this case, specify a label key, which identifies the attribute to be displayed in the widget.

Use a checkbox widget to create a unique checkbox. The value property will be true or false, depending on the checked value of the checkbox.

Use a checklist widget to create a set of checkboxes for the available values, from which the users picks any number of values. To define the available values, you can provide a comma-separated list for simple values (for example: red, green, blue), or bind to a variable that holds an array of values.
If the values are JavaScript objects, you can also specify a displayed key that identifies the attribute to be used to label the checkboxes and a returned key so selected value will return only a specific key rather that the whole corresponding object.

The selected values are captured through the Selected values property.

Use a radio button widget to create a set of radio buttons for the available values, from which the user picks one value.
To define the available values, you can provide a comma-separated list for simple values (for example: red, green, blue), or bind to a variable that holds an array of values.
If the values are JavaScript objects, you can also specify a displayed key that identifies the attribute to be used to label the radio buttons and a returned key so selected value will return only a specific key rather that the whole corresponding object.

The selected value should be bound to a variable that will hold the data for the chosen radio button.

Use a Date picker widget to display a calendar from which the user can select a date or set a date manually (e.g., a date of birth).
To select a date and a time (e.g., to schedule a meeting), use the Date time picker widget instead.

The Date picker widget supports the following types for its Value property as input:

You can configure the displayed date format using a pattern, using yyyy for year, MM for Month, dd for day.
Use the Today button to select automatically and quickly the current day.

For more information about supported formats, read the Angular documentation for date filter.

For a detailed example using the Date picker widget, you can consult the following Howto: Manage dates and times in BDM and User Interfaces.

The calendar can be localized with the usual localization mechanism (localization.json file).

Use a Date time picker widget to display a calendar from which the user can select a date and a time or set them manually (e.g., to schedule a meeting).
To select only a date (e.g., a date of birth), use the Date picker widget instead.

Date and time can reflect the user time zone (e.g., a meeting day and time) or be absolute, identical everywhere (e.g., opening hours of a store somewhere). This is controlled by the property Handle time zone.
The input/output of the widget (its Value) is an ISO 8601 formatted String variable (e.g., "2016-12-31T16:30:00.000Z").

You can configure the displayed date format using a pattern, using yyyy for year, MM for Month, dd for day, HH or h for hours, mm for minutes, ss for seconds.
Use the Today and Now buttons to select automatically and quickly the current day and time.

For more information about supported formats, read the Angular documentation for date filter.

For a detailed example using the Date time picker widget, you can consult the following Howto: Manage dates and times in BDM and User Interfaces.

The calendar can be localized with the usual localization mechanism (localization.json file).

Use an upload widget to perform a file upload (POST) on the specified URL. Data returned by the server is stored in the value property.

Use a button widget to enable to user to trigger an action. The button can perform a PUT, POST, GET (from 7.1.3), or DELETE (from 7.1.3) request and send data to a given URL.
You can use a variable to hold the resulting data after success or failure.

For pages that are displayed in a task or process context, the button widget can be used to submit a form, completing the human task or starting a process instance. For form submission, you need to define only the data to send. The URL is extracted from the context. When using the Submit task action, you can choose to automatically assign the task to the current user. It will assign and execute the task in a single action.

Another possible use of the widget button is to add or remove a data from a given collection.

Finally, you can use a button to open a modal container (pop up window) on the page, as long as the modal ID is specified into the appropriate field. Another action for the button widget is to close the modal that contains it. Every action, except for the Close modal, can close the modal when it succeeds. Setting the Close modal on success property to yes is enough for this to happen.

When inside a form container, the button is automatically disabled while the form is invalid.

Use the Save button widget to store data in the browser LocalStorage. For instance, to let users save the draft of the current form, bind the formInput variable of your form to the value property. A single entry will be created in the LocalStorage identified by the form URL.

Whenever this form is reloaded, either by hitting F5 or browsing away and back again, the entry will be reloaded automatically from LocalStorage.

Use a table widget to display data in a table. In order to display the data, first define the headers property with a comma-separated list of column headings.
Then bind the content to an array of JavaScript objects.
Finally, provide a comma-separated list for the columns keys indicating the attribute to display in each column.

To get the data from a selected row, bind selected row to a variable.

With 7.10 update, you can now display html in header or data content when Interpret HTML property is set to true. HTML sanitization is called before rendering to keep only safe HTML.

An extended table widget that provides column sorting, filtering, and paging in addition to the standard table widget facilities.

Set the Data source to Bonita API to populate the data table with records from a Bonita REST API.
Then enter a REST API URL in the URL property. Use the API request parameters property to pass additional parameters to the request.
Supported parameters are described in the REST API Overview and in the REST API documentation for the relevant resource.
You do not need to specify paging parameters (such as ?p=0&c=10), because the data table handles paging automatically when you use a Bonita API data source.
The value of the Page size property controls how many rows are displayed in a table view, and automatically adds buttons to show subsequent pages of the table.

Alternatively, you can set the Data source to Variable and use a variable definition to point ot the table content.
Note that if you use a Variable datasource and an External API variable, the paging of the table content is not handled automatically.

Use an image widget to display an image. The image widget is able to display images from local assets or an image from a URL:

Note: Applies from 7.0.2

Use the chart widget to create a graphical display of data to ease understanding. This widget is based on angular-chart-0.8.1, which is based on Chart.js.
For information, see the Angular chart documentation or Chart.js documentation.

The widget can display several styles of chart:

Provide each set of data for display in a JSON array, containing numerical values.
You can enter a single array directly in the Value property, or bind it to any variable that provides an array.
For a multiple set chart, bind it to any variable that provides an array of arrays, all sets having have the same length.
The list of values in the Labels property must be have same length as an associated set.

Charts can be customized more deeply using the Advanced options property. To specify advanced options, bind this property to a JSON variable that specifies the options.
Options are specific to each chart type and are listed in the Chart.js documentation in the Chart options section for each chart style (for example, there are spacing options for bar charts).