Choice Timeline Widget

The Choice Timeline SA widget is used in task forms of the Task (task) table 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 status value. It displays only those statuses in which a record was.
   
3. Start date and time – displays the start time of the work on a task.

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

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 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 move the pointer over a segment, a window appears, showing 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 status are displayed. If the current status is the last segment, Now is displayed instead of the end time.

Set up the widget

The Choice Timeline SA widget can be added to the Task table and tables extended from it. By default, the widget is not displayed on the form.

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

Add a widget to a form layout

To add the widget on a form, complete the following steps:

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

   • Click the widget name to set the schema options in the Schema options values field. Enter widget options in JSON format.

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. If you leave the field empty, the default values will be applied.

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

   {
   
        "title": "Title"
   
   }

   It is recommended 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 some statuses not to display in the widget. Excluded statuses are displayed in gray. They occupy the minimum width and are not taken into account in the total time:
   

   {
   
        "excludedStates": "choice_option.value"
   
   }

   
   
   Widget option values example:

   JSON Example

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

   The following screenshot illustrates the configured widget:

   

5. You can set the minimal height of the widget in pixels. Notably, the minimal height cannot be less than the height of displayed elements.
   To set the minimal height, complete the following steps: 
   1. Navigate to a table record showing the widget.
   2. In the burger menu, select Configure → Form → Layout.
   3. In the Selected box, click the widget name to open the Widget instance window.
   4. In the Schema option values field, set the minimal height of the widget using the minHeight property as shown below.
      Schema option values

      {
          "minHeight": "600px",
          "title": "Task",
          "column": "state",
          "colorMap": [
              {"color": "#0086E5", "value":"1"},
              {"color": "red", "value":"-1"}
          ],
          "excludedStates": ["-2","7"]
      }

   5. Click Save to apply the changes.

Additional information

The widget is displayed only on the created records. The status 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.