{"id":3501,"date":"2024-05-03T11:52:54","date_gmt":"2024-05-03T11:52:54","guid":{"rendered":"https:\/\/poiseddevelopers.com\/reality-tech\/?p=3501"},"modified":"2024-05-14T05:15:12","modified_gmt":"2024-05-14T05:15:12","slug":"create-a-responsive-container-based-popup-dialog-box-in-power-apps","status":"publish","type":"post","link":"https:\/\/poiseddevelopers.com\/reality-tech\/create-a-responsive-container-based-popup-dialog-box-in-power-apps\/","title":{"rendered":"Create a Responsive Container-based Popup Dialog Box in Power Apps"},"content":{"rendered":"
\n
\n
\n

Creating a responsive container-based popup dialog box in Power Apps involves designing a dynamic and adaptable dialog box that adjusts its size and layout based on the content and screen size. This approach typically\u00a0<\/span>utilizes<\/span>\u00a0container controls to organize and structure the dialog box elements. Containers offer flexibility in terms of layout and control placement compared to traditional popup forms<\/span><\/span>.<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n

Step 1:<\/strong>\u00a0Add a new screen in PowerApps and include a vertical gallery connected to your data source. In the screenshot below, display the data with three columns: \u2018Project Name,\u2019 \u2018Assigned to,\u2019 and \u2018Submitting Date.\u2019 Add the edit and\u00a0<\/span>delete<\/span> icon in the gallery1<\/span><\/span><\/p>\n

\"img\"<\/p>\n

Step 2:<\/span>\u00a0<\/span><\/strong>Add the Delete and Edit Icon.<\/span><\/span>\u00a0<\/span>
<\/span>Add the formula below to the\u00a0<\/span>OnSelect<\/span>\u00a0property of the Delete\u00a0<\/span>icon<\/span><\/span>\u00a0<\/span><\/p>\n

\"img\"<\/p>\n

Set(varDialog,true)<\/p>\n

\"img\"<\/p>\n

Step 3:<\/span><\/span><\/strong>\u00a0Click on Screen1 and insert the\u00a0<\/span>Vertical\u00a0<\/span>container. Add the variable to the Visible property of the\u00a0<\/span>Vertical\u00a0<\/span>container. Set the\u00a0<\/span>Vertical\u00a0<\/span>container\u2019s height and width according to the parent size.<\/span><\/span><\/p>\n

\"img\"<\/p>\n

Step 4:\u00a0<\/span><\/span><\/strong>Click on Container4 and add a new vertical container. Adjust the height and width according to the screen, then on the right side Justify (vertically) and align (horizontally) it in the centre.<\/span><\/span><\/p>\n

\"jm\"<\/p>\n

Step 5:\u00a0<\/span><\/span><\/strong>Click on Container 5 and add the Cancel icon and Text\u00a0<\/span>label<\/span>. Click on the Cancel button, select the\u00a0<\/span>OnSelect<\/span>\u00a0property, and enter the formula below. Then, add the text to the Text label.<\/span><\/span>\u00a0<\/span><\/p>\n

\"ghfc\"<\/p>\n

Step 6:\u00a0<\/span><\/span><\/strong>Next, click on Container5 and add a horizontal container.\u00a0<\/span>Add the 2 buttons in the horizontal container<\/span>, set their positions<\/span>\u00a0to\u00a0<\/span>center<\/span>\u00a0horizontally<\/span>, and add a gap between the two buttons.<\/span><\/span><\/p>\n

\u00a0\r\n\"seg\" \"fgnf\"\r\n\r\n<\/pre>\n
Step 7:\u00a0<\/span><\/span><\/strong>Add the\u00a0<\/span>following\u00a0<\/span>formula to the\u00a0<\/span>OnSelect<\/span>\u00a0property of the button<\/span>\u00a0\u201cYes\u201d and \u201cNo\u201d\u00a0<\/span>buttons<\/span>\u00a0respectively<\/span>.<\/span><\/span>\u00a0<\/span><\/p>\n
On the Yes button add the below formula:<\/span><\/span>\u00a0<\/span><\/p>\n
Remove('Project Details',Gallery3.Selected);Set(VarDialog,false);Notify(\"Item has been deleted\",NotificationType.Information,30000)<\/code><\/pre>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Project details replace with your data list.<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
On the No button add the below formula:<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Set(VarDialog,false)\r\n<\/code> \"htrnh\" Step 8<\/span><\/span><\/strong>:<\/strong>\u00a0<\/span><\/span>Click on the\u00a0<\/span>delete<\/span>\u00a0button to display the popup. If you wish to\u00a0<\/span>delete<\/span>\u00a0the item, click the \u2018Yes\u2019 button, and a notification will appear saying \u2018Item has been deleted.<\/span><\/span>\u00a0<\/span><\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
Step 8<\/span><\/span><\/strong>:<\/strong>\u00a0<\/span><\/span>Click on the\u00a0<\/span>delete<\/span>\u00a0button to display the popup. If you wish to\u00a0<\/span>delete<\/span>\u00a0the item, click the \u2018Yes\u2019 button, and a notification will appear saying \u2018Item has been deleted.<\/span><\/span>\u00a0<\/span><\/span><\/p>\n
\"img\"<\/p>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Step 9:\u00a0<\/span><\/span><\/strong>Click on the Edit button, create a new variable,<\/span>\u00a0and add the formula on O<\/span>nselect<\/span>\u00a0property.<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
EditForm(Form1);Set(VarDialogedit,true)\r\n<\/code> \"dsv\"<\/pre>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Step 10:<\/strong>\u00a0Click on Screen1 and add a new vertical container. Set the height and width according to the parent size. Also, set the variable in the Visible property of the vertical container.<\/span><\/span>\u00a0<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
VarDialogedit\r\n\r\n<\/code> \"fb\"<\/pre>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Step 11:<\/strong>\u00a0Click on the Container and insert a new vertical container. Adjust the justification (vertical) and alignment (horizontal) to centre.<\/span><\/span>\u00a0<\/span>
<\/span>Click on Container10, add the cancel icon, select the\u00a0<\/span>OnSelect<\/span>\u00a0property, and enter the formula below.<\/span><\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Set(VarDialogedit,false)<\/code><\/p>\n
\"igg\"<\/p>\n
Step 12:<\/strong>\u00a0<\/span><\/span>Click on Container 10 and add the Edit form, connecting the data with the data list.<\/span><\/span>\u00a0<\/span><\/p>\n
\"img\"<\/p>\n
Step 13:<\/strong>\u00a0Click on Container10 and add a horizontal container. Include two new buttons and adjust their sizes according to the form size. Write the formula below for the Cancel button.<\/span><\/span>\u00a0<\/span><\/p>\n
Set(VarDialogedit,false)<\/code> \r\n\"cvf\"<\/pre>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Step 14:<\/strong>\u00a0Click on the\u00a0<\/span>OnSelect<\/span>\u00a0property of the Save button and add the formula.<\/span><\/span>\u00a0<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
SubmitForm(Form1)<\/code>\r\n\r\n\r\n\"gm\"<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
<\/pre>\n
\n
\n
\n
\n
\n
\n
\n
\n
\nStep 15:<\/strong>\u00a0Click on Form1, select the\u00a0<\/span>OnSuccess<\/span>\u00a0property, and write the formula. When the user edits any column and clicks the Save button, display a notification for 3 seconds\u00a0<\/span>indicating<\/span>\u00a0that the item has been updated successfully.<\/span><\/span>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Set(VarDialogedit,false);Notify(\"Item has been updated <\/code>\r\n\r\n\r\n\"fxdbd\"\r\n\r\nStep 16:<\/strong>\u00a0Click on the edit button to\u00a0<\/span>modify<\/span>\u00a0details according to requirements. After making the necessary changes, click on the save button to update the column values.<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\n
\n
\n
\n
\n
\n
\"db\"<\/div>\n
In conclusion, creating a responsive container-based popup dialog box in Power Apps involves designing a dynamic and adaptable dialog box that adjusts its size and layout based on the content and screen size. By\u00a0<\/span>utilizing<\/span>\u00a0container controls like the Group control, developers can organize and structure the dialog box elements effectively. Key considerations include ensuring responsive design, accommodating dynamic content, implementing show\/hide logic, optional use of animations for enhanced user experience, and handling user input if\u00a0<\/span>required<\/span>. This approach allows for a user-friendly experience across various devices and screen sizes in Power Apps.<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Creating a responsive container-based popup dialog box in Power Apps involves designing a dynamic and adaptable dialog box that adjusts its size and layout based on the content and screen size. This approach typically\u00a0utilizes\u00a0container controls to organize and structure the dialog box elements. Containers offer flexibility in terms of layout and control placement compared to […]<\/p>\n","protected":false},"author":1,"featured_media":3502,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-3501","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\/3501","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/comments?post=3501"}],"version-history":[{"count":6,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/posts\/3501\/revisions"}],"predecessor-version":[{"id":3538,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/posts\/3501\/revisions\/3538"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/media\/3502"}],"wp:attachment":[{"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/media?parent=3501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/categories?post=3501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/tags?post=3501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}