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 input
OnChange: 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 input
OnSelect: 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 variable
If("@" in TextInput1.Text && showCombo, true, false) - Allow searching and do not allow multi selections for the combo box
IsSearchable: 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 search
OnChange: 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!
Have fun! Get addicted!