Choice Timeline Widget

The Choice Timeline widget is used in task forms of the Task (task) and its child tables. It shows when and for how long a particular task was in different states, determined by options of a specific choice column.

Widget appearance 

The widget consists of the following elements:

1. Title. 
2. Legend – maps a specific color and state value. It displays only those states in which a record was.
   
3. Start date and time – displays when the work on a task began.

4. Total time spent in all states – displays the total time spent in all non-excluded states.

5. End date and time – displays the time when the work on a task was completed. The task should be in inactive mode (Active = false).

The order of segments corresponds to the order in which the state values changed. Also, the width of the segment corresponds to the time spent in a certain state relative to the total time.

When you hover over a segment, a window is displayed with the name of the state and the time spent in this state. If the time is less than 1 minute, <1m is displayed.

Below, the start and end times of this state are displayed. If the current state is the last segment, Now is displayed instead of the end time.

Set up the widget

The Timeline widget can be added to the Task table and tables extended from it. By default, it is displayed on the Request, Problem, Change Request, and Incident forms.

To display data on the time spent in different states, you need to add the widget to a form layout and configure option schema.

Add a widget to a form layout

To add the widget on forms, complete the following steps:

1. Navigate to any table record you need to add the widget.
2. In the hamburger menu, select Configure → Form → Layout.
3. Move the Timeline widget from the Available box to the Selected box.

   • You can configure the option schema to override default widget settings. Learn how to do it below.

4. Click Save to apply the changes.

Configure the options schema

Use the Widget Instance window to specify the widget options. Click the widget while configuring the layout to call this window.

In the window, fill in the Schema Option Values field. Enter the widget options in JSON format. To use the default values, leave the field empty.

1. Change the default title of the widget by defining the new one: 

   {
   
        "title": "Title"
   
   }

   It is better to use a title created in the Source Message (source_message) table, so that it has translations. 

2. Define a column of the Choice type:

   {
   
        "column": "column_name"
   
   }

3. If you need to use a color that is not included in the list of default colors for a particular choice option, specify it in the following way:
   

   {
   
        "colorMap": [
                   {"color": "#123456", "value": "choice_option.value"
   
   }

4. Exclude a state from displaying it in the widget. The excluded states appear in gray, occupy the minimum width, and they are not taken into account in the total time:

   {
   
        "excludedStates": "choice_option.value"
   
   }

{
    "title": "Task",
    "column": "state",
    "colorMap": [
        { "color": "#000000", "value": "1" },
        { "color": "red", "value": "-1" }
    ],
    "excludedStates": ["-2", "7"]
}

Additional information

The widget will be displayed only on the created records. The state change data is taken from the History (sys_history) table, the state data and state translations are taken from the Choice Options (sys_choice) table.