Updating Tab Labels with the Client API

[Devvj]

Sometimes you run in to scenarios where the out-of-the-box configuration simply is not sufficient to fill your or your customers' needs. One cool tool at your disposal for achieving this customization is the Client API, which allows you to manipulate the UI and data within your Model-Driven Apps using Javascript.

For example, there might be a wish to show the number of child records in a certain subgrid directly on the tab. Like the "My Cases"-tab in the picture below.

Let's got through the steps to achive this quite simple trick.

1️⃣ - We need to set up the form the way we want it, I added a new Tab and added a Subgrid to it, in this specific example I used the Case-table and set the view to the following.

2️⃣ - I set the default tab label to "My Cases (0)" and the internal name to "tab_cases" (this is needed for the JS-script later)

3️⃣ - Now we need to write the script to update the label on the tab, to do this we can use the Client API (ref. Client API Reference for model-driven apps - Power Apps | Microsoft Learn). 

function getMyCaseCount(executionContext) {
   // Get Form Context
   var formContext = executionContext.getFormContext(); 
   // Get the Entity ID
   var entityId = formContext.data.entity.getId();
   // Run a Web API query to retrive the all Cases in which your the owner of on the current Account
   Xrm.WebApi.retrieveMultipleRecords("incident", "?$select=incidentid&$filter=(Microsoft.Dynamics.CRM.EqualUserId(PropertyName='ownerid') and _accountid_value eq "+ entityId +")").then(
      function success(results) {
         // update the tab label with result count
         var tabObj = formContext.ui.tabs.get("tab_cases");
         tabObj.setLabel("My Cases (" + results.entities.length + ")");
      },
      function (error) {
         console.log(error.message);
      }
   );
}

Let's break down the function to explain what is happening.

var formContext = executionContext.getFormContext(); 

We save the Form Context in a variable for easier use further down.

var entityId = formContext.data.entity.getId();

We save the internal GUID for the current record in another variable.

 Xrm.WebApi.retrieveMultipleRecords("incident", "?$select=incidentid&$filter=(Microsoft.Dynamics.CRM.EqualUserId(PropertyName='ownerid') and _accountid_value eq "+ entityId +")").then(
      function success(results) {
         // update the tab label with result count
         var tabObj = formContext.ui.tabs.get("tab_cases");
         tabObj.setLabel("My Cases (" + results.entities.length + ")");
      },
      function (error) {
         console.log(error.message);
      }
   );

This is the big part, simply put it runs a WebAPI query to get all the related cases, in which you are the owner. 
If the call is succesful we update the tab label with the record count we got back from the query.

4️⃣ - Back in the PowerApps Form Editor, enter the "Form Libraries"-tab through the ribbon and add your JS-script file containing the code.

5️⃣ - On your main form you now should be able to add a new Event handler, choose the Events tab on the right side and push the "+Event Handler"-button under the "On Load"-header

6️⃣ - Choose the JS library you uploaded previously and name the function you want to trigger on the event (in this example it is named "getMyCaseCount"), be sure to check the "Pass execution context as first parameter"-checkbox before saving

🏁- You're done!

In this example the tab now shows the count of Cases that i'm an owner of, on a particular Account, but really you can apply whichever conditional logic you want, such as status icons using emoji's (✔️,❌) based on any given filter.

I hope this short article gave you some ideas on scenarios where this could fit in your solution!