Solved: ShoutOut Template - ShoutOut to Multiple People

suriyac · ‎09-13-2018

Hello All,

The ShoutOut template currently seems to allow sending a ShoutOut Message to one person at a time. Are there are any ways to send a message to multiple people or to a group, for job well done?

Trying to see if we can leverage this template to send compliments to a cross functional group who collaborated on a particular project or task.

v-xida-msft · ‎09-17-2018

Hi @suriyac,

Do you want to send a message to multiple people or a group within the ShoutOut template app?

I agree with @mr-dang's thought al most, I have made a test on my side, please take a try with the following workaround:

Within the SearchPersonScreen, you could consider take a try to use a collection to store the person that you want to sent email rather than select the single one person. Within the SearchResultsGallery control, Modify the OnSelect property of the Rectangle2 control as below:

Collect(
    ReceiversCollection,
    {
     UserSelectedPrincipalName:ThisItem.UserPrincipalName,
     UserSelected:ThisItem.DisplayName,
     UserSelectedFirstName:ThisItem.GivenName,
     UserSelectedMail:ThisItem.Mail,
     UserSelectedJobTitle:ThisItem.JobTitle,
     UserSelectedPhoto:UserPhoto_4.Image
    }
)

Add a Gallery control, set the Items property to following:

ReceiversCollection

Add a Button control called "Clear", set the OnSelect property as below:

Clear(ReceiversCollection)

Note: If you want to re-choose Person from SearchResultsGallery, please click the "Clear" button firstly.

Within the ConfirmMeaageScreen, Modify the OnSelect property of the "SEND" button as below:

Set(AppURL, "https://web.powerapps.com/apps");
If(IsBlank(emailHtml), UpdateContext({emailHtml:
"<html>

<head>
    <meta http-equiv=""Content-Type"" content=""text/html; charset=us-ascii"">
    <meta http-equiv=""Cache-Control"" content=""no-siteapp"">
    <meta name=""viewport"" content=""width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"">
    <style type=""style/css"">
        table, table td {border-collapse: collapse;}
    </style>
    <link href=""http://fonts.font.im/css?family=Open&#43;Sans:400,400italic,700"" rel=""stylesheet"" type=""text/css"">
</head>

<body>
    <table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""640"" style=""background:#4d4d4d;"">
        <tr>

            <td width=""547"" height=""80"" style='font-family: ""Open Sans"", sans-serif;color:white;font-weight: bold;text-align: Center;font-size:24px;mso-fareast-font-family:""Open Sans"";border-collapse: collapse;'>Shoutouts</td>
        </tr>
    </table>
    <table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""640"">
        <tr>
            <td colspan=""2"">
                <table border=""0"" cellpadding=""0"" cellspacing=""0"">
                    <tr>
                        <td width=""20""></td>
                        <td height=""110"" width=""600"" style='font-family: ""Open Sans"", sans-serif;text-align: left;font-size:24px;mso-fareast-font-family:""Open Sans"";'>
                            Hi " & UserSelected & ","& "
                        </td>
                        <td width=""20""></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td width=""600"" style='font-family: ""Open Sans"", sans-serif;text-align: left;font-size:24px;mso-fareast-font-family:""Open Sans"";mso-line-height-rule:exactly;line-height:36px;'>
                            Congratulations! Your colleague " & User().FullName & " has sent you " & If(IsMatch(SelectedType.Type, "[AEIOUaeiou]", BeginsWith), "an ", "a ") & " <b>" & Upper(SelectedType.Type) & "</b> shoutout. To view it, open the Shoutouts app.
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td height=""40""></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""100%"">
                                <tr>
                                    <td width=""209"">
                                    </td>
                                    <td width=""180"" height=""34"" style='font-family: ""Open Sans"", sans-serif;mso-fareast-font-family:""Open Sans"";text-align:center;border: solid 1px #b7b7b7;font-size: 14px; font-weight: bold;border-radius: 5px;'>
                                        <a href="& AppURL &" style=""text-decoration:none;color: #4d4d4d;"">Open Shoutouts</a>
                                    </td>
                                    <td width=""209"">
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td height=""96""></td>
                        <td>
                            <table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""100%"">
                                <tr>
                                    <td width=""28"">
                                    </td>
                                    <td width=""544"" height=""96"" style=""border-bottom:1px solid #cccccc;"">
                                    </td>
                                    <td width=""28"">
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td height=""28""></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td width=""600"" style=""
                        font-size: 16px;
                        line-height: 24px;
                        font-style: italic;
                        margin-top:30px;mso-line-height-rule:exactly;"">
                            The Shoutouts app allows you to recognize and appreciate your peers across the company. Try it today! Download and install the PowerApps player from your app store.
                        </td>
                        <td></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>

</html>"
}));

If(Not(UploadedImage1_1.Image = SampleImage),  /* <-- Modify here start */
   ForAll(
      ReceiversCollection,
      Office365.SendEmail(UserSelectedPrincipalName & If(!IsBlank(UserSelectedJobTitle), ";" & Office365Users.Manager(UserSelectedPrincipalName).UserPrincipalName), "Shoutout!", emailHtml,{IsHtml:true,Attachments:Table({Name:"ShoutoutAttachment.jpg", ContentBytes:UploadedImage1_1.Image, '@odata.type':""}),
      Importance:"normal"})
    ),
  ForAll(
     ReceiversCollection,
     Office365.SendEmail(UserSelectedPrincipalName & If(!IsBlank(UserSelectedJobTitle), ";" & Office365Users.Manager(UserSelectedPrincipalName).UserPrincipalName), "Shoutout!", emailHtml, {IsHtml:true, Importance:"normal"})
  )
);         /* <-- Modify here end */

UpdateContext({emailHtml:""});
Set(ShoutOutMessage,"");
Navigate(SentConfirmationScreen,None)

Best regards,

Kris

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

mr-dang · ‎09-17-2018

@suriyac, I think you'll get a lot of learning out of trying this yourself.

Here's some main steps you'll want to explore:

On the people picker screen, use a collection to Collect or Remove a selection
Use conditional formatting to show who is in the collection
Use ForAll to apply the ShoutOut to each person in the collection

Here's an example of using ForAll for a gamification app that has a similar concept:

https://www.youtube.com/watch?v=2xLbBdQhzN4

Microsoft Employee
@8bitclassroom

v-xida-msft · ‎09-17-2018

Hi @suriyac,

Do you want to send a message to multiple people or a group within the ShoutOut template app?

I agree with @mr-dang's thought al most, I have made a test on my side, please take a try with the following workaround:

Within the SearchPersonScreen, you could consider take a try to use a collection to store the person that you want to sent email rather than select the single one person. Within the SearchResultsGallery control, Modify the OnSelect property of the Rectangle2 control as below:

Collect(
    ReceiversCollection,
    {
     UserSelectedPrincipalName:ThisItem.UserPrincipalName,
     UserSelected:ThisItem.DisplayName,
     UserSelectedFirstName:ThisItem.GivenName,
     UserSelectedMail:ThisItem.Mail,
     UserSelectedJobTitle:ThisItem.JobTitle,
     UserSelectedPhoto:UserPhoto_4.Image
    }
)

Add a Gallery control, set the Items property to following:

ReceiversCollection

Add a Button control called "Clear", set the OnSelect property as below:

Clear(ReceiversCollection)

Note: If you want to re-choose Person from SearchResultsGallery, please click the "Clear" button firstly.

Within the ConfirmMeaageScreen, Modify the OnSelect property of the "SEND" button as below:

Set(AppURL, "https://web.powerapps.com/apps");
If(IsBlank(emailHtml), UpdateContext({emailHtml:
"<html>

<head>
    <meta http-equiv=""Content-Type"" content=""text/html; charset=us-ascii"">
    <meta http-equiv=""Cache-Control"" content=""no-siteapp"">
    <meta name=""viewport"" content=""width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"">
    <style type=""style/css"">
        table, table td {border-collapse: collapse;}
    </style>
    <link href=""http://fonts.font.im/css?family=Open&#43;Sans:400,400italic,700"" rel=""stylesheet"" type=""text/css"">
</head>

<body>
    <table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""640"" style=""background:#4d4d4d;"">
        <tr>

            <td width=""547"" height=""80"" style='font-family: ""Open Sans"", sans-serif;color:white;font-weight: bold;text-align: Center;font-size:24px;mso-fareast-font-family:""Open Sans"";border-collapse: collapse;'>Shoutouts</td>
        </tr>
    </table>
    <table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""640"">
        <tr>
            <td colspan=""2"">
                <table border=""0"" cellpadding=""0"" cellspacing=""0"">
                    <tr>
                        <td width=""20""></td>
                        <td height=""110"" width=""600"" style='font-family: ""Open Sans"", sans-serif;text-align: left;font-size:24px;mso-fareast-font-family:""Open Sans"";'>
                            Hi " & UserSelected & ","& "
                        </td>
                        <td width=""20""></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td width=""600"" style='font-family: ""Open Sans"", sans-serif;text-align: left;font-size:24px;mso-fareast-font-family:""Open Sans"";mso-line-height-rule:exactly;line-height:36px;'>
                            Congratulations! Your colleague " & User().FullName & " has sent you " & If(IsMatch(SelectedType.Type, "[AEIOUaeiou]", BeginsWith), "an ", "a ") & " <b>" & Upper(SelectedType.Type) & "</b> shoutout. To view it, open the Shoutouts app.
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td height=""40""></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""100%"">
                                <tr>
                                    <td width=""209"">
                                    </td>
                                    <td width=""180"" height=""34"" style='font-family: ""Open Sans"", sans-serif;mso-fareast-font-family:""Open Sans"";text-align:center;border: solid 1px #b7b7b7;font-size: 14px; font-weight: bold;border-radius: 5px;'>
                                        <a href="& AppURL &" style=""text-decoration:none;color: #4d4d4d;"">Open Shoutouts</a>
                                    </td>
                                    <td width=""209"">
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td height=""96""></td>
                        <td>
                            <table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""100%"">
                                <tr>
                                    <td width=""28"">
                                    </td>
                                    <td width=""544"" height=""96"" style=""border-bottom:1px solid #cccccc;"">
                                    </td>
                                    <td width=""28"">
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td height=""28""></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td width=""600"" style=""
                        font-size: 16px;
                        line-height: 24px;
                        font-style: italic;
                        margin-top:30px;mso-line-height-rule:exactly;"">
                            The Shoutouts app allows you to recognize and appreciate your peers across the company. Try it today! Download and install the PowerApps player from your app store.
                        </td>
                        <td></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>

</html>"
}));

If(Not(UploadedImage1_1.Image = SampleImage),  /* <-- Modify here start */
   ForAll(
      ReceiversCollection,
      Office365.SendEmail(UserSelectedPrincipalName & If(!IsBlank(UserSelectedJobTitle), ";" & Office365Users.Manager(UserSelectedPrincipalName).UserPrincipalName), "Shoutout!", emailHtml,{IsHtml:true,Attachments:Table({Name:"ShoutoutAttachment.jpg", ContentBytes:UploadedImage1_1.Image, '@odata.type':""}),
      Importance:"normal"})
    ),
  ForAll(
     ReceiversCollection,
     Office365.SendEmail(UserSelectedPrincipalName & If(!IsBlank(UserSelectedJobTitle), ";" & Office365Users.Manager(UserSelectedPrincipalName).UserPrincipalName), "Shoutout!", emailHtml, {IsHtml:true, Importance:"normal"})
  )
);         /* <-- Modify here end */

UpdateContext({emailHtml:""});
Set(ShoutOutMessage,"");
Navigate(SentConfirmationScreen,None)

Best regards,

Kris

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

suriyac · ‎09-19-2018

Hello Kris @v-xida-msft,

Thank you for sharing your approach. This works great and exactly what I wanted to do with it!

suriyac · ‎09-19-2018

Thank you @mr-dang.. Good video to show the possibilities!

chris2112 · ‎10-09-2018

Hi Kris
I have been trying to use your work around to my shoutouts template but it dosnt seem to be working correctly as it will not add data to the XL document For the activity feed to pick up any is there anyway you could help with this ?

@v-xida-msft wrote:

Hi @suriyac,

Do you want to send a message to multiple people or a group within the ShoutOut template app?

I agree with @mr-dang's thought al most, I have made a test on my side, please take a try with the following workaround:

Within the SearchPersonScreen, you could consider take a try to use a collection to store the person that you want to sent email rather than select the single one person. Within the SearchResultsGallery control, Modify the OnSelect property of the Rectangle2 control as below:

Collect(
    ReceiversCollection,
    {
     UserSelectedPrincipalName:ThisItem.UserPrincipalName,
     UserSelected:ThisItem.DisplayName,
     UserSelectedFirstName:ThisItem.GivenName,
     UserSelectedMail:ThisItem.Mail,
     UserSelectedJobTitle:ThisItem.JobTitle,
     UserSelectedPhoto:UserPhoto_4.Image
    }
)

Add a Gallery control, set the Items property to following:

ReceiversCollection

Add a Button control called "Clear", set the OnSelect property as below:

Clear(ReceiversCollection)

Note: If you want to re-choose Person from SearchResultsGallery, please click the "Clear" button firstly.

Within the ConfirmMeaageScreen, Modify the OnSelect property of the "SEND" button as below:

Set(AppURL, "https://web.powerapps.com/apps");
If(IsBlank(emailHtml), UpdateContext({emailHtml:
"<html>

<head>
    <meta http-equiv=""Content-Type"" content=""text/html; charset=us-ascii"">
    <meta http-equiv=""Cache-Control"" content=""no-siteapp"">
    <meta name=""viewport"" content=""width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"">
    <style type=""style/css"">
        table, table td {border-collapse: collapse;}
    </style>
    <link href=""http://fonts.font.im/css?family=Open&#43;Sans:400,400italic,700"" rel=""stylesheet"" type=""text/css"">
</head>

<body>
    <table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""640"" style=""background:#4d4d4d;"">
        <tr>

            <td width=""547"" height=""80"" style='font-family: ""Open Sans"", sans-serif;color:white;font-weight: bold;text-align: Center;font-size:24px;mso-fareast-font-family:""Open Sans"";border-collapse: collapse;'>Shoutouts</td>
        </tr>
    </table>
    <table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""640"">
        <tr>
            <td colspan=""2"">
                <table border=""0"" cellpadding=""0"" cellspacing=""0"">
                    <tr>
                        <td width=""20""></td>
                        <td height=""110"" width=""600"" style='font-family: ""Open Sans"", sans-serif;text-align: left;font-size:24px;mso-fareast-font-family:""Open Sans"";'>
                            Hi " & UserSelected & ","& "
                        </td>
                        <td width=""20""></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td width=""600"" style='font-family: ""Open Sans"", sans-serif;text-align: left;font-size:24px;mso-fareast-font-family:""Open Sans"";mso-line-height-rule:exactly;line-height:36px;'>
                            Congratulations! Your colleague " & User().FullName & " has sent you " & If(IsMatch(SelectedType.Type, "[AEIOUaeiou]", BeginsWith), "an ", "a ") & " <b>" & Upper(SelectedType.Type) & "</b> shoutout. To view it, open the Shoutouts app.
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td height=""40""></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""100%"">
                                <tr>
                                    <td width=""209"">
                                    </td>
                                    <td width=""180"" height=""34"" style='font-family: ""Open Sans"", sans-serif;mso-fareast-font-family:""Open Sans"";text-align:center;border: solid 1px #b7b7b7;font-size: 14px; font-weight: bold;border-radius: 5px;'>
                                        <a href="& AppURL &" style=""text-decoration:none;color: #4d4d4d;"">Open Shoutouts</a>
                                    </td>
                                    <td width=""209"">
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td height=""96""></td>
                        <td>
                            <table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""100%"">
                                <tr>
                                    <td width=""28"">
                                    </td>
                                    <td width=""544"" height=""96"" style=""border-bottom:1px solid #cccccc;"">
                                    </td>
                                    <td width=""28"">
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td height=""28""></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td width=""600"" style=""
                        font-size: 16px;
                        line-height: 24px;
                        font-style: italic;
                        margin-top:30px;mso-line-height-rule:exactly;"">
                            The Shoutouts app allows you to recognize and appreciate your peers across the company. Try it today! Download and install the PowerApps player from your app store.
                        </td>
                        <td></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>

</html>"
}));

If(Not(UploadedImage1_1.Image = SampleImage),  /* <-- Modify here start */
   ForAll(
      ReceiversCollection,
      Office365.SendEmail(UserSelectedPrincipalName & If(!IsBlank(UserSelectedJobTitle), ";" & Office365Users.Manager(UserSelectedPrincipalName).UserPrincipalName), "Shoutout!", emailHtml,{IsHtml:true,Attachments:Table({Name:"ShoutoutAttachment.jpg", ContentBytes:UploadedImage1_1.Image, '@odata.type':""}),
      Importance:"normal"})
    ),
  ForAll(
     ReceiversCollection,
     Office365.SendEmail(UserSelectedPrincipalName & If(!IsBlank(UserSelectedJobTitle), ";" & Office365Users.Manager(UserSelectedPrincipalName).UserPrincipalName), "Shoutout!", emailHtml, {IsHtml:true, Importance:"normal"})
  )
);         /* <-- Modify here end */

UpdateContext({emailHtml:""});
Set(ShoutOutMessage,"");
Navigate(SentConfirmationScreen,None)

Best regards,

Kris

sclare · ‎05-30-2022

Hello,

I am trying to do the same thing on the shoutouts template but cannot get this to work. Would anyone be able to assist with this?

Thank you,

Shannon

chris2112 · ‎05-30-2022

Hey, I changed my data source to SharePoint solution and used a forall patch new row it worked really well, this was a few years ago though 🙂 . At what point are you getting stuck.

sclare · ‎05-30-2022

Hi Chris thanks for your response! I'm very new to powerapps so not really sure how to do much with formulas etc. How did you change the data source from excel to sharepoint? that is another problem I wasn't sure where to start with to convert the app. Also regarding this issue, I have so far made a collection with + icons so you can add members of the company into a collection - but don't know how to then move the app to writing a shoutout to the members in the collection rather than just an individual

Towi · ‎08-10-2022

Can you please share yor screen about send the list to sharepoint? actually is collecting the data to "collections Shoutouts" but need send it to sharepoint list.

ShoutOut Template - ShoutOut to Multiple People

Helpful resources

Community will be READ ONLY July 16th, 5p PDT -July 22nd

Summer of Solutions | Week 4 Results | Winners will be posted on July 24th

Check Out | 2024 Release Wave 2 Plans for Microsoft Dynamics 365 and Microsoft Power Platform

Updates to Transitions in the Power Platform Communities