🚀 Enhance Your Model-Driven Apps with Deep Linking to Specific Form Tabs

Have you ever wished to effortlessly open a model-driven app’s form with a specific tab in focus, all with just a simple URL? Well, you’re in luck! In this blog, we’ll explore how to achieve this using a little JavaScript magic, and the best part is, the API client does most of the heavy lifting for us. 🪄📊

Situation🤦⁉️

Imagine you’re working with the Account table and the standard Account form in your model-driven app. Your objective is to navigate to a particular tab by simply passing its name as a parameter in the URL.

For instance, you want to open an account form with a keen focus on the “DETAILS_TAB” – and here’s how it’s done:

URL Magic 🪄🔗

Your URL will look something like this:

https://org912ba5ed.crm8.dynamics.com/main.aspx?appid=43681a19-bf65-ee11-9ae7-000d3af2b3b9&pagetype=entityrecord&etn=account&id=b4cea450-cb0c-ea11-a813-000d3a1b1223

How It All Works 🛠️

The secret sauce behind this functionality involves creating a parameter for your form and adding some JavaScript logic to handle tab navigation dynamically.

1 Form Parameter Setup

• Click on “Form Properties“
• Navigate to the “Parameters” tab
• Add your parameter (e.g., “tab_name”)
• Save & Publish the form

JavaScript Wizardry

Create a JavaScript web resource and implement the logic using the OnLoad function:

// Create or use a custom global namespace to avoid conflicts in the Code 
var customNamespace = window.customNamespace || {};

// Create or use a custom object to hold form-related functions and properties
var customAccountForm = customNamespace.customAccountForm || {};

(function () {
    this.OnLoad = function (onLoadContext) {
        // Get the form context for the current entity record
        var currentFormContext = onLoadContext.getFormContext();

        // Get the query string parameters from the global context
        var queryStringParameters = Xrm.Utility.getGlobalContext().getQueryStringParameters();

        // Check if the 'tab_name' parameter is present in the query string
        var tabName = queryStringParameters["tab_name"];

        // If the 'tab_name' parameter is defined in the query string
        if (tabName !== undefined) {
            // Get a reference to the tab with the specified name and set focus to it
            var targetTab = currentFormContext.ui.tabs.get(tabName);
            targetTab.setFocus();
        }
    };
}).call(customAccountForm);

That’s it! Your form will now dynamically focus on the tab specified in the URL parameter.

Crafting the URL 🚀🔗

To construct your deep-link URL:

1. Navigate to an account record and copy the URL:🔗 Account Record URL https://org912ba5ed.crm8.dynamics.com/main.aspx?appid=43681a19-bf65-ee11-9ae7-000d3af2b3b9&pagetype=entityrecord&etn=account&id=b4cea450-cb0c-ea11-a813-000d3a1b1223
2. Add the extraqs parameter with your tab’s name (e.g., “DETAILS_TAB”):🔗 Deep Link with “DETAILS_TAB” Focus
   https://org912ba5ed.crm8.dynamics.com/main.aspx?appid=43681a19-bf65-ee11-9ae7-000d3af2b3b9&pagetype=entityrecord&etn=account&id=b4cea450-cb0c-ea11-a813-000d3a1b1223&extraqs=tab_name=DETAILS_TAB

The name of the tab is usually easily found in the designer, making it a breeze to customize your deep links. In our case, it’s “DETAILS_TAB.”

With this nifty trick, you can streamline navigation and make your model-driven apps even more user-friendly. 🌐🎯

Give it a try and see how it can simplify your user experience! Happy deep linking! 🚀🔗✨

If you found this code snippet helpful, we invite you to subscribe to our YouTube channel for more interesting updates and tutorials related to Dynamics 365 and other tech topics. Stay tuned and happy coding! 🎥🔔