Generally, when people set their out of office in outlook, they provide a list of several people to contact regarding all the different projects they are associated with. As a starting point, the current Out of Office<\/strong> app only allows users to select one person to contact during their out of office period. Let\u2019s extend that to:<\/p>\n To follow along with this tutorial, please go to https:\/\/web.powerapps.com<\/a> and download the latest version of the Out of Office<\/strong> app, or download the fully finished app here<\/a>\u00a0<\/p>\n \u00a0<\/p>\n At a high level, here\u2019s what we\u2019re going to do to the\u00a0app:<\/p>\n Let\u2019s start at the top: rewiring the \u2018CreateContactInfoScreen\u2019 <\/strong>screen.<\/p>\n While in the PowerApps editor, navigate to the \u2018CreateContactInfoScreen\u2019<\/strong>. Within the \u2018ContactInfo_Contacts\u2019 <\/strong>group, delete the items highlighted in the image below. These controls must be deleted to make room for a gallery which will store a collection of people to contact during the user\u2019s out of office period.<\/p>\n Next, insert a blank vertical gallery in the newly open space. Before moving forward, duplicate the screen. It will serve as a basis for the second part of this extension.<\/p>\n On the original \u2019CreateContactInfoScreen<\/strong>\u2019 we will be using the new gallery to allow users to select their points of contact for their out of office message. Select said gallery and set these properties as follows:<\/p>\n Insert a button in the gallery and set its properties as follows:<\/p>\n \u2019ThoseToContact<\/strong>\u2019 is a collection which stores the people the user has selected as points of contact during their out of office period. The OnSelect logic we\u2019ve created above allows a user to select or deselect a person into or out of the \u2018ThoseToContact<\/strong>\u2019 collection. Style is added in the Color\/Fill properties of the button to provide additional clarity to the user of which people are in the \u2018ThoseToContact\u2019<\/strong> collection.<\/p>\n The final step on this screen is rewiring the \u2018Next\u2019 button. Select it and change its properties as follows:<\/p>\n \u2018MessageContacts<\/strong>\u2019 is a collection which arranges each selected person (in \u2018ThoseToContact\u2019<\/strong>) with their respective part of the out of office message. The \u2018EmailURL<\/strong>\u2019 field is a deep link to each person\u2019s email address. The \u2018Message\u2019 <\/strong>field is their part of the out of office message. Don\u2019t worry about the open <li> tag in \u2018EmailURL<\/strong>\u2019, we\u2019ll be closing it in the next screen when we learn how to fill out the \u2018Message<\/strong>\u2019 column.<\/p>\n The DisplayMode property is adjusted so that the button will be disabled if the user hasn\u2019t selected anyone to include in their referral message.<\/p>\n With those few changes, the extension is halfway done.<\/p>\n Navigate to the screen we duplicated in the previous section (by default, it should be named \u2018CreateContactInfoScreen_1<\/strong>\u2019). Like the previous screen, the bulk of the work here involves manipulating the gallery. Select it and set:<\/p>\n Recall that \u2018ThoseToContact<\/strong>\u2019 is the collection we created on the previous screen to store the points of contact a user wants to set in their out of office message. This gallery then, allows the user to see those people and provide a message for each.<\/p>\n Add a button, 2 labels, an \u2018X\u2019 icon, and a text input control to the gallery. The button is for aesthetic purposes only and will serve as a background \u201ccontainer\u201d for the other items. Make sure the button fills the height\/width of the gallery template and that it sits behind every other control. The rest of the properties for each of these controls is as follows:<\/p>\n TextInput:<\/strong><\/p>\n X Icon:<\/strong><\/p>\n The two properties highlighted in red and reproduced in text are the only ones significant to the functionality of the extension. Every other property listed is only for style or content.<\/p>\n The OnChange property of the \u2018TextInput<\/strong>\u2019 control is what writes the proper message to the proper user in the \u2018MessageContacts<\/strong>\u2019 field. We wrap the logic inside an UpdateIf<\/strong> function so that only the row with MessageID = ThisItem.id is overwritten. You\u2019ll also notice that the open <li> tag is closed here. The Default property is blanked so it\u2019s clear that no message is provided for that person.<\/p>\n The OnSelect property of the \u2018X\u2019 icon is removing that person from both the \u2018MessageContacts\u2019 collection and the \u2018ThoseToContact<\/strong>\u2019 collection. Removal from \u2018MessageContacts<\/strong>\u2019 is necessary because the gallery on this screen pulls from that collection, so without this removal, that person would still be visible in the gallery. Removal from \u2018ThoseToContact\u2019<\/strong> is necessary because this collection is used to form the entirety of the out of office message, so failure to remove the person from this collection would result in a wrong\/extra point of contact in the message.<\/p>\n Lastly, the OnSelect & DisplayMode properties of the \u2018Next\u2019 button on this screen needs to be modified. Select the button and in the OnSelect property make the proper modifications from the original logic (boxed in red) to the new logic (boxed in green):<\/p>\n Original Logic:<\/strong><\/p>\n New Logic:<\/strong><\/p>\n Original Logic:<\/strong><\/p>\n New Logic:<\/strong><\/p>\n For the DisplayMode property:<\/p>\n The first piece of the new OnSelect functionality sets any blank user specific messages to a generic \u201cregarding general inquires\u201d message. It then takes the \u2018MessageContacts<\/strong>\u2019 collection containing the individual \u2018person pieces\u2019 of the out of office message, and concatenates them down into one long string and stores it in the Regarding <\/strong>variable. The latter piece of the new functionality then amends that string (Regarding<\/strong>) into the pre existing message generation logic. This message will be presented to the user for review on the final \u2018CreateReviewScreen<\/strong>\u2019.<\/p>\n The DisplayMode functionality ensures that a user must set at least one point of contact in their out of office message before initializing it.<\/p>\n Now that we have finished the extension exercise, let\u2019s recap what we just did.<\/p>\n The point of this exercise was to extend the Out of Office <\/strong>app to allow users to set multiple points of contact in their out of office message. To do so, we created two collections: \u2018ThoseToContact<\/strong>\u2019 and \u2018MessageContacts<\/strong>\u2019. \u2018ThoseToContact<\/strong>\u2019 is made up of people selected from the gallery we made in our first screen. As an app user selects\/deselects a person in that gallery, they are added\/removed from \u2018ThoseToContact<\/strong>\u2019. \u2018MessageContacts<\/strong>\u2019 starts being built in the OnSelect property of the Next button on that same screen. It takes all of the points of contact in \u2018ThoseToContact<\/strong>\u2019 and creates a table where each row contains the email address of a single point of contact and an (initially) blank \u2018regarding message\u2019.<\/p>\n In the second screen, the blank message field gets updated by the user from the gallery. When the text value of the \u2018TextInputBox<\/strong>\u2019 is changed, the message field of it\u2019s respective row in \u2018MessageContacts<\/strong>\u2019 is updated to reflect that change. For any regarding messages left blank, we populate it with a precanned message. Finally, we modified the logic in the Next button on this screen to concatenate \u2018MessageContacts<\/strong>\u2019 into a single string which we then amended to the logic which generates the full out of office message.<\/p>\n Learn how to extend upon the Out of Office app to allow users to set multiple points of contact in their out of office message<\/p>\n","protected":false},"author":122,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ms_queue_id":[],"ep_exclude_from_search":false,"_classifai_error":"","_classifai_text_to_speech_error":"","_alt_title":"","ms-ems-related-posts":[],"footnotes":""},"audience":[3378],"content-type":[3423],"job-role":[],"product":[3473],"property":[],"topic":[],"coauthors":[2137],"class_list":["post-120","post","type-post","status-publish","format-standard","hentry","audience-it-professional","content-type-tips-and-guides","product-power-apps"],"yoast_head":"\n\n
![\"Navigation\"](\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/bb74aabf-7014-46ce-8fb3-7ef554334f04.png\" "\\"Navigation\\"")
<\/a><\/h2>\nModifying the Out of Office App<\/h2>\n
\n
\n
\n
Rewiring the Create Contact Info Screen:<\/h2>\n
![\"1DeleteThisStuff\"](\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/5e728bc3-1260-4493-9ae8-68c3d9efb793.png\" "\\"1DeleteThisStuff\\"")
<\/a><\/p>\n\nItems = UserCollect\nWrapCount = 2<\/pre>\n
![\"2AddGallery\"](\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/9028b6de-611e-4022-b4c0-5494cc865765.png\" "\\"2AddGallery\\"")
<\/a><\/p>\n\nText = ThisItem.Name\nOnSelect = If(!(ThisItem in ThoseToContact), Collect(ThoseToContact, ThisItem), Remove(ThoseToContact, ThisItem))\nColor = If(!(ThisItem in ThoseToContact), RGBA(47,41,43,1), White)\nFill = If(ThisItem in ThoseToContact, RGBA(101, 94, 254, 1), White)<\/pre>\n
\nOnSelect =<\/pre>\n
\n
\nClear(MessageContacts);\nForAll(ThoseToContact, Collect(MessageContacts, {MessageID: id, EmailURL: \"<li><a href=mailto:\" & Address & \">\" & Name & \"<\/a>\", Message: \"\"}));\nNavigate(CreateContactInfoScreen_1, None)<\/pre>\n<\/blockquote>\n\nDisplayMode = If(CountRows(ThoseToContact) > 0, DisplayMode.Edit, Disabled)<\/pre>\n
Creating the Referral Messages Screen<\/h2>\n
\nItems = ThoseToContact<\/pre>\n
![\"4NewScreenGalleryCallOut\"](\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/c98ead0e-6a77-4523-9824-ff6c0313f6c5.png\" "\\"4NewScreenGalleryCallOut\\"")
<\/a><\/p>\n\nOnChange =<\/pre>\n
\n
\nUpdateIf(MessageContacts, MessageID = ThisItem.id,\n {Message: \" regarding \" & TextInput2.Text & \"<\/li>\"})<\/pre>\n<\/blockquote>\n\nDefault: \u201c\u201d<\/pre>\n
\nOnSelect =<\/pre>\n
\n
\nRemove(ThoseToContact, ThisItem);\nRemove(MessageContacts,\n LookUp(MessageContacts, ThisItem.id = MessageID))<\/pre>\n<\/blockquote>\n
![\"5NextButton4\"](\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/58c3b17b-ab31-41c4-bd73-bc0e2f6d1f11.png\" "\\"5NextButton4\\"")
<\/a><\/p>\n\n
\nSet(Regarding, TextInput3.Text);<\/pre>\n<\/blockquote>\n
\n
\nUpdateIf(MessageContacts, Message = \"\", {Message: \" regarding general inquiries<\/li>\"});\nSet(Regarding, Concat(MessageContacts, \"<ul>\" & EmailURL & Message & \"<\/ul>\"));<\/pre>\n<\/blockquote>\n\n
\nContactUser & \" at \" & ContactUserEmail & If(Not(IsBlank(Regarding)),\" regarding \" & Regarding) & \". <\/pre>\n<\/blockquote>\n
\n
\n Regarding & \u201c<\/pre>\n<\/blockquote>\n
\nDisplayMode = If(CountRows(ThoseToContact) < 2, Disabled, Edit)<\/pre>\n
Summary<\/h2>\n
Notes about this modification<\/h2>\n
\n