Social media tagging is everywhere – Microsoft Teams, Facebook, Twitter, LinkedIn – you name it! Having used tagging on all of these social networks (and more), I was wondering if we could have something similar in Power Apps.

The idea was pretty simple – allow users to select other users when they type the @ symbol. For the first attempt, I did not want to complicate this with features like tagging a person resulting in an action e.g. the tagged person getting a notification.

With this simple feature in mind, here are the steps I followed to make this work:

• Add a text input control and a combo box control (these 2 are the only you need!)
• Set the Default property of the text input to a variable (let’s call it combinedText)Default: combinedText
• Set a variable to true if there is a “@” symbol in the text, in the OnChange property of the text inputOnChange: If("@" in TextInput1.Text, Set(showCombo, true))
• Set the same variable to true and reset the combo box in the OnSelect property of the text inputOnSelect: Set(showCombo, true); Reset(ComboBox1)
• Set the datasource of the combo box to the list of users (or any other list)Items: Users
• Set the Visible property of the combo box to be based on the showCombo variableIf("@" in TextInput1.Text && showCombo, true, false)
• Allow searching and do not allow multi selections for the combo boxIsSearchable: true, SelectMultiple: false
• Substitute the “@” symbol with the selected user’s full name, set the the focus back to the text input control, and reset the combo box to clear the searchOnChange: Set(combinedText, Substitute(TextInput1.Text,"@","") & ComboBox1.Selected.'Full Name'); SetFocus(TextInput1); Reset(ComboBox1)
• Change the X position of the combo box control so it always shows up next to the “@” symbol (this can be a bit tricky)
• Optional: Modify a few other properties like theInputTextPlaceholder of the combo box to say “Search friends” instead of “Find Users”

With these settings, this is how the controls behave:

Once the user types the “@” symbol, they can tab to the combo box and then start searching without using a mouse in the entire process. That being said, I would have liked the focus to go to the combo box as soon as the “@” symbol is entered. I couldn’t achieve that since the SetFocus function doesn’t work for combo box controls. There can be several variations of this solution e.g. the combo box could appear below the text input control to mimic how social tagging works in most social networks. Here is an example:

To sum it up, this is just an introduction to a potential social tagging functionality in Power Apps. This design can definitely be improved and expanded upon. For starters, with this design, nothing happens when you tag a person. You could create a flow using Power Automate to notify the tagged person via an email, as an example. Also, the user name could potentially be made a hyper link to the user’s Facebook or LinkedIn or any other social networking profile. Feel free to use this approach and make it even more slick!

About the Author:

Hardit Bhatia is an Electrical Engineer with a MBA in Finance and over 10 years’ consulting experience. With a deep interest in analytical tasks, Power Apps is the world he had been dreaming of since a very long time! After getting introduced to Power Apps, it took him just a few weeks to get addicted and dive deep into it! He is now obsessed with the platform and is always on the lookout to spread the knowledge and invite more people into this world! He currently works for Hitachi Solutions America as a Senior Manager in the CE practice. 

• LinkedIn: https://www.linkedin.com/in/harditbhatia/
• Twitter: https://twitter.com/thepoweraddict
• Facebook: https://www.facebook.com/thepoweraddict/
• YouTube: https://www.youtube.com/channel/UC01IDHuH1X3ZhUYMTj-ZyTg?view_as=subscriber
• Email: hardit.bhatia@thepoweraddict.com
• Power Apps Community Super User 2020: https://powerusers.microsoft.com/t5/user/viewprofilepage/user-id/88116

Reference:

Bhatia, H (2020). Social Media Tagging in PowerApps. Available at: https://thepoweraddict.com/social-media-tagging-in-power-apps/ [Accessed: 9th April 2020].

Find more great Power Platform content here.