How to change TabFocus on BPF Change

In the dynamic realm of Dataverse within the Microsoft Power Platform, you often encounter the challenge of dealing with tables that are brimming with attributes and columns. While this complexity is a common facet of your IT engineering and database management journey, simplifying the user interface becomes paramount for a seamless user experience.

To address this specific issue, you’ll find that leveraging multiple tabs is a valuable strategy. This approach not only organizes the information but also significantly enhances the user experience. In this article, we’ll delve into the art of streamlining user interfaces using multi-tab solutions within the Dataverse, a key component of the Microsoft Power Platform.

In some cases your table is used in an Business Process Flow (BPF) and you want to split the inputs, due to the amount of user input into different Stages. Now if the user have to go step by step, it would be a shame that he eventually need to manually swap tabs for data input.

Scripting Dance: Code, Chance, Advance!

Client scripting is your helpful hand here, a pivotal piece for achieving your objectives. Within this journey, there’s a vital concept to grasp.

Moving between BPF stages triggers a form reload.

In our toolkit, we employ client-side scripting through two essential functions. Keeping it straightforward for now, let’s introduce them and dive into the details later.

But remember, always prioritize understanding when dealing with code from the vast realm of the internet. Trust should be earned through comprehension, not given blindly.

First code provided for the OnLoad Event of the Form:

this.formOnLoad = function(executionContext){
        var formContext = executionContext.getFormContext();

        formContext.data.process.addOnStageChange(this.myBpfStageChangeFunction);
    }

And the actual Code for setting the Focus:

this.myBpfStageChangeFunction = function(executionContext){
        var formContext = executionContext.getFormContext();

        var stageName = executionContext.getEventArgs().getStage().getName();

        var tab="";
        switch (stageName){
            case "Tab 1":
                tab = "_tab_1";
            break;
            case "Tab 2":
                tab = "_tab_2";
            break; 
            default:
                tab = "_default_tab"
            
        }

        formContext.ui.tabs.get(tab).setFocus();
    }

So after throwing code in the ring. Let me start explaining

formOnLoad

This is the callable function for the OnLoad Event of the Form.

The „formContext.data.process.addOnStageChange(this.myBpfStageChangeFunction)“ adds an event handler to the Stagechange for the Business Process Flow. When the event is triggert, the Function myBpfStageChangeFunction is called.

myBpfStageChangeFunction

In this function, we first obtain the formContext and the name of the active stage. We then use a switch statement to determine the current stage and assign the unique identifier of the corresponding tab to the variable ‘tab’ that we’ve defined.

Finally, we set the focus to the tab determined by the switch statement.

Summarize

This code simply sets the Focus on the Tab you want. Be careful an use this only if it is necessary.