Fluent Pivot menu PCF Control for form

For a project within the company I work for, we were looking for a way to display detailed quote line information on the Quote form for fields that don’t fit in the quote lines grid.

In the end, it seemed to me that the best solution was to place a quote line item form on the quote form. I populate a “Helper” field with the currently selected quote line item via JavaScript. This way, a user can easily update quote lines in a user-friendly way.

To keep the form organized, I would prefer to use tabs. A tabbed section doesn’t offer a solution because you can only use icons and not text there. Therefore, I decided to develop a custom PCF control for the Fluent UI Pivot menu myself.

The above example is inspired by how Dynamics F&O handles rule information.

PCF-FluentPivot

The PCF Control can be downloaded via my GitHub:

https://github.com/arjanterheegde/PCF-FluentPivot

I added the PCF control to the quote detail form and linked it to a “Helper” field named Selected Tab. In this field, the PCF control will keep track of the currently selected tab.

You can use the following JSON to pass the tabs:

[{"name":"Algemeen","alias":"tab1","isDefault": true},{"name":"Adres","alias":"tab2"},{"name":"Productrelaties","alias":"tab3"}]

Make sure to place the PCF control on every tab.

Set an On Change event on the field. You can use the JavaScript code below, which ensures that the tab is actually switched:

function switchTab(executionContext) {
    var formContext = executionContext.getFormContext();

    if (formContext.getAttribute('ath_helper_selectedtab')) {

        console.log(formContext.getAttribute('ath_helper_selectedtab').getValue());

        // Never save the value!
        formContext.getAttribute("ath_helper_selectedtab").setSubmitMode("never");

        var selectedTab = formContext.getAttribute('ath_helper_selectedtab').getValue();

        var tabObj = formContext.ui.tabs.get(selectedTab);

        if (tabObj) {
            tabObj.setFocus();
        } else {
            console.error("Tab '" + selectedTab + "' doesn't exist.");
        }
    } 
}

The above code ensures that the form tab is actually switched when a tab is selected in the PCF control. We set the submit mode of the field to “Never” so that the value is never saved.

As a closing word, I want to acknowledge that there are certainly several other ways to improve this solution, but I found this to be the best approach to stay within the standard framework of Dynamics.