{"id":515,"date":"2024-02-14T10:52:16","date_gmt":"2024-02-14T10:52:16","guid":{"rendered":"https:\/\/poiseddevelopers.com\/reality-tech\/?p=515"},"modified":"2024-04-11T12:55:46","modified_gmt":"2024-04-11T12:55:46","slug":"part-1-make-power-apps-custom-controls-form-responsive-using-containers","status":"publish","type":"post","link":"https:\/\/poiseddevelopers.com\/reality-tech\/part-1-make-power-apps-custom-controls-form-responsive-using-containers\/","title":{"rendered":"Part \u2013 1 Make Power Apps Custom Controls Form Responsive Using Containers"},"content":{"rendered":"<h4>What is the responsive Power App form?<\/h4>\n<p>Responsive Power App forms are made to be viewed and interacted with on a variety of devices, offering a consistent and intuitive user experience irrespective of screen size or quality. This is achieved using features and design strategies. Usually, responsive design concepts and Power Apps\u2019 ability to dynamically optimize the form layout are used to achieve this adaptability.<\/p>\n<h4>Essential Steps for Implementing Responsive Applications<\/h4>\n<p>Follow these steps to set up the form responsiveness:<\/p>\n<p>1. Open the power apps and click on the setting.<\/p>\n<p>2. Go into the display settings and turn off the\u00a0<strong>\u201cScale to fit\u201d<\/strong>\u00a0Make sure that\u00a0<strong>\u201cLock Orientation\u201d<\/strong>\u00a0and\u00a0<strong>\u201cLock Aspect ratio\u201d<\/strong>\u00a0are disabled.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-532 size-full\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-01-1.webp\" alt=\"img-01\" width=\"700\" height=\"713\" srcset=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-01-1.webp 700w, https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-01-1-295x300.webp 295w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Responsive Form with individual controls.<\/strong><\/p>\n<p><strong>Step 1:<\/strong>\u00a0Click on the \u201cInsert\u201d icon and add the Text label property as shown in the below image. And Adjust label name according to the requirement and adjust the height and width of the label. Also changes the text as per the requirement.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-535 size-full\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-02-1.webp\" alt=\"img-02\" width=\"720\" height=\"454\" srcset=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-02-1.webp 720w, https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-02-1-300x189.webp 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-536 size-full\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-03-1.webp\" alt=\"img-03\" width=\"1024\" height=\"478\" srcset=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-03-1.webp 1024w, https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-03-1-300x140.webp 300w, https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-03-1-768x359.webp 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Step 2<\/strong>: Select the \u201cInsert\u201d button displayed in the image below and opt for the Vertical Container.<\/p>\n<ul>\n<li>We utilize the vertical container to arrange all controls sequentially, facilitating the submission of records into the data source. This arrangement allows for multiple controls to be organized vertically on the screen, enabling a smoother process for submitting records.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-540 size-full\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-04-1.webp\" alt=\"img-04\" width=\"321\" height=\"547\" srcset=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-04-1.webp 321w, https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-04-1-176x300.webp 176w\" sizes=\"auto, (max-width: 321px) 100vw, 321px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Step 3<\/strong>: Adjust the container\u2019s X and Y position according to specific requirements. This flexibility allows for customization based on individual needs. Set the following steps based on your unique requirements.<\/p>\n<ul>\n<li>X position is 0<\/li>\n<li>Y Position is Lbl_Screen_Header.Y +Lbl_Screen_Header.Height<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-541 size-full\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-05-1.webp\" alt=\"img-05\" width=\"1024\" height=\"395\" srcset=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-05-1.webp 1024w, https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-05-1-300x116.webp 300w, https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-05-1-768x296.webp 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Step 4<\/strong>: Adjust the width and height of vertical container to fit the entire screen area. Ensure that the height and width adjustments align with the screen dimensions for optimal utilization.<\/p>\n<p><strong>Width:<\/strong>\u00a0App.Width<\/p>\n<p><strong>Height:<\/strong>\u00a0App.Height \u2013 Lbl_Screen_Header.Height<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-544 size-full\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-06-1.webp\" alt=\"img-06\" width=\"1024\" height=\"391\" srcset=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-06-1.webp 1024w, https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-06-1-300x115.webp 300w, https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-06-1-768x293.webp 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Step 5<\/strong>: Place a horizontal container within the vertical container to build the form with labels followed by text inputs in two parallel columns. This design will allow labels to be displayed side by side with text input areas, thus generating two columns within the form.<\/p>\n<ul>\n<li>When the horizontal container is added within the vertical container, it has the same width and height as the vertical container. Disable the Flexible Height option and provide a specific height based on our requirements. Set the height to 80 in this example to meet our specific needs.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-545 size-full\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-07-1.webp\" alt=\"img-07\" width=\"1024\" height=\"405\" srcset=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-07-1.webp 1024w, https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-07-1-300x119.webp 300w, https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-07-1-768x304.webp 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Step 6<\/strong>: Insert a label named \u201cEmployee Name\u201d and a text input field for the employee\u2019s name within the horizontal container.<\/p>\n<ul>\n<li>Adjust the label control properties as below.<\/li>\n<li>Flexible Width: Turn On.<\/li>\n<li>\u00a0Align in Container: Custom and Stretch.<\/li>\n<li>Ensure that for the label, the flexible width is enabled, and align it within the container by stretching it to match the container\u2019s height, as illustrated in the provided image. Additionally, add another label named \u201cPosition Title\u201d along with its respective text input, aligning them accordingly within the container.<\/li>\n<li>While adding the text label, ensure the selected option for alignment within the container is set to \u201cStretch.\u201d For all text input controls,<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-547 size-full\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-08-1.webp\" alt=\"img-08\" width=\"1024\" height=\"355\" srcset=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-08-1.webp 1024w, https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-08-1-300x104.webp 300w, https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-08-1-768x266.webp 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li>While adding the text input label, ensure the selected option for alignment within the container is set to \u201cCenter.\u201d For all text input controls.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-552 size-full\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-09-1.webp\" alt=\"img-09\" width=\"1024\" height=\"413\" srcset=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-09-1.webp 1024w, https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-09-1-300x121.webp 300w, https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-09-1-768x310.webp 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Step 7<\/strong>: Apply left and right padding to the container according to the desired outcome, ensuring that all controls are centered. Utilize the gap property to adjust the controls uniformly. Upon applying the Wrap property enable, the controls might shift upwards; thus, adjust the vertical alignment to center them based on the image provided.<\/p>\n<ul>\n<li>Padding Left and Right: 30<\/li>\n<li>Wrap toggle: On<\/li>\n<li>Align (Vertical): Center<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-553 size-full\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-10.webp\" alt=\"img-10\" width=\"1024\" height=\"355\" srcset=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-10.webp 1024w, https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-10-300x104.webp 300w, https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-10-768x266.webp 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Step 8<\/strong>: Implement logic for the height of the horizontal container based on screen sizes denoted by specific numbers:<\/p>\n<ul>\n<li>Mobile: Size 1<\/li>\n<li>Tablet: Sizes 2 and 3<\/li>\n<li>Desktop: Size 4<\/li>\n<\/ul>\n<p>The current static height provided for Container 3 is 80. Adjust the logic for the horizontal container\u2019s height considering these screen size specifications.<\/p>\n<pre lang=\"php\">1| If(Screen1.Size&lt;4,Lbl_EmployeeName.Height +TextInput_EmployeeName.Height +Lbl_PositionTitle.Height+Txtinput_PositionTitle.Height + 35,80)<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-558 size-full\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-11.webp\" alt=\"img-11\" width=\"1024\" height=\"369\" srcset=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-11.webp 1024w, https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-11-300x108.webp 300w, https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-11-768x277.webp 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Step 9<\/strong>: Upon minimizing the browser window, observe how all controls automatically adapt and adjust according to the screen size, ensuring optimal responsiveness.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-564 size-full\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-12.webp\" alt=\"img-12\" width=\"604\" height=\"632\" srcset=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-12.webp 604w, https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-12-287x300.webp 287w\" sizes=\"auto, (max-width: 604px) 100vw, 604px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Step 10<\/strong>: To incorporate additional controls like the ones above, insert another horizontal container within the primary vertical container. Subsequently, add corresponding labels and text inputs as per your specific requirements to maintain consistency with the existing setup.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-565 size-full\" src=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-13.webp\" alt=\"img-13\" width=\"620\" height=\"630\" srcset=\"https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-13.webp 620w, https:\/\/poiseddevelopers.com\/reality-tech\/wp-content\/uploads\/2024\/03\/Img-13-295x300.webp 295w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is the responsive Power App form? Responsive Power App forms are made to be viewed and interacted with on a variety of devices, offering a consistent and intuitive user experience irrespective of screen size or quality. This is achieved using features and design strategies. Usually, responsive design concepts and Power Apps\u2019 ability to dynamically [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":520,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-515","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-power-apps"],"acf":[],"_links":{"self":[{"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/posts\/515","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/comments?post=515"}],"version-history":[{"count":13,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/posts\/515\/revisions"}],"predecessor-version":[{"id":2810,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/posts\/515\/revisions\/2810"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/media\/520"}],"wp:attachment":[{"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/media?parent=515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/categories?post=515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/tags?post=515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}