> For the complete documentation index, see [llms.txt](https://docs.gridmate.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gridmate.io/product-tour/smart-grids-in-utility-bar.md).

# Utility Bar Grid

**GM - FieldSet Grid**, **GM - ListView Grid** and **GM - RelatedList Grid** can be embedded as a utility bar item. Below is a quick demo on how to configure an Open Task utility bar using **GM - FieldSet Grid**.

{% embed url="<https://youtu.be/yc2u0FQUcgE>" %}
Gridmate - Utility Bar Grid Setup
{% endembed %}

In our example, we configured the utility bar item properties (Label, Icon, Width and Height)

![](/files/oGnlVPfCDU6ewpz78WWz)

We configured the **GM - FieldSet Grid** properties same as configuring it on the Lightning App Builder. We added a custom field Marker on the Task object to highlight the task based on the priority.&#x20;

The column style is set to make the marker field short. The tasks are filtered to see only open one and sorted by due date. We configured an autolaunched flow action to mark tasks as completed.

```coffeescript
[
   {
      "name": "markcomplete",
      "label": "Mark as Complete",
      "icon": "utility:check",
      "component": "gmpkg:DataGridCallFlowComponent",
      "attributes": {
         "flowName": "Complete_Task",
         "idListParam": "idList",
         "autolaunched": true
      }
   }
]
```

Finally we set the coloring configuration based the priority.

```coffeescript
{
   "Marker__c": [
      {
         "color": "#F08D8D",
         "exp": {
            "Priority": {
               "operator": "in",
               "value": [
                  "High"
               ]
            }
         }
      },
      {
         "color": "#FF9C25",
         "exp": {
            "Priority": {
               "operator": "in",
               "value": [
                  "Normal"
               ]
            }
         }
      },
      {
         "color": "#B0FD9F",
         "exp": {
            "Priority": {
               "operator": "in",
               "value": [
                  "Low"
               ]
            }
         }
      }
   ]
}
```

{% hint style="success" %}
We recommend using the Config. Wizard to configure the utility bar.
{% endhint %}

Below is a quick demo of the final version of our utility bar where the user can smoothly see his open tasks and mark them as completed with few clicks!

{% embed url="<https://youtu.be/r_lwMRaK0Jc>" %}
GM - Utility Bar Grid Demo
{% endembed %}