1"use strict";(self.webpackChunkhomol_works=self.webpackChunkhomol_works||[]).push([[1338],{71606(e,o,t){t.r(o),t.d(o,{default:()=>s,metadata:()=>n});var n=t(98760),a=t(74848),l=t(28453);const r={authorsImageUrls:[void 0]};function i(e){const o={blockquote:"blockquote",br:"br",code:"code",img:"img",p:"p",pre:"pre",...(0,l.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(o.blockquote,{children:["\n",(0,a.jsx)(o.p,{children:"Modal windows and pop-ups are a staple of applications. Ever just needed to quickly make one in your PowerApp?"}),"\n"]}),"\n",(0,a.jsx)(o.p,{children:"Here is a quick and easy step-by-step for making a pop-up modal window on a screen in your PowerApp."}),"\n",(0,a.jsxs)(o.p,{children:["Let's assume we have an app screen that's collecting some survey data. Like so:\n",(0,a.jsx)(o.img,{src:"https://homol.work/img/blog/modal/start-screen.png",alt:"Start Screen"})]}),"\n",(0,a.jsx)(o.p,{children:"It would be nice if we could provide a little more information to explain the Account Number that is needed."}),"\n",(0,a.jsxs)(o.p,{children:["Insert a new Icon onto the screen and give it the Information image.\n",(0,a.jsx)(o.img,{src:"https://homol.work/img/blog/modal/info-icon.gif",alt:"Information Icon"})]}),"\n",(0,a.jsx)(o.p,{children:"Select your screen and add the following to the OnVisible event:"}),"\n",(0,a.jsx)(o.pre,{children:(0,a.jsx)(o.code,{className:"language-javascript",children:'UpdateContext({ ShowModal: false });\nUpdateContext({ ModalText: "" });\n'})}),"\n",(0,a.jsx)(o.p,{children:"Next, select your new information icon and add the following to the OnSelect event:"}),"\n",(0,a.jsx)(o.pre,{children:(0,a.jsx)(o.code,{className:"language-javascript",children:'UpdateContext({\n ModalText:\n "Your account number is located at the top right of your most recent bill.",\n});\nUpdateContext({ ShowModal: true });\n'})}),"\n",(0,a.jsxs)(o.p,{children:["Insert a label onto the screen and adjust it's width and height to cover the entire screen. Name this label ",(0,a.jsx)(o.code,{children:"ModalBackground"})," and remove it's Text.",(0,a.jsx)(o.br,{}),"\n",(0,a.jsx)(o.img,{src:"https://homol.work/img/blog/modal/modal-background.gif",alt:"Modal Background Label"})]}),"\n",(0,a.jsxs)(o.p,{children:["Next, set the Fill property of this background label to ",(0,a.jsx)(o.code,{children:"RGBA(169,169,169,.5)"}),". It should look like this:\n",(0,a.jsx)(o.img,{src:"https://homol.work/img/blog/modal/modal-bg-gray.png",alt:"Gray Modal Background"})]}),"\n",(0,a.jsxs)(o.p,{children:["Add a second label and name it ",(0,a.jsx)(o.code,{children:"ModalBox"}),". Center it's horizontal alignment and make the vertical alignment in the middle. Additionally, give it a Fill of White, center align its text and give it some extra padding. It should look something like this when you're done.\n",(0,a.jsx)(o.img,{src:"https://homol.work/img/blog/modal/modal-box-1.png",alt:"Modal Textbox"})]}),"\n",(0,a.jsxs)(o.p,{children:["Set the Text property of the 'ModalBox' label to ",(0,a.jsx)(o.code,{children:"ModalText"}),"."]}),"\n",(0,a.jsxs)(o.p,{children:["Add a Cancel Icon to the screen and place it in the top right corner of the ",(0,a.jsx)(o.code,{children:"ModalBox"})," label. Name it ",(0,a.jsx)(o.code,{children:"ModalClose"}),". Now you should have something like this:\n",(0,a.jsx)(o.img,{src:"https://homol.work/img/blog/modal/modal-box-2.png",alt:"Modal Textbox with Close"})]}),"\n",(0,a.jsxs)(o.p,{children:["Put the following code in the OnSelect event of ",(0,a.jsx)(o.code,{children:"ModalClose"}),":"]}),"\n",(0,a.jsx)(o.pre,{children:(0,a.jsx)(o.code,{className:"language-javascript",children:'UpdateContext({ ShowModal: false });\nUpdateContext({ ModalText: "" });\n'})}),"\n",(0,a.jsxs)(o.p,{children:["Group the 3 new controls you have added and name the group ",(0,a.jsx)(o.code,{children:"Modal"}),".\n",(0,a.jsx)(o.img,{src:"https://homol.work/img/blog/modal/modal-group.png",alt:"Modal Group"})]}),"\n",(0,a.jsxs)(o.p,{children:["Set the Visible property of the ",(0,a.jsx)(o.code,{children:"Modal"})," group to ",(0,a.jsx)(o.code,{children:"ShowModal"}),"."]}),"\n",(0,a.jsxs)(o.p,{children:["If you've done everything, you're modal should look and work like so:\n",(0,a.jsx)(o.img,{src:"https://homol.work/img/blog/modal/modal-in-action.gif",alt:"Mod
1al in Action"})]}),"\n",(0,a.jsx)(o.p,{children:"This is a quick and painless process to have modals at your disposal in your next PowerApp. Happy low-coding!"})]})}function s(e={}){const{wrapper:o}={...(0,l.R)(),...e.components};return o?(0,a.jsx)(o,{...e,children:(0,a.jsx)(i,{...e})}):i(e)}t.d(o,["assets",0,r,"contentTitle",0,void 0,"frontMatter",0,{id:"powerappmodal20201223",title:"How to make a modal window on a PowerApp screen",author:"Mike Homol",author_title:"Principal Consultant @ ThreeWill",author_url:"https://github.com/mhomol",author_image_url:"https://avatars2.githubusercontent.com/u/680566?s=460&v=4",tags:["M365","PowerPlatform","PowerApps","TipsAndTricks"]},"toc",0,[]])},28453(e,o,t){t.d(o,{R:()=>r,x:()=>i});var n=t(96540);const a={},l=n.createContext(a);function r(e){const o=n.useContext(l);return n.useMemo(function(){return"function"==typeof e?e(o):{...o,...e}},[o,e])}function i(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:r(e.components),n.createElement(l.Provider,{value:o},e.children)}},98760(e){e.exports=JSON.parse('{"permalink":"/blog/2020/12/23/Power-App-Modal","source":"@site/blog/2020-12-23-Power-App-Modal.md","title":"How to make a modal window on a PowerApp screen","description":"Modal windows and pop-ups are a staple of applications. Ever just needed to quickly make one in your PowerApp?","date":"2020-12-23T00:00:00.000Z","tags":[{"inline":true,"label":"M365","permalink":"/blog/tags/m-365"},{"inline":true,"label":"PowerPlatform","permalink":"/blog/tags/power-platform"},{"inline":true,"label":"PowerApps","permalink":"/blog/tags/power-apps"},{"inline":true,"label":"TipsAndTricks","permalink":"/blog/tags/tips-and-tricks"}],"readingTime":2.11,"hasTruncateMarker":false,"authors":[{"name":"Mike Homol","title":"Principal Consultant @ ThreeWill","url":"https://github.com/mhomol","imageURL":"https://avatars2.githubusercontent.com/u/680566?s=460&v=4","key":null,"page":null}],"frontMatter":{"id":"powerappmodal20201223","title":"How to make a modal window on a PowerApp screen","author":"Mike Homol","author_title":"Principal Consultant @ ThreeWill","author_url":"https://github.com/mhomol","author_image_url":"https://avatars2.githubusercontent.com/u/680566?s=460&v=4","tags":["M365","PowerPlatform","PowerApps","TipsAndTricks"]},"unlisted":false,"prevItem":{"title":"SharePoint Theming Cheat Sheet","permalink":"/blog/2021/03/12/sharepoint-theme-cheat-sheet"},"nextItem":{"title":"ALWAYS use Disconnect-PnPOnline","permalink":"/blog/2020/09/24/Disconnect-PnPOnline"}}')}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.