Dashboard Customizations

In this guide, we will explore how to add JavaScript customizations to dashboards in RecordM. Similar to instance and listing customizations, dashboard customizations allow you to run special logic within a target dashboard.

Dashboard components are implemented in Vue2. Vue2 components have a lifecycle with hooks such as onMounted, onUpdated, and onBeforeDestroy. These hooks enable you to execute custom logic at different stages of a component's lifecycle. Our dashboard customizations are designed to let programmers run custom code at each part of the lifecycle.

Supported Hooks

We currently support the following hooks:

• onCreated
• onMounted
• onUpdated
• onBeforeDestroy

Getting Started

To set up a dashboard JavaScript customization, follow these steps:

1. Create a new file in /recordm/customUI/js/customizations.
2. Initialize your code (JavaScript) with the lifecycle hooks where you wish to run custom logic:

   const my_code = {
       onMounted: ({ dashContainer, dashContext, eventBus }) => {
           // Custom logic for onMounted
       },
   
       onUpdated: ({ dashContainer, dashContext, eventBus }) => {
           // Custom logic for onUpdated
       },
   
       // Other hooks...
   
       onBeforeDestroy: ({ dashContainer, dashContext, eventBus }) => {
           // Custom logic for onBeforeDestroy
       }
   };
   
   CoBDashCustomizations.registerDashCustomization("Dashboard Name", my_code);

3. Register your custom JavaScript file in /recordm/customUI/js/customizations2.js.

Lifecycle Hooks Parameters

Parameter	Description
dashContainer	Contains the dashboard DOM container.
dashContext	The Dashboard Vue component object. Access the dashboard component state, methods, and child components.
eventBus	An event bus. Listen for events fired by components and run logic accordingly.

Note: Since eventBus is a Vue event bus, you can add listeners to it like this:

eventBus.$on("Event Name", myEventHandlerFunction);

Existing Events

Component	Event	Description	Event Data
Image Viewer	imageviewer-ocr	Fired when OCR is run on this component.	details: { ocrText: The text decoded via OCR; cropData: The bounding box coordinates; confidence: Confidence of the extracted text value. }
Instance Viewer	field-focus	Fired when a field is focused (highlighted, clicked, etc.).	detail: { instancePresenter: The instance presenter; field: The field presenter for the focused field. }

All event data also includes:

• senderUID: The Vue component UUID of the sender.
• componentIdentifier: The component identifier (if specified at the dashboard level).