When working with Dynamics 365 model-driven apps, we often think of forms in a traditional way - tabs holding sections, and sections holding fields. Recently, I stumbled upon a hidden gem that many of us might have overlooked: Tabbed Sections. At first, I didn’t even know this feature existed. After digging into it (thanks to Kailash Ramachandran for his detailed blog), I realized how powerful and underutilized this feature really is.
In this article, let's explore:
- What are Tabbed Sections?
- How to configure Tabbed Sections?
- Why to use Tabbed Sections?
What is Tabbed Sections?
Here’s how a model-driven app form is structured:
- Form → Contains one or multiple tabs
- Tab → Contains one or multiple sections
- Section → Contains one or multiple components
How to configure Tabbed Sections?
You can add up to five different types of components in a tabbed section:
- External Website
- HTML Web Resource
- Knowledge Search
- Quick View
- Subgrid
Steps to configure the form:
- Open the entity and edit the form where you want to add a tabbed section.
- In the Form Editor, switch to the Components tab on the left pane.
- Under Layouts, select Tabbed Section and drag it to your form.
- Click and add it to the form wherever you want to
- Once added, configure its label and formatting from the right-side pane.
- Under Section Tabs, click + Add Another Tab.
- Choose the component type you want for each tab and configure its properties.
- Save and publish the form.
External Website :
- + Add a tab → choose External Website.
- Provide the Site URL.
- Configure iframe properties, including parameters under Advanced Settings.
Example:
I have added the External website tab to my section and gave the url as https://www.microsoft.com/en-in/, and you can refer the result of the tab from the below image
HTML Web Resource :
- + Add another tab → choose HTML Web Resource.
- It will open a dialog with list of HTML web resources, select the one which you want to add.
Example:
I have added the existing HTML web resource as a tab to my section and you can refer the result of the tab from the below image. Refer the HTML code below for the Web Resource used in this blog.
In this example, i have a html page which will show the related contacts with different User Interface using HTML and JavaScript.
Subgrid :
- Click on + Add another tab below the other tabs.
-
It will open a Tab Content prompt dialog which asks table and view
for showing the subgrid in the tab and click on Done.
-
It will open a right side pane where you can customize the subgrid tab
further like Adding label, Hiding Search box and setting maximum number of
rows.
- Once all the changes were done we can Save and Publish the form.
Example:
I have added the existing subgrid with the view(My Active Contacts) as another tab to my section and you can refer the result of the tab from the below image.
Quick view:
-
Click on + Add another tab below the other tabs.
- It will open a Tab Content prompt dialog which asks table and quick view form for showing the quick view in the tab and click on Done.
- Check all the other customizable options once done save and publish the form.
Example:
I have added the table as contact and one of its Quick view form as another tab to my section and you can refer the result of the tab from the below image
Knowledge search:
- Click on + Add another tab below the other tabs.
- Select the Tab icon and click on Done
- Check all the other customizable options once done save and publish the form.
- Save and publish the form.
Example:
Note: As my app is a custom power app and doesn't have knowledge base. If you have access to Knowledge Articles in Dynamics 365 please give it a try.
Bonus:
You can modify the order of the tabs by navigating to the section, under the Section Tabs section you will see the list of created tabs. Click on the ellipse icon of the tab which you want to change the order and you can move up and move down as you want.
Have a great day!