{"id":8005,"date":"2025-08-18T18:36:32","date_gmt":"2025-08-18T18:36:32","guid":{"rendered":"https:\/\/powergi.net\/?p=8005"},"modified":"2025-09-15T19:00:39","modified_gmt":"2025-09-15T19:00:39","slug":"model-driven-apps-javascript-customization","status":"publish","type":"post","link":"https:\/\/powergi.net\/de\/blog\/model-driven-apps-javascript-customization\/","title":{"rendered":"Model-Driven Apps-Anpassung mit JavaScript | Power Apps | Modernes Formularerlebnis"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"8005\" class=\"elementor elementor-8005\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-263ff7d e-flex e-con-boxed e-con e-parent\" data-id=\"263ff7d\" data-element_type=\"container\" data-e-type=\"container\" data-settings='{\"jet_parallax_layout_list\":[]}'>\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1043eca elementor-toc--minimized-on-tablet elementor-widget elementor-widget-table-of-contents\" data-id=\"1043eca\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings='{\"exclude_headings_by_selector\":[],\"no_headings_message\":\"No headings were found on this page.\",\"headings_by_tags\":[\"h2\",\"h3\",\"h4\",\"h5\",\"h6\"],\"marker_view\":\"numbers\",\"minimize_box\":\"yes\",\"minimized_on\":\"tablet\",\"hierarchical_view\":\"yes\",\"min_height\":{\"unit\":\"px\",\"size\":\"\",\"sizes\":[]},\"min_height_tablet\":{\"unit\":\"px\",\"size\":\"\",\"sizes\":[]},\"min_height_mobile\":{\"unit\":\"px\",\"size\":\"\",\"sizes\":[]}}' data-widget_type=\"table-of-contents.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-toc__header\">\n\t\t\t\t\t\t<h4 class=\"elementor-toc__header-title\">\n\t\t\t\tTable of Contents\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-toc__toggle-button elementor-toc__toggle-button--expand\" role=\"button\" tabindex=\"0\" aria-controls=\"elementor-toc__1043eca\" aria-expanded=\"true\" aria-label=\"Inhaltsverzeichnis \u00f6ffnen\"><i aria-hidden=\"true\" class=\"fas fa-chevron-down\"><\/i><\/div>\n\t\t\t\t<div class=\"elementor-toc__toggle-button elementor-toc__toggle-button--collapse\" role=\"button\" tabindex=\"0\" aria-controls=\"elementor-toc__1043eca\" aria-expanded=\"true\" aria-label=\"Inhaltsverzeichnis schlie\u00dfen\"><i aria-hidden=\"true\" class=\"fas fa-chevron-up\"><\/i><\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<div id=\"elementor-toc__1043eca\" class=\"elementor-toc__body\">\n\t\t\t<div class=\"elementor-toc__spinner-container\">\n\t\t\t\t<i class=\"elementor-toc__spinner eicon-animation-spin eicon-loading\" aria-hidden=\"true\"><\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-39a843e elementor-widget elementor-widget-text-editor\" data-id=\"39a843e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This post and video will show how to customize Model-Driven apps integrating JavaScript code to set a tab in the form as visible or invisible, depending on another field in the form. This example is focused on a simple customization but the general process of\u00a0<span style=\"font-size: 1rem;\">Model-Driven Apps form customization with JavaScript<\/span><span style=\"font-size: 1rem;\">\u00a0<\/span><span style=\"font-style: inherit; font-weight: inherit;\">usually follows the same steps:<\/span><\/p>\n<ol>\n<li>Set up form in Dataverse table<\/li>\n<li>Write JavaScript code<\/li>\n<li>Add the JavaScript library in the app or solution<\/li>\n<li>Import the JavaScript library to the form<\/li>\n<li>Assign a function to execute on an event such as form OnLoad or OnSave or field OnChange.<\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f98bc43 elementor-widget elementor-widget-heading\" data-id=\"f98bc43\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Use case description<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e98c516 elementor-widget elementor-widget-text-editor\" data-id=\"e98c516\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The example shown in the videos focuses on a project management scenario where projects can be categorized as belonging to a single company or multiple companies. The goal is to dynamically show or hide a \u201cCompanies\u201d tab on the project form depending on the project type selected by the user.<\/p><p><img decoding=\"async\" src=\"https:\/\/powergi.net\/wp-content\/uploads\/2026\/06\/migrated-img-8005-6a4450d0beb34.png\" alt=\"\"><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-480abe3 elementor-widget elementor-widget-heading\" data-id=\"480abe3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Solution description<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3cfbf27 elementor-widget elementor-widget-text-editor\" data-id=\"3cfbf27\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To address this, a JavaScript function is written to read the project type value from the form and conditionally hide or show the tab. The JavaScript is then uploaded as a web resource within the Dataverse environment and linked to the form events.<\/p><div id=\"seology-cta-1\">\t\t<div data-elementor-type=\"section\" data-elementor-id=\"7276\" class=\"elementor elementor-7276\" data-elementor-post-type=\"elementor_library\">\n\t\t\t<div class=\"elementor-element elementor-element-7e3f164 e-con-full e-flex e-con e-parent\" data-id=\"7e3f164\" data-element_type=\"container\" data-e-type=\"container\" data-settings='{\"background_background\":\"classic\",\"jet_parallax_layout_list\":[]}'>\n\t\t<div class=\"elementor-element elementor-element-9078c9f e-con-full e-flex e-con e-child\" data-id=\"9078c9f\" data-element_type=\"container\" data-e-type=\"container\" data-settings='{\"jet_parallax_layout_list\":[]}'>\n\t\t\t\t<div class=\"elementor-element elementor-element-7b99949 elementor-widget elementor-widget-heading\" data-id=\"7b99949\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">From vision to execution<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8e61db5 elementor-widget elementor-widget-heading\" data-id=\"8e61db5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">Whether you're just starting or scaling automation, we help turn your ideas into impactful solutions.<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a578907 e-flex e-con-boxed e-con e-child\" data-id=\"a578907\" data-element_type=\"container\" data-e-type=\"container\" data-settings='{\"jet_parallax_layout_list\":[]}'>\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e8c827b elementor-view-stacked elementor-shape-circle elementor-widget elementor-widget-icon\" data-id=\"e8c827b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<a class=\"elementor-icon\" href=\"#ctc_chat\">\n\t\t\t<i aria-hidden=\"true\" class=\"fab fa-whatsapp\"><\/i>\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d834237 elementor-view-stacked elementor-shape-circle elementor-widget elementor-widget-icon\" data-id=\"d834237\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<a class=\"elementor-icon\" href=\"https:\/\/powergi.net\/de\/contact\/\">\n\t\t\t<i aria-hidden=\"true\" class=\"far fa-envelope\"><\/i>\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-edb568a elementor-widget elementor-widget-heading\" data-id=\"edb568a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 1. Setting Up the Form<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2ec16d0 elementor-widget elementor-widget-text-editor\" data-id=\"2ec16d0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In the example, we\u2019re working with a\u00a0<strong>Projects<\/strong>\u00a0table with a\u00a0<strong>Project Type<\/strong>\u00a0choice column (values: single company, multiple companies, etc.). A related table links projects to companies. The goal is to show a \u201cCompanies\u201d tab only when the project type is \u201cmultiple companies.\u201d<\/p><p>The form will have a single-column tab named\u00a0<strong>Companies<\/strong>\u00a0(backend name:\u00a0tab_companies) and this the tab we want to dynamically hide or show based on the project type field.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6b83614 elementor-widget elementor-widget-heading\" data-id=\"6b83614\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 2. Creating the Model-Driven App<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-164f150 elementor-widget elementor-widget-text-editor\" data-id=\"164f150\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We need to create a new model-driven app is created within a solution, and add the\u00a0<strong>Projects<\/strong>\u00a0table as a new page.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b1411ee elementor-widget elementor-widget-heading\" data-id=\"b1411ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 3. Writing JavaScript Code to Hide\/Show Tab<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5876642 elementor-widget elementor-widget-code-highlight\" data-id=\"5876642\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly class=\"language-javascript\">\n\t\t\t\t\t<xmp>For this simple customization, this is the code being used:\r\n\r\nfunction fxHideShowTab(executionContext) {\r\n var formContext = executionContext.getFormContext();\r\n var projectType = formContext.getAttribute('{column-name}').getValue();\r\n var detailTab = formContext.ui.tabs.get('{tab-name}');\r\n\r\n if (projectType == 891540000)\r\n {\r\n  detailTab.setVisible(true);\r\n }\r\n else\r\n {\r\n  detailTab.setVisible(false);\r\n }\r\n\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d48c9c0 elementor-widget elementor-widget-heading\" data-id=\"d48c9c0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 4. Uploading JavaScript code to Dataverse<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f4c7165 elementor-widget elementor-widget-text-editor\" data-id=\"f4c7165\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Go to JS and then \u201cAdd Library\u201d<\/p><p><img decoding=\"async\" src=\"https:\/\/powergi.net\/wp-content\/uploads\/2026\/07\/migrated-img-8005-6a4450d0ea02e.webp\" alt=\"\"><\/p><p><span style=\"font-size: 11pt; line-height: 107%; font-family: Aptos, sans-serif; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;\">Next, click on \u201c+ Web resource\u201d<\/span><img decoding=\"async\" style=\"font-size: 1rem;\" src=\"https:\/\/powergi.net\/wp-content\/uploads\/2026\/07\/migrated-img-8005-6a4450d18711e.webp\" alt=\"\"><\/p><p><span style=\"font-size: 11pt; line-height: 107%; font-family: Aptos, sans-serif; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;\">In the next panel, add the code, file name and type and Save and Publish<\/span><img decoding=\"async\" style=\"font-size: 1rem;\" src=\"https:\/\/powergi.net\/wp-content\/uploads\/2026\/07\/migrated-img-8005-6a4450d246211.webp\" alt=\"\"><\/p><p><span style=\"font-size: 11pt; line-height: 107%; font-family: Aptos, sans-serif; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;\">Once saved, we need to select the resource we just uploaded. Use the search bar to find it faster, select it and then click on add<\/span><img decoding=\"async\" style=\"font-size: 1rem;\" src=\"https:\/\/powergi.net\/wp-content\/uploads\/2026\/06\/migrated-img-8005-6a4450d2d724f.png\" alt=\"\"><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f8a7c66 elementor-widget elementor-widget-heading\" data-id=\"f8a7c66\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 5. Adding event handlers to trigger the code<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8c765f2 elementor-widget elementor-widget-text-editor\" data-id=\"8c765f2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Go to the form\u2019s events and add a new event handler<\/p><p><img decoding=\"async\" src=\"https:\/\/powergi.net\/wp-content\/uploads\/2026\/07\/migrated-img-8005-6a4450d37cbcb.webp\" alt=\"\"><\/p><div id=\"seology-cta-2\">\t\t<div data-elementor-type=\"section\" data-elementor-id=\"7280\" class=\"elementor elementor-7280\" data-elementor-post-type=\"elementor_library\">\n\t\t\t<div class=\"elementor-element elementor-element-7e3f164 e-con-full e-flex e-con e-parent\" data-id=\"7e3f164\" data-element_type=\"container\" data-e-type=\"container\" data-settings='{\"background_background\":\"classic\",\"jet_parallax_layout_list\":[]}'>\n\t\t<div class=\"elementor-element elementor-element-9078c9f e-con-full e-flex e-con e-child\" data-id=\"9078c9f\" data-element_type=\"container\" data-e-type=\"container\" data-settings='{\"jet_parallax_layout_list\":[]}'>\n\t\t\t\t<div class=\"elementor-element elementor-element-7b99949 elementor-widget elementor-widget-heading\" data-id=\"7b99949\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">Automate tasks that slow you down<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8e61db5 elementor-widget elementor-widget-heading\" data-id=\"8e61db5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">Free up your team\u2019s time and focus on strategic work with digital and robotic automation.<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a578907 e-flex e-con-boxed e-con e-child\" data-id=\"a578907\" data-element_type=\"container\" data-e-type=\"container\" data-settings='{\"jet_parallax_layout_list\":[]}'>\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e8c827b elementor-view-stacked elementor-shape-circle elementor-widget elementor-widget-icon\" data-id=\"e8c827b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<a class=\"elementor-icon\" href=\"#ctc_chat\">\n\t\t\t<i aria-hidden=\"true\" class=\"fab fa-whatsapp\"><\/i>\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d834237 elementor-view-stacked elementor-shape-circle elementor-widget elementor-widget-icon\" data-id=\"d834237\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<a class=\"elementor-icon\" href=\"https:\/\/powergi.net\/de\/contact\/\">\n\t\t\t<i aria-hidden=\"true\" class=\"far fa-envelope\"><\/i>\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<\/div><p><span style=\"font-size: 11pt; line-height: 107%; font-family: Aptos, sans-serif; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;\">Select the library, function name and enable the two checkboxes:<\/span><img decoding=\"async\" style=\"font-size: 1rem;\" src=\"https:\/\/powergi.net\/wp-content\/uploads\/2026\/07\/migrated-img-8005-6a4450d3bb810.webp\" alt=\"\"><\/p><p><span style=\"font-size: 11pt; line-height: 107%; font-family: Aptos, sans-serif; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;\">After this is done we can test and run the app to make sure all works properly!<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fea52e7 elementor-widget elementor-widget-heading\" data-id=\"fea52e7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Step-by-step video walkthrough<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bb48781 elementor-widget elementor-widget-text-editor\" data-id=\"bb48781\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Watch the video below to see a step-by-step walkthrough by Graciela, where she shows the process of Model-Driven App form customization with JavaScript<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7e68af7 elementor-widget elementor-widget-video\" data-id=\"7e68af7\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings='{\"youtube_url\":\"https:\\\/\\\/youtu.be\\\/kJPt5ZoLqVg\",\"video_type\":\"youtube\",\"controls\":\"yes\"}' data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ce8efd1 elementor-widget elementor-widget-heading\" data-id=\"ce8efd1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How our Power Apps Development services can help<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1edda1b elementor-widget elementor-widget-text-editor\" data-id=\"1edda1b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Model-driven apps customization through JavaScript can be really powerful and can be applied to many different use cases such as validating subgrid content or hide fields from a Business Process flow to certain users. Using our <a href=\"https:\/\/powergi.net\/power-apps-consulting-services\/\">Power Apps<\/a>\u00a0and\u00a0<a href=\"https:\/\/powergi.net\/microsoft-power-platform-consulting-services\/\">Power Platform consulting services<\/a>, we have implemented many customizations in model-driven apps and Dataverse forms,\u00a0<a href=\"https:\/\/powergi.net\/contact\/\">contact us<\/a>, we\u2019ll be more than happy to have a conversation and see how we can be of help for your team.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Table of Contents This post and video will show how to customize Model-Driven apps integrating JavaScript code to set a tab in the form as visible or invisible, depending on another field in the form. This example is focused on a simple customization but the general process of\u00a0Model-Driven Apps form customization with JavaScript\u00a0usually follows the [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":8019,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"default","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"glossary_letter":"","footnotes":""},"categories":[81],"tags":[],"class_list":["post-8005","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-power-apps-cat"],"glossary_letter":"","rank_math_title":"Model Driven Apps JavaScript Customization | Modern Forms","rank_math_description":"In this step-by-step tutorial, learn about Model Driven Apps JavaScript Customization. Upload custom code to your forms in the modern experience","rank_math_focus_keyword":"Model Driven Apps javascript customization","_links":{"self":[{"href":"https:\/\/powergi.net\/de\/wp-json\/wp\/v2\/posts\/8005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/powergi.net\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/powergi.net\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/powergi.net\/de\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/powergi.net\/de\/wp-json\/wp\/v2\/comments?post=8005"}],"version-history":[{"count":0,"href":"https:\/\/powergi.net\/de\/wp-json\/wp\/v2\/posts\/8005\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/powergi.net\/de\/wp-json\/wp\/v2\/media\/8019"}],"wp:attachment":[{"href":"https:\/\/powergi.net\/de\/wp-json\/wp\/v2\/media?parent=8005"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/powergi.net\/de\/wp-json\/wp\/v2\/categories?post=8005"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/powergi.net\/de\/wp-json\/wp\/v2\/tags?post=8005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}