Single-Component Tabs in Model Driven Forms

Can you believe the featured image is a form? A model-driven form with a PCF on it, and nothing else?

Lately I’ve saw in the docs an excelent article on best practices for model-driven forms: “Design forms for efficiency“. Right to the end, there is a part about letting a control expand to the whole space available. This possibility seems to be in the sdk since a few months already, but I didn’t knew about it yet. So I’ve tried it out.

How it behaves?

The sdk tab.setContentType accepts two modes:

• cardSections: That’s the default for a model-driven form
• singleComponent: Maximizes the content of the first component in the tab.

So, if needed, we could use it on every tab. It will show only the first control, and all the others will be hidden.

Actually you can get pretty close to a “singleComponent” form, by customizing a single column tab, with a single column section, with a single control on it. The difference is on some borders that you cannot hide otherwise.

Setting the tab.setContentType(“singleComponent”) will also automatically hide the label of the component and also the section name.

cardSections vs singleComponent

Form Scripting on this forms

This are still normal forms, and could have form scripting on it. Could I go further, and try to take control on this, by changing which component should be shown as “singleComponent”? I mean, on a same tab, using some javascript, switch the controls shown?

The answer is “No”. Only the first control will be shown. In case I hide the first control, the tab will be empty. It won’t go to the next visible control.

The only interaction I can imagine, is switching back to “cardSections” mode, as soon as some data was introduced. In that case the PCF/component should be able to have a minimized mode.

Where can this be useful?

This feature seems to be designed for PCFs (1st or 3rd party) which needs a lot of place on the form/tab. Combined with the new introduced features to hide the header/footer, it gives full control how the form should look like. Finally it can only show a PCF and nothing else.

formComponent.ui.tabs.get(0).setContentType("singleComponent");

formComponent.ui.footerSection.setVisible(false);

formComponent.ui.headerSection.setTabNavigatorVisible(false);
formComponent.ui.headerSection.setCommandBarVisible(false);
formComponent.ui.headerSection.setBodyVisible(false);

Of course not all header/footer elements needs to be hidden. They can be useful.

But this feature can be used on forms shown as dialogs. The following dialog is made by hiding the header and footer, using

Xrm.Navigation.navigateTo({
    pageType: "entityrecord", 
    entityName: "orb_dialog", 
    entityId: "<entityId>", 
    formId:"<formId>"   
}, {
    target: 2, 
    width: 450, height: 520,
    position: 1
}).then(console.log, console.error)

The dialogs can be shown on the side, made using

Xrm.Navigation.navigateTo({
    pageType: "entityrecord", 
    entityName: "orb_dialog", 
    entityId: "<entityId>", 
    formId:"<formId>"   
}, {
    target: 2, 
    width: 450, 
    position: 2
}).then(console.log, console.error)

Unfortunately it doesn’t help to transform the forms in dialogs , as described in my older blog. It would help to remove the unwanted section/tab borders, but then we cannot customize the dialog with other controls. This feature doesn’t allow to combine more customizing elements.

Required fields

As mentioned before, when we show the tab as a “singleComponent”, the label of the control is automatically hidden (together with the section label). But in case the field is required, the label is not hidden. I quess that’s because it should show that the field is needed. But the label will also be hidden if the field is disabled. It doesn’t feel very consistent here. Maybe this is a bug and will change in the future.

Conclusion

Together with the header/footer hiding features, the singleComponent feature could come handy to get a clean form to fill it with a PCF.