{"id":498,"date":"2023-02-24T16:27:00","date_gmt":"2023-02-24T16:27:00","guid":{"rendered":"https:\/\/automatethemundane.com\/index.php\/2023\/02\/24\/expanding-model-driven-apps-with-code-hiding-tabs-until-record-is-created\/"},"modified":"2023-07-04T14:33:19","modified_gmt":"2023-07-04T14:33:19","slug":"expanding-model-driven-apps-with-code-hiding-tabs-until-record-is-created","status":"publish","type":"post","link":"https:\/\/automatethemundane.com\/index.php\/2023\/02\/24\/expanding-model-driven-apps-with-code-hiding-tabs-until-record-is-created\/","title":{"rendered":"Expanding Model Driven apps with code- Hiding Tabs until record is created"},"content":{"rendered":"\n<p class=\"has-text-color\" style=\"color:rgba(120, 119, 116, 1)\">2\/24\/2023<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">The Why<\/h1>\n\n\n\n<p class=\"has-text-color\" style=\"color:rgb(0, 0, 0)\">Hiding tabs in a Model Driven app until a record is created can simplify the interface and reduce clutter. If certain tabs are not relevant until a record is created, it can be helpful to hide them until they are needed. This can make the app more intuitive and easier to use for the end user.<\/p>\n\n\n\n<p class=\"has-text-color\" style=\"color:rgb(0, 0, 0)\">Additionally, hiding tabs can guide the user through the app, ensuring that they are only presented with options relevant to their current task. This can improve the overall user experience and increase satisfaction.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">The How<\/h1>\n\n\n\n<p class=\"has-text-color\" style=\"color:rgb(0, 0, 0)\">Expanding on the previous <a rel=\"noreferrer noopener\" href=\"https:\/\/automatethemundane.com\/index.php\/2023\/02\/24\/expanding-model-driven-apps-with-code-hiding-tabs-based-on-value\/\" data-type=\"post\" data-id=\"367\" target=\"_blank\">writeup<\/a>, we will now hide all tabs that the user does not need to see until after the record is created. We will be hiding the Supervisor, Higher Approval, and Documentation Tab until the record is created. Additionally,we will be hiding the Higher Approval tab if the cost is \u2264 $100. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/automatethemundane.com\/wp-content\/uploads\/2023\/05\/image-7.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Code<\/h2>\n\n\n\n<p class=\"has-text-color\" style=\"color:rgb(0, 0, 0)\">The first part of the code declares the function and the formcontext variable<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function onFormLoad(executionContext) {\n    var formContext = executionContext.getFormContext();\n<\/code><\/pre>\n\n\n\n<p class=\"has-text-color\" style=\"color:rgb(0, 0, 0)\">The next part gets the record id <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Get the record ID\n    var recordId = formContext.data.entity.getId();<\/code><\/pre>\n\n\n\n<p class=\"has-text-color\" style=\"color:rgb(0, 0, 0)\">Next, we check if the record exists. If it does not exist, the tabs will be hidden.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Check if the record has been created\n    if (recordId === null || recordId === \"\") {\n        \/\/ If the record has not been created, hide the tabs\n        formContext.ui.tabs.get(\"tab_documentation\").setVisible(false);\n        formContext.ui.tabs.get(\"tab_sup\").setVisible(false);\n        formContext.ui.tabs.get(\"tab_higherapproval\").setVisible(false);\n    } else {\n        \/\/ If the record has been created, show all tabs\n        formContext.ui.tabs.get(\"tab_documentation\").setVisible(true);\n        formContext.ui.tabs.get(\"tab_sup\").setVisible(true);\n        formContext.ui.tabs.get(\"tab_higherapproval\").setVisible(true);<\/code><\/pre>\n\n\n\n<p class=\"has-text-color\" style=\"color:rgb(0, 0, 0)\">Lastly we check to see if the cost field is \u2264 $100<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> \/\/ Check the cost field value\n        var costField = formContext.getAttribute(\"eddev_cost\");\n        if (costField.getValue() &lt;= 100) {\n            \/\/ If the cost is less than or equal to 100, hide the tab_higherapproval\n            formContext.ui.tabs.get(\"tab_higherapproval\").setVisible(false);<\/code><\/pre>\n\n\n\n<p class=\"has-text-color\" style=\"color:rgb(0, 0, 0)\">All put together. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function onFormLoad(executionContext) {\n    var formContext = executionContext.getFormContext();\n\n    \/\/ Get the record ID\n    var recordId = formContext.data.entity.getId();\n\n    \/\/ Check if the record has been created\n    if (recordId === null || recordId === \"\") {\n        \/\/ If the record has not been created, hide the tabs\n        formContext.ui.tabs.get(\"tab_documentation\").setVisible(false);\n        formContext.ui.tabs.get(\"tab_sup\").setVisible(false);\n        formContext.ui.tabs.get(\"tab_higherapproval\").setVisible(false);\n    } else {\n        \/\/ If the record has been created, show all tabs\n        formContext.ui.tabs.get(\"tab_documentation\").setVisible(true);\n        formContext.ui.tabs.get(\"tab_sup\").setVisible(true);\n        formContext.ui.tabs.get(\"tab_higherapproval\").setVisible(true);\n\n        \/\/ Check the cost field value\n        var costField = formContext.getAttribute(\"eddev_cost\");\n        if (costField.getValue() &lt;= 100) {\n            \/\/ If the cost is less than or equal to 100, hide the tab_higherapproval\n            formContext.ui.tabs.get(\"tab_higherapproval\").setVisible(false);\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<p class=\"has-text-color\" style=\"color:rgb(0, 0, 0)\">Updating WebPart<\/p>\n\n\n\n<p class=\"has-text-color\" style=\"color:rgb(0, 0, 0)\">As we are using the same .js file, we can simply update the one that was created before.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/automatethemundane.com\/wp-content\/uploads\/2023\/05\/image-8-1024x540.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Form<\/h2>\n\n\n\n<p class=\"has-text-color\" style=\"color:rgb(0, 0, 0)\">Change the function to \"onFormLoad\" on the form's On Load event.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/automatethemundane.com\/wp-content\/uploads\/2023\/05\/image-9.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-color\" style=\"color:rgb(0, 0, 0)\">Change the function in the cost field to \"onFormLoad\".<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/automatethemundane.com\/wp-content\/uploads\/2023\/05\/image-10.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"has-text-color\" style=\"color:rgb(0, 0, 0)\">Save and Publish the form. <\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Testing<\/h1>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 1920 \/ 1080;\" width=\"1920\" controls src=\"https:\/\/automatethemundane.com\/wp-content\/uploads\/2023\/05\/video.mp4\"><\/video><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>2\/24\/2023 The Why Hiding tabs in a Model Driven app until a record is created can simplify the interface and reduce clutter. If certain tabs are not relevant until a record is created, it can be helpful to hide them until they are needed. This can make the app more intuitive and easier to use [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":139,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[31,39,4,32],"class_list":["post-498","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-model-driven-app","tag-forms","tag-javascript","tag-mda","tag-testing","entry","has-media"],"jetpack_featured_media_url":"https:\/\/automatethemundane.com\/wp-content\/uploads\/2023\/05\/cover-12-scaled.jpg","_links":{"self":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/posts\/498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/comments?post=498"}],"version-history":[{"count":1,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/posts\/498\/revisions"}],"predecessor-version":[{"id":499,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/posts\/498\/revisions\/499"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/media\/139"}],"wp:attachment":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/media?parent=498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/categories?post=498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/tags?post=498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}