• Introduction
• Importing the behavior
• Testing the behavior on a worklist
• Understanding how the behavior works
• References

Introduction

By default, dates in worklists throughout Cerb are shown in a relative format. This means that you see something like 5 mins ago (relative to the current time) instead of an absolute date like Sunday, November 24 2024 5:30pm America.

You can hover over relative dates to see the absolute date in your local timezone. In some environments it’s desirable to always see absolute dates in the worklist instead.

In this example we’ll build a simple bot behavior to change how ticket worklists display the created and updated dates. This approach allows worklists to change depending on what is being displayed or who is viewing it.

Importing the behavior

From Search » Bots, create a new bot or choose an existing one. The bot should be able to create new behaviors on the [UI] While displaying a worklist event.

Open the bot’s card and click on the Behaviors button.

Click the (+) icon above the worklist to add a new behavior.

Select the Import option and paste the following behavior:

{
  "behavior": {
    "title": "Change worklist dates from relative to absolute",
    "is_disabled": false,
    "is_private": false,
    "priority": 50,
    "event": {
      "key": "event.ui.worklist.render.worker",
      "label": "[UI] While displaying a worklist"
    },
    "nodes": [
      {
        "type": "switch",
        "title": "Is it a ticket worklist?",
        "status": "live",
        "nodes": [
          {
            "type": "outcome",
            "title": "Yes",
            "status": "live",
            "params": {
              "groups": [
                {
                  "any": 0,
                  "conditions": [
                    {
                      "condition": "context",
                      "oper": "in",
                      "values": [
                        "cerberusweb.contexts.ticket"
                      ]
                    }
                  ]
                }
              ]
            },
            "nodes": [
              {
                "type": "action",
                "title": "Change relative dates to absolute using jQuery",
                "status": "live",
                "params": {
                  "actions": [
                    {
                      "action": "exec_jquery",
                      "jquery_script": "var view_id = '{{view_id}}';\r\nvar $view = $('#view' + view_id);\r\nvar $worklist = $view.find('TABLE.worklist');\r\nvar $worklist_rows = $view.find('TABLE.worklistBody');\r\n\r\n$worklist_rows\r\n  .find('td[data-column=t_created_date], td[data-column=t_updated_date]')\r\n  .find('abbr')\r\n  .each(function() {\r\n  var $abbr = $(this);\r\n\r\n  \/\/ Swap the absolute and relative dates in the abbr tag\r\n  var abs = $abbr.attr('title');\r\n  var rel = $abbr.text();\r\n  $abbr.attr('title', rel).text(abs);\r\n  })\r\n;\r\n"
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

Click the Save Changes button.

Testing the behavior on a worklist

Navigate to any ticket worklist. For instance, Search » Tickets.

You should now see absolute dates, with relative dates in the tooltip:

You’ll also see an indication on the worklist that it was modified by a bot behavior:

Understanding how the behavior works

The behavior’s decision tree is pretty simple to follow:

First, a decision checks whether the current worklist is showing tickets. If the outcome is Yes, then we run one action.

That action executes a jQuery¹ script in the current worker’s browser:

var view_id = '{{view_id}}';
var $view = $('#view' + view_id);
var $worklist = $view.find('TABLE.worklist');
var $worklist_rows = $view.find('TABLE.worklistBody');

$worklist_rows
  .find('td[data-column=t_created_date], td[data-column=t_updated_date]')
  .find('abbr')
  .each(function() {
    var $abbr = $(this);
    
    // Swap the absolute and relative dates in the abbr tag
    var abs = $abbr.attr('title');
    var rel = $abbr.text();
    $abbr.attr('title', rel).text(abs);
  })
;

Lines 1-4 sets variables with references to certain elements in the DOM².

Line 6 uses the $worklist_rows variable to access the rows of the worklist table.

Lines 7-8 finds column cells for specific fields (t_created_date and t_updated_date) and then locates the <abbr> element within them.

Line 9 loops through each of the located abbreviation elements.

Line 10 creates an $abbr variable to reference the current abbreviation element.

Lines 13-15 swaps the title attribute (tooltip) of the abbreviation element with its displayed text content.

That’s it! jQuery makes it really easy to find and modify elements on a web page from a bot.

References