I recently had a request to demonstrate how to toggle tab visibility based on the value of an entity property, Item, in a Model-Driven App.
To complete the ask I used JavaScript and wired it up to the Model-Driven App form events, specifically On Load and On Change events.
Try it in your own environment by importing the solution located at https://github.com/mattruma/Model-Driven-App-Sample-1-Show-And-Hide-Tabs/blob/main/ModelDrivenAppSample1ShowHideTabsSolution_1_0_0_1.zip.
The solution contains the following components:
- Model-Driven App Sample 1 – Item – Table that includes
Name(primary unique name column) andTab(internal Choice) properties. - Model-Driven App Sample 1 – Model-Driven App – The Model-Driven App.
- Model-Driven App Sample 1 – Model-Driven App – The Site Map for the Model-Driven app.
- Model-Driven App Sample 1 – Item Events – Web Resource for the JavaScript file that contains the code to toggle tab visibility.
The Tabs column data type was a Choice, and Internal Choice. The values allowed for Tabs will be used in the JavaScript file.
I modified the Information form to display the Tab field and added three tabs.
I created a JavaScript file, called Model-Driven App Sample 1 – Item Events.js, that contained the code to toggle tab visibility.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
var ModelDrivenAppSample1ItemEvents = window.ModelDrivenAppSample1ItemEvents || {}; (function () { const TAB_1 = 968050000; const TAB_2 = 968050001; const TAB_3 = 968050002; // Code to run in the form OnLoad event this.formOnLoad = function (executionContext) { console.log("ModelDrivenAppSample1ItemEvents - formOnLoad"); // Current version of the file console.log("version", "2023.06.07.1"); var formContext = executionContext.getFormContext(); // Show visible tab setVisibleTab(formContext); } // Code to run in the column OnChange event this.attributeOnChange = function (executionContext) { console.log("ModelDrivenAppSample1ItemEvents - attributeOnChange"); var formContext = executionContext.getFormContext(); setVisibleTab(formContext); } // Code to run in the form OnSave event this.formOnSave = function () { console.log("ModelDrivenAppSample1ItemEvents - formOnSave"); } // Code to run to determine if a record is new function isNewRecord(formContext) { // Get the reference for the entity var entityReference = formContext.data.entity.getEntityReference(); // If the Id is empty, which will return false, then this is a new record return !entityReference.id; } function setVisibleTab(formContext) { console.log("ModelDrivenAppSample1ItemEvents - setVisibleTab"); // Hide all the tabs toggleTab(formContext, 'tab_1', false); toggleTab(formContext, 'tab_2', false); toggleTab(formContext, 'tab_3', false); // Determine which tab to display switch (formContext.getAttribute("maruma_tabs").getValue()) { case TAB_1: toggleTab(formContext, 'tab_1', true); break; case TAB_2: toggleTab(formContext, 'tab_2', true); break; case TAB_3: toggleTab(formContext, 'tab_3', true); break; default: } } // Code to toggle visibility on a tab function toggleTab(formContext, tabName, isVisible) { console.log("ModelDrivenAppSample1ItemEvents - toggleTab"); // formContext.ui.tabs (Client API reference) // https://learn.microsoft.com/en-us/power-apps/developer/model-driven-apps/clientapi/reference/formcontext-ui-tabs var tab = formContext.ui.tabs.get(tabName); // Toggle visibility of the tab tab.setVisible(isVisible); } }).call(ModelDrivenAppSample1ItemEvents); |
I uploaded the JavaScript file as a Web Resource to the Solution so it would be available to my forms.
I wired up the formOnLoad in the JavaScript file to the On Load Event of the Information form for the Item entity.
- Click the Information node, then click the Events tab then click Add Event Handler.
- Set Library to the JavaScript file uploaded to the Solution.
- Set Function to
ModelDrivenAppSample1ItemEvents.formOnLoad. - Set Pass execution context as first parameter as
Checked. - Click Done.
- Click Save and publish.
Next, I wired up the On Change event for the Tabs field.
- Expand the General node, do this twice, click on the Tabs node.
- Click the Events tab then click Add Event Handler.
- Set Library to the JavaScript file uploaded to the Solution.
- Set Function to
ModelDrivenAppSample1ItemEvents.attributeOnChange. - Set Pass execution context as first parameter as
Checked. - Click Done.
- Click Save and publish.
Click Back.
Click Publish and then click Play to see the app in action.
There you go! Wish there was a no-code approach to doing this, but thankfully the low-code approach is not that burdensome.