{"id":13497,"date":"2026-05-20T23:45:15","date_gmt":"2026-05-20T23:45:15","guid":{"rendered":"https:\/\/powergi.net\/?p=13497"},"modified":"2026-07-11T20:19:15","modified_gmt":"2026-07-11T20:19:15","slug":"collapsible-forms-in-power-apps","status":"publish","type":"post","link":"https:\/\/powergi.net\/es\/blog\/collapsible-forms-in-power-apps\/","title":{"rendered":"C\u00f3mo crear formularios colapsables en Power Apps (formularios de acorde\u00f3n)"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"13497\" class=\"elementor elementor-13497\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d7473a e-flex e-con-boxed e-con e-parent\" data-id=\"1d7473a\" 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-7fe1b18 elementor-widget elementor-widget-text-editor\" data-id=\"7fe1b18\" 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><span data-contrast=\"auto\">When there are too many fields for a single form, users can have\u00a0a hard time\u00a0filling it out. Sometimes\u00a0it\u2019s\u00a0a good idea\u00a0to group fields in\u00a0sections\u00a0so all the related fields are in the same section,\u00a0and also\u00a0it may be\u00a0a good idea\u00a0to give users the option to collapse and expand the sections: this is when accordion forms are useful.<\/span><span data-ccp-props='{\"134233117\":false,\"134233118\":false,\"201341983\":0,\"335551550\":1,\"335551620\":1,\"335559685\":0,\"335559737\":0,\"335559738\":0,\"335559739\":160,\"335559740\":279}'>\u00a0<\/span><\/p><p><span data-contrast=\"auto\">This\u00a0blog will show everything about collapsible forms\u00a0in power Apps\u00a0and a clear step-by-step process to create one from scratch.\u00a0In this walkthrough we discuss specifically how to work with Canvas Apps, to learn more about\u00a0<\/span><a href=\"https:\/\/powergi.net\/blog\/power-apps-application-types-in-2026\/\"><span data-contrast=\"none\">other application types in Power Apps<\/span><\/a><span data-contrast=\"auto\">,\u00a0head to our\u00a0article\u00a0about\u00a0it.<\/span><span data-ccp-props='{\"134233117\":false,\"134233118\":false,\"201341983\":0,\"335551550\":1,\"335551620\":1,\"335559685\":0,\"335559737\":0,\"335559738\":0,\"335559739\":160,\"335559740\":279}'>\u00a0<\/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-57f7f3f elementor-toc--minimized-on-tablet elementor-widget elementor-widget-table-of-contents\" data-id=\"57f7f3f\" 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__57f7f3f\" aria-expanded=\"true\" aria-label=\"Open table of contents\"><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__57f7f3f\" aria-expanded=\"true\" aria-label=\"Close table of contents\"><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__57f7f3f\" 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\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9e76dbc e-flex e-con-boxed e-con e-parent\" data-id=\"9e76dbc\" 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-1a42a09 elementor-widget elementor-widget-heading\" data-id=\"1a42a09\" 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\"> What are collapsible forms in Power Apps?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2ea770c elementor-widget elementor-widget-text-editor\" data-id=\"2ea770c\" 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><span data-contrast=\"auto\">A collapsible form (or accordion form) in Power Apps is a form layout where each section has a clickable header.\u00a0When users click on\u00a0the header, it will expand to show the fields grouped under the section, clicking\u00a0on it again will collapse it back to hide the fields, leaving only the section header name visible.<\/span><span data-ccp-props='{\"134233117\":false,\"134233118\":false,\"201341983\":0,\"335551550\":1,\"335551620\":1,\"335559685\":0,\"335559737\":0,\"335559738\":0,\"335559739\":160,\"335559740\":279}'>\u00a0<\/span><\/p><p><span data-ccp-props='{\"134233117\":false,\"134233118\":false,\"201341983\":0,\"335551550\":1,\"335551620\":1,\"335559685\":0,\"335559737\":0,\"335559738\":0,\"335559739\":160,\"335559740\":279}'><br><\/span><span style=\"font-style: inherit; font-weight: inherit;\" data-contrast=\"auto\">It looks\u00a0something\u00a0like below:<\/span><span style=\"font-style: inherit; font-weight: inherit;\" data-ccp-props=\"{}\">\u00a0<br><\/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-c6f587d elementor-widget elementor-widget-image\" data-id=\"c6f587d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"426\" height=\"240\" src=\"https:\/\/powergi.net\/wp-content\/uploads\/2026\/07\/how-to-create-collapsible-forms-in-power-apps-accordion-forms-image-6.webp\" class=\"attachment-large size-large wp-image-13514\" alt=\"\">\t\t\t\t\t\t\t\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-f40e25e elementor-widget elementor-widget-heading\" data-id=\"f40e25e\" 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\">Benefits of using accordion forms in Power Apps<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-476ea91 elementor-widget elementor-widget-text-editor\" data-id=\"476ea91\" 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><span data-contrast=\"auto\">End users will thank you if you create an accordion layout when forms are\u00a0long\u00a0and many fields are\u00a0required. Some benefits of using this layout are:<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p>\n<ul>\n<li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"6\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"1\" data-aria-level=\"1\"><span data-contrast=\"auto\">Users only see\u00a0what\u2019s\u00a0relevant to them at each step<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/li><li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"6\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"2\" data-aria-level=\"1\"><span data-contrast=\"auto\">Collapsible sections allow to group related fields, reducing the information\u00a0users see at the same\u00a0time on\u00a0screen.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/li><li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"6\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"3\" data-aria-level=\"1\"><span data-contrast=\"auto\">When a form is logically divided into labeled sections, users can jump straight to what\u00a0<\/span><span data-contrast=\"auto\">they need without scrolling too much in the form, so there will be a better overall navigation.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/li><li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"6\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"4\" data-aria-level=\"1\"><span data-contrast=\"auto\">Organizing in\u00a0sections will result in improved user experience on mobile\u00a0because\u00a0the\u00a0layout breaks\u00a0into bite-sized sections that feel natural to tap through.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/li>\n<\/ul>\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-5206d2c elementor-widget elementor-widget-heading\" data-id=\"5206d2c\" 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\">What you need before creating a collapsible form<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ef78f4f elementor-widget elementor-widget-text-editor\" data-id=\"ef78f4f\" 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><span data-contrast=\"auto\">First things first, plan the sections of the app and decide the following:<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p><ul><li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"5\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"1\" data-aria-level=\"1\"><span data-contrast=\"auto\">How all the fields in the form are related or how they can be grouped<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/li><li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"5\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"2\" data-aria-level=\"1\"><span data-contrast=\"auto\">How many sections the form needs<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/li><li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"5\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"3\" data-aria-level=\"1\"><span data-contrast=\"auto\">How sections will be sorted, what will show first and will go at last<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/li><li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"5\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"4\" data-aria-level=\"1\"><span data-contrast=\"auto\">Which fields belong to each section<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/li><li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"5\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"5\" data-aria-level=\"1\"><span data-contrast=\"auto\">Which data type belongs to each field (text input, number, date, date time, dropdowns, long text)<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/li><li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"5\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"6\" data-aria-level=\"1\"><span data-contrast=\"auto\">The order in which each field will go in its corresponding section<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/li><\/ul><p><span data-contrast=\"auto\">Once you know above,\u00a0it\u2019s\u00a0a good idea\u00a0to create some\u00a0type\u00a0of prototype of how the application will look so you can have an idea of\u00a0the end result\u00a0that will be achieved. This can be built in a tool like Figma,\u00a0Lucidchart\u00a0or even a Power Point slide.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/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\/es\/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 data-contrast=\"auto\">Below is an example of the design we want to achieve<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p><p><img decoding=\"async\" class=\"alignnone wp-image-15016 size-medium\" src=\"https:\/\/powergi.net\/wp-content\/uploads\/2026\/07\/download-600x262.png\" alt=\"\" width=\"600\" height=\"262\"><\/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-aa2e82c elementor-widget elementor-widget-heading\" data-id=\"aa2e82c\" 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 to create a collapsible form in Power Apps step by step<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4f9a4c6 elementor-widget elementor-widget-text-editor\" data-id=\"4f9a4c6\" 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><span class=\"TextRun SCXW53950977 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW53950977 BCX0\">Based on the design of the\u00a0<\/span><span class=\"NormalTextRun SCXW53950977 BCX0\">previous<\/span><span class=\"NormalTextRun SCXW53950977 BCX0\">\u00a0section, the main part to note is that all section headers look identical,\u00a0<\/span><span class=\"NormalTextRun SCXW53950977 BCX0\">only<\/span><span class=\"NormalTextRun SCXW53950977 BCX0\">\u00a0the text changes.\u00a0<\/span><span class=\"NormalTextRun SCXW53950977 BCX0\">This\u00a0<\/span><span class=\"NormalTextRun SCXW53950977 BCX0\">makes\u00a0<\/span><span class=\"NormalTextRun SCXW53950977 BCX0\">the perfect use case for a Power Apps<\/span><\/span><span class=\"TextRun SCXW53950977 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW53950977 BCX0\">\u00a0<\/span><span class=\"NormalTextRun SCXW53950977 BCX0\">component<\/span><\/span><span class=\"TextRun SCXW53950977 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW53950977 BCX0\">.\u00a0<\/span><span class=\"NormalTextRun SCXW53950977 BCX0\">We will\u00a0<\/span><span class=\"NormalTextRun SCXW53950977 BCX0\">build the header once, reuse it as many times as\u00a0<\/span><span class=\"NormalTextRun SCXW53950977 BCX0\">we\u00a0<\/span><span class=\"NormalTextRun ContextualSpellingAndGrammarErrorV2Themed SCXW53950977 BCX0\">need<\/span><span class=\"NormalTextRun SCXW53950977 BCX0\">\u00a0in the form.<\/span><\/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-7438508 elementor-widget elementor-widget-heading\" data-id=\"7438508\" 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: Create the Section Header Component<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-269092d elementor-widget elementor-widget-text-editor\" data-id=\"269092d\" 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><span class=\"TextRun SCXW236046664 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW236046664 BCX0\">Go to the\u00a0<\/span><\/span><span class=\"TextRun SCXW236046664 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW236046664 BCX0\">Components<\/span><\/span><span class=\"TextRun SCXW236046664 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW236046664 BCX0\">\u00a0section in Power Apps Studio (in the left panel, switch from Screens to Components). Click\u00a0<\/span><\/span><span class=\"TextRun SCXW236046664 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW236046664 BCX0\">New Component<\/span><\/span><span class=\"TextRun SCXW236046664 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW236046664 BCX0\">\u00a0and rename it<\/span><span class=\"NormalTextRun SCXW236046664 BCX0\">.<\/span><span class=\"NormalTextRun SCXW236046664 BCX0\">\u00a0<\/span><span class=\"NormalTextRun SCXW236046664 BCX0\">A\u00a0<\/span><span class=\"NormalTextRun SCXW236046664 BCX0\">good convention is to use a\u00a0<\/span><\/span><span class=\"TextRun SCXW236046664 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SpellingErrorV2Themed SCXW236046664 BCX0\">cmp<\/span><span class=\"NormalTextRun SCXW236046664 BCX0\">_<\/span><\/span><span class=\"TextRun SCXW236046664 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW236046664 BCX0\">\u00a0prefix, so something like\u00a0<\/span><\/span><span class=\"TextRun SCXW236046664 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SpellingErrorV2Themed SCXW236046664 BCX0\">cmp_SectionHeade<\/span><span class=\"NormalTextRun SpellingErrorV2Themed SCXW236046664 BCX0\">r<\/span><\/span><span class=\"TextRun SCXW236046664 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW236046664 BCX0\">\u00a0will work.<\/span><\/span><span class=\"EOP Selected SCXW236046664 BCX0\" data-ccp-props=\"{}\">\u00a0<\/span><img decoding=\"async\" class=\"alignnone size-medium wp-image-15020\" src=\"https:\/\/powergi.net\/wp-content\/uploads\/2026\/07\/download-1-600x506.png\" alt=\"\" width=\"600\" height=\"506\"><\/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-144dbe2 elementor-widget elementor-widget-heading\" data-id=\"144dbe2\" 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: Add a modern button inside the component<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1c5b9ce elementor-widget elementor-widget-text-editor\" data-id=\"1c5b9ce\" 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><span lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\">Inside the\u00a0component, insert a\u00a0<\/span><span lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\">modern Button control\u00a0(it can also be a classic button if you\u00a0prefer\u00a0but the modern Button is ideal here because\u00a0it\u00a0<\/span><span lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\">we can add an i<\/span><span lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\">con and a text label in a single control\u00a0very easily.<\/span><span data-ccp-props='{\"134233117\":false,\"134233118\":false,\"201341983\":0,\"335551550\":1,\"335551620\":1,\"335559685\":0,\"335559737\":0,\"335559738\":0,\"335559739\":160,\"335559740\":279}'>\u00a0<\/span><\/p><p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15030 size-medium\" src=\"https:\/\/powergi.net\/wp-content\/uploads\/2026\/07\/download-2-600x95.png\" alt=\"\" width=\"600\" height=\"95\" srcset=\"https:\/\/powergi.net\/wp-content\/uploads\/2026\/07\/download-2-600x95.png 600w, https:\/\/powergi.net\/wp-content\/uploads\/2026\/07\/download-2-768x121.png 768w, https:\/\/powergi.net\/wp-content\/uploads\/2026\/07\/download-2-18x3.png 18w, https:\/\/powergi.net\/wp-content\/uploads\/2026\/07\/download-2.png 819w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p><p><span data-contrast=\"auto\">Some properties to set on the button:<\/span><span data-ccp-props='{\"134233117\":false,\"134233118\":false,\"201341983\":0,\"335551550\":1,\"335551620\":1,\"335559685\":0,\"335559737\":0,\"335559738\":0,\"335559739\":160,\"335559740\":279}'>\u00a0<\/span><\/p><ul><li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"1\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"1\" data-aria-level=\"1\"><b><span data-contrast=\"auto\">Width:<\/span><\/b><span data-contrast=\"auto\">\u00a0<\/span><span data-contrast=\"auto\">Parent.Width<\/span><span data-ccp-props='{\"134233117\":false,\"134233118\":false,\"335559738\":0,\"335559739\":0}'>\u00a0<\/span><\/li><li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"1\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"2\" data-aria-level=\"1\"><b><span data-contrast=\"auto\">Height:<\/span><\/b><span data-contrast=\"auto\">\u00a0<\/span><span data-contrast=\"auto\">Parent.Height<\/span><span data-ccp-props='{\"134233117\":false,\"134233118\":false,\"335559738\":0,\"335559739\":0}'>\u00a0<\/span><\/li><li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"1\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"3\" data-aria-level=\"1\"><b><span data-contrast=\"auto\">Text:<\/span><\/b><span data-contrast=\"auto\">\u00a0To start, write something like\u00a0<\/span><span data-contrast=\"auto\">\u201cSection Header\u201d<\/span><span data-contrast=\"auto\">, we\u00a0will change this later.<\/span><span data-ccp-props='{\"134233117\":false,\"134233118\":false,\"335559738\":0,\"335559739\":0}'>\u00a0<\/span><\/li><li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"1\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"4\" data-aria-level=\"1\"><b><span data-contrast=\"auto\">Appearance:<\/span><\/b><span data-contrast=\"auto\">\u00a0Set to\u00a0<\/span><span data-contrast=\"auto\">Transparent<\/span><span data-contrast=\"auto\">\u00a0so it blends into your screen design<\/span><span data-ccp-props='{\"134233117\":false,\"134233118\":false,\"335559738\":0,\"335559739\":0}'>\u00a0<\/span><\/li><li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"1\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"5\" data-aria-level=\"1\"><b><span data-contrast=\"auto\">Icon:<\/span><\/b><span data-contrast=\"auto\">\u00a0Select a\u00a0<\/span><b><span data-contrast=\"auto\">ChevronRight<\/span><\/b><span data-contrast=\"auto\">\u00a0icon (pointing right = collapsed state)<\/span><span data-ccp-props='{\"134233117\":false,\"134233118\":false,\"335559738\":0,\"335559739\":0}'>\u00a0<\/span><\/li><\/ul>\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-8714981 elementor-widget elementor-widget-heading\" data-id=\"8714981\" 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: Add a thin separator rectangle<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3743852 elementor-widget elementor-widget-text-editor\" data-id=\"3743852\" 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><span data-contrast=\"auto\">This is just a design\u00a0decision,\u00a0we want each section to have some type of separator, so, below the button, insert a\u00a0<\/span><b><span data-contrast=\"auto\">Rectangle<\/span><\/b><span data-contrast=\"auto\">\u00a0control.\u00a0<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p><p><span data-contrast=\"auto\">Properties to set:<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p><ul><li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"2\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"1\" data-aria-level=\"1\"><b><span data-contrast=\"auto\">X:<\/span><\/b><span data-contrast=\"auto\">\u00a0<\/span><span data-contrast=\"auto\">0<\/span><span data-ccp-props='{\"134233117\":false,\"134233118\":false,\"335559738\":0,\"335559739\":0}'>\u00a0<\/span><\/li><li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"2\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"2\" data-aria-level=\"1\"><b><span data-contrast=\"auto\">Width:<\/span><\/b><span data-contrast=\"auto\">\u00a0<\/span><span data-contrast=\"auto\">Parent.Width<\/span><span data-ccp-props='{\"134233117\":false,\"134233118\":false,\"335559738\":0,\"335559739\":0}'>\u00a0<\/span><\/li><li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"2\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"3\" data-aria-level=\"1\"><b><span data-contrast=\"auto\">Height:<\/span><\/b><span data-contrast=\"auto\">\u00a0<\/span><span data-contrast=\"auto\">1<\/span><span data-contrast=\"auto\">\u00a0\u2014 keep it thin, just a line<\/span><span data-ccp-props='{\"134233117\":false,\"134233118\":false,\"335559738\":0,\"335559739\":0}'>\u00a0<\/span><\/li><li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"2\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"4\" data-aria-level=\"1\"><b><span data-contrast=\"auto\">Color:<\/span><\/b><span data-contrast=\"auto\">\u00a0Match your app\u2019s theme (e.g., purple or your brand color)<\/span> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-15044\" src=\"https:\/\/powergi.net\/wp-content\/uploads\/2026\/07\/download-6-600x303.png\" alt=\"\" width=\"600\" height=\"303\"><\/li><\/ul>\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-bd10756 elementor-widget elementor-widget-heading\" data-id=\"bd10756\" 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: Create a component variable for the toggle state<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bad9722 elementor-widget elementor-widget-text-editor\" data-id=\"bad9722\" 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><span data-contrast=\"auto\">Select the\u00a0<\/span><b><span data-contrast=\"auto\">button<\/span><\/b><span data-contrast=\"auto\">\u00a0inside the\u00a0component\u00a0and go to its\u00a0<\/span><b><span data-contrast=\"auto\">OnSelect<\/span><\/b><span data-contrast=\"auto\">\u00a0property. This is where the expand\/collapse logic lives. Add the following:<\/span><span data-ccp-props=\"{}\">\u00a0<\/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-8261e34 elementor-widget elementor-widget-code-highlight\" data-id=\"8261e34\" 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>Set(varCmp_ShowSection, !varCmp_ShowSection)\u00a0<\/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-be51a59 elementor-widget elementor-widget-heading\" data-id=\"be51a59\" 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: Create an Output Property to Expose the State<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6d1325e elementor-widget elementor-widget-text-editor\" data-id=\"6d1325e\" 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><span data-contrast=\"auto\">The app needs to know whether the user clicked a section header,\u00a0so we\u00a0need to expose it through a\u00a0<\/span><b><span data-contrast=\"auto\">custom output property<\/span><\/b><span data-contrast=\"auto\">.<\/span><span data-ccp-props='{\"134233117\":false,\"134233118\":false,\"201341983\":0,\"335551550\":1,\"335551620\":1,\"335559685\":0,\"335559737\":0,\"335559738\":0,\"335559739\":160,\"335559740\":279}'>\u00a0<\/span><\/p><p><span data-contrast=\"auto\">In the\u00a0component\u00a0panel, click\u00a0<\/span><b><span data-contrast=\"auto\">New Custom Property<\/span><\/b><span data-contrast=\"auto\">\u00a0and configure it:<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p><ul><li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"3\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"1\" data-aria-level=\"1\"><b><span data-contrast=\"auto\">Name:<\/span><\/b><span data-contrast=\"auto\">\u00a0<\/span><span data-contrast=\"auto\">ShowSection<\/span><span data-ccp-props='{\"134233117\":false,\"134233118\":false,\"335559738\":0,\"335559739\":0}'>\u00a0<\/span><\/li><li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"3\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"2\" data-aria-level=\"1\"><b><span data-contrast=\"auto\">Type:<\/span><\/b><span data-contrast=\"auto\">\u00a0Boolean<\/span><span data-ccp-props='{\"134233117\":false,\"134233118\":false,\"335559738\":0,\"335559739\":0}'>\u00a0<br><\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-15039\" src=\"https:\/\/powergi.net\/wp-content\/uploads\/2026\/07\/download-5-600x143.png\" alt=\"\" width=\"600\" height=\"143\" srcset=\"https:\/\/powergi.net\/wp-content\/uploads\/2026\/07\/download-5-600x143.png 600w, https:\/\/powergi.net\/wp-content\/uploads\/2026\/07\/download-5-768x183.png 768w, https:\/\/powergi.net\/wp-content\/uploads\/2026\/07\/download-5-18x4.png 18w, https:\/\/powergi.net\/wp-content\/uploads\/2026\/07\/download-5.png 936w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/li><\/ul>\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-405015c elementor-widget elementor-widget-heading\" data-id=\"405015c\" 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 6: Create an input property for the section name<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-236d489 elementor-widget elementor-widget-text-editor\" data-id=\"236d489\" 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><span data-contrast=\"auto\">Now\u00a0it\u2019s\u00a0time to make the section headers dynamic.\u00a0So,\u00a0let\u2019s\u00a0add an input property to the\u00a0component\u00a0so we can pass the name\u00a0from the app.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p><p><span data-contrast=\"auto\">Click\u00a0<\/span><b><span data-contrast=\"auto\">New Custom Property<\/span><\/b><span data-contrast=\"auto\">\u00a0and configure it:<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p><ul><li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"4\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"1\" data-aria-level=\"1\"><b><span data-contrast=\"auto\">Name:<\/span><\/b><span data-contrast=\"auto\">\u00a0<\/span><span data-contrast=\"auto\">SectionName<\/span><span data-ccp-props='{\"134233117\":false,\"134233118\":false,\"335559738\":0,\"335559739\":0}'>\u00a0<\/span><\/li><li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"4\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"2\" data-aria-level=\"1\"><b><span data-contrast=\"auto\">Description:<\/span><\/b><span data-contrast=\"auto\">\u00a0The display name of the section<\/span><span data-ccp-props='{\"134233117\":false,\"134233118\":false,\"335559738\":0,\"335559739\":0}'>\u00a0<\/span><\/li><li aria-setsize=\"-1\" data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"4\" data-list-defn-props='{\"335552541\":1,\"335559683\":0,\"335559684\":-2,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}' data-aria-posinset=\"3\" data-aria-level=\"1\"><b><span data-contrast=\"auto\">Type:<\/span><\/b><span data-contrast=\"auto\">\u00a0Text<\/span><span data-ccp-props='{\"134233117\":false,\"134233118\":false,\"335559738\":0,\"335559739\":0}'>\u00a0<\/span><\/li><li><b><span data-contrast=\"auto\">Direction:<\/span><\/b><span data-contrast=\"auto\">\u00a0Input<\/span><span data-ccp-props='{\"134233117\":false,\"134233118\":false,\"335559738\":0,\"335559739\":0}'>\u00a0<br><\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-15048\" src=\"https:\/\/powergi.net\/wp-content\/uploads\/2026\/07\/download-7-600x431.png\" alt=\"\" width=\"600\" height=\"431\"><\/li><\/ul><p>Click\u00a0<b style=\"font-style: inherit;\"><span data-contrast=\"auto\">Create<\/span><\/b><span style=\"font-style: inherit; font-weight: inherit; font-size: 16px;\" data-contrast=\"auto\">. Then go to the button\u2019s\u00a0<\/span><b style=\"font-style: inherit;\"><span data-contrast=\"auto\">Text<\/span><\/b><span style=\"font-style: inherit; font-weight: inherit; font-size: 16px;\" data-contrast=\"auto\">\u00a0property and set it to:<\/span><span style=\"font-style: inherit; font-weight: inherit; font-size: 16px;\" data-ccp-props=\"{}\">\u00a0<\/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-bcac9f7 elementor-widget elementor-widget-code-highlight\" data-id=\"bcac9f7\" 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>cmp_SectionHeader.SectionName\u00a0<\/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-03d6ecf elementor-widget elementor-widget-text-editor\" data-id=\"03d6ecf\" 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><span data-contrast=\"auto\">Now the button will display whatever section name is passed in from the app.<\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-15049\" src=\"https:\/\/powergi.net\/wp-content\/uploads\/2026\/07\/download-8-600x208.png\" alt=\"\" width=\"600\" height=\"208\"><\/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-18e0a0e elementor-widget elementor-widget-heading\" data-id=\"18e0a0e\" 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 7: Update the chevronicon dynamically<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-646fcde elementor-widget elementor-widget-text-editor\" data-id=\"646fcde\" 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><span data-contrast=\"auto\">Go to the button\u2019s\u00a0<\/span><b><span data-contrast=\"auto\">Icon<\/span><\/b><span data-contrast=\"auto\">\u00a0property and add a conditional formula so the chevron rotates based on the section state:<\/span><span data-ccp-props=\"{}\">\u00a0<\/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-0d1e2e6 elementor-widget elementor-widget-code-highlight\" data-id=\"0d1e2e6\" 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>If(varCmp_ShowSection, Icon.ChevronDown, Icon.ChevronRight)\u00a0<\/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-92adc66 elementor-widget elementor-widget-text-editor\" data-id=\"92adc66\" 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><span data-contrast=\"auto\">This is to show visually if the form is expanded or collapsed<\/span><\/p><p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-15053\" src=\"https:\/\/powergi.net\/wp-content\/uploads\/2026\/07\/download-9-600x156-1.webp\" alt=\"\" width=\"600\" height=\"156\"><\/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-ac49020 elementor-widget elementor-widget-heading\" data-id=\"ac49020\" 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 8: Build the form screen<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2285419 elementor-widget elementor-widget-text-editor\" data-id=\"2285419\" 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><span data-contrast=\"auto\">The controls,\u00a0containers\u00a0and layout for this step depend on your specific requirements. But to add the section headers, go to\u00a0\u00a0<\/span><b><span data-contrast=\"auto\">Insert &gt; Custom &gt;\u00a0cmp_SectionHeader<\/span><\/b><span data-contrast=\"auto\">.<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p><p><span data-contrast=\"auto\">With the component selected, you\u2019ll see your custom properties in the property panel. Set\u00a0<\/span><span data-contrast=\"auto\">SectionName<\/span><span data-contrast=\"auto\">\u00a0to the name of your first section, for example:<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p><div id=\"seology-cta-2\">\t\t<div data-elementor-type=\"section\" data-elementor-id=\"7283\" class=\"elementor elementor-7283\" 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\">Is your business ready for automation?<\/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\">Automate processes with Microsoft Power Platform.<\/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\/es\/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 data-contrast=\"none\">\u201cProject Overview\u201d<\/span><span data-ccp-props=\"{}\">\u00a0<\/span><\/p><p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15057 size-medium\" src=\"https:\/\/powergi.net\/wp-content\/uploads\/2026\/07\/download-10-600x379.png\" alt=\"\" width=\"600\" height=\"379\"><\/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-d1cc386 elementor-widget elementor-widget-heading\" data-id=\"d1cc386\" 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 9: Handle the Default State on App Load <\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-43385c1 elementor-widget elementor-widget-text-editor\" data-id=\"43385c1\" 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><span data-contrast=\"auto\">When the app first loads,\u00a0<\/span><span data-contrast=\"auto\">varCmp_ShowSection<\/span><span data-contrast=\"auto\">\u00a0is blank (no one has clicked yet), so all sections will\u00a0be collapsed\u00a0by default.\u00a0If you want\u00a0one or more\u00a0sections\u00a0to be\u00a0<\/span><b><span data-contrast=\"auto\">expanded by default<\/span><\/b><span data-contrast=\"auto\">,\u00a0we can add the following code to\u00a0the\u00a0<\/span><span data-contrast=\"auto\">Visible<\/span><span data-contrast=\"auto\"> property:<\/span><span data-ccp-props='{\"134233117\":false,\"134233118\":false,\"201341983\":0,\"335551550\":1,\"335551620\":1,\"335559685\":0,\"335559737\":0,\"335559738\":0,\"335559739\":160,\"335559740\":279}'>\u00a0<\/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-4b98009 elementor-widget elementor-widget-code-highlight\" data-id=\"4b98009\" 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>cmp_SectionHeader1.ShowSection || IsBlank(cmp_SectionHeader1.ShowSection)\u00a0<\/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-7929714 elementor-widget elementor-widget-text-editor\" data-id=\"7929714\" 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><span data-contrast=\"auto\">Also update the chevron icon logic in the component to handle the blank state the same way:<\/span><span data-ccp-props=\"{}\">\u00a0<\/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-a6ad8b1 elementor-widget elementor-widget-code-highlight\" data-id=\"a6ad8b1\" 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>If(varCmp_ShowSection || IsBlank(varCmp_ShowSection), Icon.ChevronDown, Icon.ChevronRight)<\/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-2ece191 elementor-widget elementor-widget-heading\" data-id=\"2ece191\" 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\">Tutorial Video: create collapsible forms in Power Apps<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-60fb66a elementor-widget elementor-widget-text-editor\" data-id=\"60fb66a\" 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><span class=\"TextRun SCXW115934102 BCX0\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"auto\"><span class=\"NormalTextRun SCXW115934102 BCX0\">Watch the full step-by-step\u00a0<\/span><span class=\"NormalTextRun SCXW115934102 BCX0\">walkthrough where Graciela shows the\u00a0<\/span><span class=\"NormalTextRun SCXW115934102 BCX0\">whole process<\/span><span class=\"NormalTextRun SCXW115934102 BCX0\">\u00a0of creating the\u00a0<\/span><span class=\"NormalTextRun SCXW115934102 BCX0\">component<\/span><span class=\"NormalTextRun SCXW115934102 BCX0\">\u00a0and the form layout inside the Power Apps studio.<\/span><\/span><span class=\"EOP Selected SCXW115934102 BCX0\" data-ccp-props=\"{}\">\u00a0<\/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-c3fbc31 elementor-widget elementor-widget-video\" data-id=\"c3fbc31\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings='{\"youtube_url\":\"https:\\\/\\\/youtu.be\\\/o9otxtljA4k?si=kbzZN6wAEs0R3m9i\",\"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-24682c0 elementor-widget elementor-widget-heading\" data-id=\"24682c0\" 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\">Build better Power Apps with PowerGI<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-63a59aa elementor-widget elementor-widget-text-editor\" data-id=\"63a59aa\" 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><span data-contrast=\"none\">At\u00a0<\/span><b><span data-contrast=\"none\">Power[GI]<\/span><\/b><span data-contrast=\"none\">\u00a0we can help you create forms and platforms that your team will\u00a0enjoy\u00a0using, we\u00a0bring a lot of experience in UX and UI concepts and things\u00a0we\u2019ve\u00a0learnt during\u00a0all of\u00a0our years with experience with Power Apps. Learn about our\u00a0<\/span><a href=\"https:\/\/powergi.net\/power-apps-consulting-services\/\"><span data-contrast=\"none\">Power Apps services<\/span><\/a><span data-contrast=\"none\">\u00a0or\u00a0<\/span><a href=\"https:\/\/powergi.net\/contact\/\"><span data-contrast=\"none\">contact us today.<\/span><\/a><span data-ccp-props='{\"134233117\":false,\"134233118\":false,\"201341983\":0,\"335551550\":1,\"335551620\":1,\"335559685\":0,\"335559737\":0,\"335559738\":0,\"335559739\":160,\"335559740\":279}'>\u00a0<\/span><\/p><p><span data-contrast=\"auto\">Are you ready to discover the joy of automation and take your apps to the next level?<\/span><\/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>When there are too many fields for a single form, users can have\u00a0a hard time\u00a0filling it out. Sometimes\u00a0it\u2019s\u00a0a good idea\u00a0to group fields in\u00a0sections\u00a0so all the related fields are in the same section,\u00a0and also\u00a0it may be\u00a0a good idea\u00a0to give users the option to collapse and expand the sections: this is when accordion forms are useful.\u00a0 This\u00a0blog [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":13506,"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":"a","footnotes":""},"categories":[155,81,174],"tags":[],"class_list":["post-13497","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-canvas-apps","category-power-apps-cat","category-power-platform-consulting"],"glossary_letter":"a","rank_math_title":"Collapsible Forms in Power Apps: Step-by-Step Accordion Guide","rank_math_description":"Learn how to create collapsible forms in Power Apps using accordion layouts to improve usability, organize fields, and optimize user experience.","rank_math_focus_keyword":"Collapsible Forms in Power Apps","_links":{"self":[{"href":"https:\/\/powergi.net\/es\/wp-json\/wp\/v2\/posts\/13497","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/powergi.net\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/powergi.net\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/powergi.net\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/powergi.net\/es\/wp-json\/wp\/v2\/comments?post=13497"}],"version-history":[{"count":59,"href":"https:\/\/powergi.net\/es\/wp-json\/wp\/v2\/posts\/13497\/revisions"}],"predecessor-version":[{"id":15079,"href":"https:\/\/powergi.net\/es\/wp-json\/wp\/v2\/posts\/13497\/revisions\/15079"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/powergi.net\/es\/wp-json\/wp\/v2\/media\/13506"}],"wp:attachment":[{"href":"https:\/\/powergi.net\/es\/wp-json\/wp\/v2\/media?parent=13497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/powergi.net\/es\/wp-json\/wp\/v2\/categories?post=13497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/powergi.net\/es\/wp-json\/wp\/v2\/tags?post=13497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}