{"id":6745,"date":"2021-05-26T12:34:52","date_gmt":"2021-05-26T12:34:52","guid":{"rendered":"https:\/\/softreetechnology.com\/?p=6745"},"modified":"2021-05-26T12:34:54","modified_gmt":"2021-05-26T12:34:54","slug":"tabbed-form-in-power-apps","status":"publish","type":"post","link":"https:\/\/softreetechnology.com\/blog\/powerapps\/tabbed-form-in-power-apps\/","title":{"rendered":"Tabbed Form in Power Apps"},"content":{"rendered":"\n<p>Introduction:<\/p>\n\n\n\n<p>In this project we have developed a power app that has tabbed form structure. Most commonly we have used simple lay out while configuring the form view. But in this app the form layout will display something different like customize tabbed form. Follow the following steps as mentioned below:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>At first create a SharePoint list as mentioned in the screenshot below:<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"260\" src=\"https:\/\/softreetechnology.com\/wp-content\/uploads\/2021\/05\/Dii1.png\" alt=\"\" class=\"wp-image-6746\" srcset=\"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii1.png 650w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii1-300x120.png 300w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii1-410x164.png 410w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii1-570x228.png 570w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/figure>\n\n\n\n<p>Then choose \u201cCustomize forms\u201d option from \u201cIntegrate\u201d as mentioned in the screenshot below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"265\" src=\"https:\/\/softreetechnology.com\/wp-content\/uploads\/2021\/05\/Dii2.png\" alt=\"\" class=\"wp-image-6747\" srcset=\"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii2.png 650w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii2-300x122.png 300w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii2-410x167.png 410w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii2-570x232.png 570w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/figure>\n\n\n\n<p>After that insert a horizontal gallery as mentioned in the screenshot below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"299\" src=\"https:\/\/softreetechnology.com\/wp-content\/uploads\/2021\/05\/Dii3.png\" alt=\"\" class=\"wp-image-6748\" srcset=\"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii3.png 650w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii3-300x138.png 300w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii3-410x189.png 410w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii3-570x262.png 570w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/figure>\n\n\n\n<p>After\u00a0 that you have to put buttons in the gallery control as mentioned in the screenshot below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"310\" src=\"https:\/\/softreetechnology.com\/wp-content\/uploads\/2021\/05\/Dii4.png\" alt=\"\" class=\"wp-image-6749\" srcset=\"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii4.png 650w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii4-300x143.png 300w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii4-410x196.png 410w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii4-570x272.png 570w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/figure>\n\n\n\n<p>Then change the button \u201cRadius Top Right\u201d and \u201cRadius Top Left\u201d property from 0 to 20 to display buttons like tab control as mentioned in the screenshot below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"302\" src=\"https:\/\/softreetechnology.com\/wp-content\/uploads\/2021\/05\/Dii5.png\" alt=\"\" class=\"wp-image-6750\" srcset=\"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii5.png 650w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii5-300x139.png 300w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii5-410x190.png 410w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii5-570x265.png 570w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/figure>\n\n\n\n<p>Then you have to put all buttons in a table as mentioned in the screenshot below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"312\" src=\"https:\/\/softreetechnology.com\/wp-content\/uploads\/2021\/05\/Dii6.png\" alt=\"\" class=\"wp-image-6751\" srcset=\"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii6.png 650w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii6-300x144.png 300w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii6-410x197.png 410w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii6-570x274.png 570w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/figure>\n\n\n\n<p>Then you have to change the tab \u201cOn Select\u201d property. For that you have to set a variable for it as\u00a0 mentioned in the screenshot below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"288\" src=\"https:\/\/softreetechnology.com\/wp-content\/uploads\/2021\/05\/Dii7.png\" alt=\"\" class=\"wp-image-6752\" srcset=\"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii7.png 650w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii7-300x133.png 300w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii7-410x182.png 410w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii7-570x253.png 570w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/figure>\n\n\n\n<p>Then you have to select the data cards and set the \u201cVisibility\u201d property according to the variable id of the tab buttons as mentioned in the screenshot below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"414\" src=\"https:\/\/softreetechnology.com\/wp-content\/uploads\/2021\/05\/Dii8.png\" alt=\"\" class=\"wp-image-6753\" srcset=\"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii8.png 650w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii8-300x191.png 300w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii8-361x230.png 361w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii8-570x363.png 570w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/figure>\n\n\n\n<p>After selecting all \u201cData card\u201d values the interface will look like as mentioned in the screenshot below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"283\" src=\"https:\/\/softreetechnology.com\/wp-content\/uploads\/2021\/05\/Dii9.png\" alt=\"\" class=\"wp-image-6754\" srcset=\"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii9.png 650w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii9-300x131.png 300w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii9-410x179.png 410w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii9-570x248.png 570w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"244\" src=\"https:\/\/softreetechnology.com\/wp-content\/uploads\/2021\/05\/Dii10.png\" alt=\"\" class=\"wp-image-6755\" srcset=\"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii10.png 650w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii10-300x113.png 300w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii10-410x154.png 410w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii10-570x214.png 570w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"263\" src=\"https:\/\/softreetechnology.com\/wp-content\/uploads\/2021\/05\/Dii11.png\" alt=\"\" class=\"wp-image-6756\" srcset=\"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii11.png 650w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii11-300x121.png 300w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii11-410x166.png 410w, https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2021\/05\/Dii11-570x231.png 570w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/figure>\n\n\n\n<p>Conclusion:<\/p>\n\n\n\n<p>In this blog, I have explained how to create a multi tab form by using Power Apps.<\/p>\n\n\n\n<p>Key words:<\/p>\n\n\n\n<p>&#8220;Tabbed Form in Power Apps&#8221;.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction: In this project we have developed a power app that has tabbed form structure. Most commonly we have used simple lay out while configuring the form view. But in this app the form layout will display something different like customize tabbed form. Follow the following steps as mentioned below: At first create a SharePoint list as mentioned in the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[306],"tags":[],"class_list":["post-6745","post","type-post","status-publish","format-standard","hentry","category-powerapps"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tabbed Form in Power Apps - Softree Technology<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/softreetechnology.com\/blog\/powerapps\/tabbed-form-in-power-apps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tabbed Form in Power Apps - Softree Technology\" \/>\n<meta property=\"og:description\" content=\"Introduction: In this project we have developed a power app that has tabbed form structure. Most commonly we have used simple lay out while configuring the form view. But in this app the form layout will display something different like customize tabbed form. Follow the following steps as mentioned below: At first create a SharePoint list as mentioned in the [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/softreetechnology.com\/blog\/powerapps\/tabbed-form-in-power-apps\/\" \/>\n<meta property=\"og:site_name\" content=\"Softree Technology\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-26T12:34:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-26T12:34:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/softreetechnology.com\/wp-content\/uploads\/2021\/05\/Dii1.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tabbed Form in Power Apps - Softree Technology","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/softreetechnology.com\/blog\/powerapps\/tabbed-form-in-power-apps\/","og_locale":"en_US","og_type":"article","og_title":"Tabbed Form in Power Apps - Softree Technology","og_description":"Introduction: In this project we have developed a power app that has tabbed form structure. Most commonly we have used simple lay out while configuring the form view. But in this app the form layout will display something different like customize tabbed form. Follow the following steps as mentioned below: At first create a SharePoint list as mentioned in the [&hellip;]","og_url":"https:\/\/softreetechnology.com\/blog\/powerapps\/tabbed-form-in-power-apps\/","og_site_name":"Softree Technology","article_published_time":"2021-05-26T12:34:52+00:00","article_modified_time":"2021-05-26T12:34:54+00:00","og_image":[{"url":"https:\/\/softreetechnology.com\/wp-content\/uploads\/2021\/05\/Dii1.png","type":"","width":"","height":""}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/softreetechnology.com\/blog\/powerapps\/tabbed-form-in-power-apps\/#article","isPartOf":{"@id":"https:\/\/softreetechnology.com\/blog\/powerapps\/tabbed-form-in-power-apps\/"},"author":{"name":"admin","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/98740297642f06debccdcee2de84086b"},"headline":"Tabbed Form in Power Apps","datePublished":"2021-05-26T12:34:52+00:00","dateModified":"2021-05-26T12:34:54+00:00","mainEntityOfPage":{"@id":"https:\/\/softreetechnology.com\/blog\/powerapps\/tabbed-form-in-power-apps\/"},"wordCount":247,"commentCount":0,"publisher":{"@id":"https:\/\/softreetechnology.com\/blog\/#organization"},"image":{"@id":"https:\/\/softreetechnology.com\/blog\/powerapps\/tabbed-form-in-power-apps\/#primaryimage"},"thumbnailUrl":"https:\/\/softreetechnology.com\/wp-content\/uploads\/2021\/05\/Dii1.png","articleSection":["PowerApps"],"inLanguage":"en","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/softreetechnology.com\/blog\/powerapps\/tabbed-form-in-power-apps\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/softreetechnology.com\/blog\/powerapps\/tabbed-form-in-power-apps\/","url":"https:\/\/softreetechnology.com\/blog\/powerapps\/tabbed-form-in-power-apps\/","name":"Tabbed Form in Power Apps - Softree Technology","isPartOf":{"@id":"https:\/\/softreetechnology.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/softreetechnology.com\/blog\/powerapps\/tabbed-form-in-power-apps\/#primaryimage"},"image":{"@id":"https:\/\/softreetechnology.com\/blog\/powerapps\/tabbed-form-in-power-apps\/#primaryimage"},"thumbnailUrl":"https:\/\/softreetechnology.com\/wp-content\/uploads\/2021\/05\/Dii1.png","datePublished":"2021-05-26T12:34:52+00:00","dateModified":"2021-05-26T12:34:54+00:00","breadcrumb":{"@id":"https:\/\/softreetechnology.com\/blog\/powerapps\/tabbed-form-in-power-apps\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/softreetechnology.com\/blog\/powerapps\/tabbed-form-in-power-apps\/"]}]},{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/softreetechnology.com\/blog\/powerapps\/tabbed-form-in-power-apps\/#primaryimage","url":"https:\/\/softreetechnology.com\/wp-content\/uploads\/2021\/05\/Dii1.png","contentUrl":"https:\/\/softreetechnology.com\/wp-content\/uploads\/2021\/05\/Dii1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/softreetechnology.com\/blog\/powerapps\/tabbed-form-in-power-apps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/softreetechnology.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tabbed Form in Power Apps"}]},{"@type":"WebSite","@id":"https:\/\/softreetechnology.com\/blog\/#website","url":"https:\/\/softreetechnology.com\/blog\/","name":"Softree Technology","description":"Celebrating 10+ Years in SharePoint Consulting !","publisher":{"@id":"https:\/\/softreetechnology.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/softreetechnology.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/softreetechnology.com\/blog\/#organization","name":"Softree Technology","url":"https:\/\/softreetechnology.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2023\/03\/cropped-white-logo-soft.png","contentUrl":"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2023\/03\/cropped-white-logo-soft.png","width":844,"height":230,"caption":"Softree Technology"},"image":{"@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/98740297642f06debccdcee2de84086b","name":"admin","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6fc78c8a7aa3fb0bf43c3b9a2e3962d7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6fc78c8a7aa3fb0bf43c3b9a2e3962d7?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/softreeconsulting.com"],"url":"https:\/\/softreetechnology.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts\/6745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=6745"}],"version-history":[{"count":1,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts\/6745\/revisions"}],"predecessor-version":[{"id":6757,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts\/6745\/revisions\/6757"}],"wp:attachment":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=6745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=6745"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=6745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}