> 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 GridMate can be used from a utility bar in two ways: * **Utility Bar Grid**: add a GridMate grid as an item of the standard utility bar of a **Lightning app**. * **Utility Bar Component**: add **GM - Utility Bar** to an **Experience Cloud site**, where the standard utility bar is not available. ## 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="" %} Gridmate - Utility Bar Grid Setup {% endembed %} ### Utility Item Properties In our example, we configured the utility bar item properties (Label, Icon, Width and Height). ![](https://4046919449-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEsSbGy_U_OhthKUpxu%2Fuploads%2FuqXY8UitZBt5QEoUSgI7%2FScreenshot%202021-12-12%20at%2018.57.08.png?alt=media\&token=62f1290c-bfdc-4d42-aacf-8c47638d4aff) ### Grid Configuration We configured the **GM - FieldSet Grid** properties the same way as on the Lightning App Builder. We added a custom field **Marker** on the Task object to highlight the task based on the priority. The column style is set to make the marker field short. The tasks are filtered to show only open ones and sorted by due date. We configured an autolaunched flow action to mark tasks as completed. ```json [ { "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 on the priority. ```json { "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 Wiz** to configure the utility bar grid. {% endhint %} ### Utility Bar Grid Demo Below is a quick demo of the final version of our utility bar where users can see their open tasks and mark them as completed in a few clicks! {% embed url="" %} GM - Utility Bar Grid Demo {% endembed %} ## Utility Bar Component **GM - Utility Bar** brings the utility bar to **Experience Cloud sites**. The standard Salesforce utility bar can't be exposed in Experience Cloud, and this component closes that gap. The bar is docked at the bottom of the page with one button per item; clicking a button opens the item in a flyout panel. You control who sees the utility bar using visibility criteria in Experience Builder. ### Choose a Version The component comes in two versions. Pick the one that matches your org.
VersionUse when
GM - Utility Bar (LWC)Lightning Web Security (LWS) is enabled and all utility items are LWC components.
GM - Utility Bar (Aura)LWS is not enabled in the org, or one of the utility items is an Aura component.
### Add the Component to Your Site 1. Click the gear icon and select **Setup**. 2. In the Quick Find box, search for **All Sites** and select it. 3. Next to your site, click **Builder** to open Experience Builder. 4. In the Components panel, search for **GM - Utility Bar (LWC)** or **GM - Utility Bar (Aura)**, depending on your org. 5. Drag and drop the component onto the page. 6. In the **Utility Bar JSON Config** property, paste your configuration. See [Utility Bar JSON Config](#utility-bar-json-config) below. ### Utility Bar JSON Config The **Utility Bar JSON Config** is a JSON array of utility items. Each item supports the following keys:
KeyDescription
nameUnique name of the item.
labelLabel of the item button.
iconNameIcon of the item button. All lightning icons are supported.
componentThe component to display, as namespace/componentName.
attributesJSON object of the component properties.
widthPanel width, in px or any CSS unit. The default value is 400px.
heightPanel height, in px or any CSS unit. The default value is 450px.
startAutomaticallySet to true to create the component at page load instead of the first time the item is opened.
{% hint style="info" %} An item without **label** and **iconName** is headless: no button is displayed. Combined with **startAutomatically**, it is useful to run a background component like the Interaction Monitor. {% endhint %} {% hint style="info" %} With **GM - Utility Bar (LWC)**, the GridMate monitors are referenced as `c/bulkActionMonitorLWC`, `c/dataImportMonitorLWC` and `c/interactionMonitorLWC`. Any other component is loaded dynamically from the **component** value. {% endhint %} All the keys are described in [GM - Utility Bar](/package-reference/components-library/gm-utility-bar.md). ### Example Below is the configuration used in this demo. It defines four utility items: * `InteractionLogger` runs in the background: its label is an invisible character, it has no icon, and its panel is `0px` wide and high. * `dataImportMonitor` and `bulkActionMonitor` open the GridMate monitors. Both start automatically, so they track the jobs started before their panel is opened. * `diagnosticTesterSlot` opens a custom LWC component and passes it its properties through **attributes**. {% code expandable="true" %} ```json [ { "name": "InteractionLogger", "label": "‎ ", "iconName": "", "component": "gmpkg/interactionMonitorLWC", "startAutomatically": true, "width": "0px", "height": "0px", "attributes": {} }, { "name": "dataImportMonitor", "label": "GM - Import Monitor", "iconName": "utility:upload", "component": "gmpkg/dataImportMonitorLWC", "startAutomatically": true, "width": "400px", "height": "400px", "attributes": {} }, { "name": "bulkActionMonitor", "label": "GM - Bulk Action Monitor", "iconName": "utility:multi_select_checkbox", "component": "gmpkg/bulkActionMonitorLWC", "startAutomatically": true, "width": "400px", "height": "400px", "attributes": { "cleanupDelay": 60 } }, { "name": "diagnosticTesterSlot", "label": "LWC Dynamic Test Slot", "iconName": "utility:bug", "component": "c/dummyUtilityTesterLWC", "startAutomatically": false, "width": "400px", "height": "400px", "attributes": { "title": "Custom Org Dashboard", "itemLimit": 12, "showAlertBanner": true, "bannerMessage": "Success! The parameters bypass mechanism is fully operational." } } ] ``` {% endcode %} ### Utility Bar Demo Below is a step-by-step guide on how to configure and use **GM - Utility Bar** in Experience Cloud. {% embed url="" %}