Make your Power Apps less formal with Emojis 😀

Emojis are nice, they can be treated as text in many apps these days and you can easily copy-paste them around. And Power Apps canvas app is not an exception! I created an Emoji Picker component that can be used to allow the user to choose an emoji. The chosen emoji can then be used as any text as you can see in the recording below.

Notice how I’m using a simple concatenation to display some text and the selected emoji in an ordinary Label control.

"Selected emoji: " & 'Emoji Picker_1'.Value

The component is not complicated at all. In fact, it consists of only four controls.

galEmojis gallery displays the predefined selection of emojis for the user to choose from. The first square of the gallery is blank to allow the user to undo the previous selection.

lblSelectedEmoji is visible when the galEmojis gallery is not. The label displays the selected emoji. Visibility rule of the control is simply:

!displayEmojis

If no emoji is selected, a gray circle shaped icon iconShowGrid is displayed. When the icon is clicked, the gallery is shown. OnSelect value of iconShowGrid (and also that of the lblSelectedEmoji) is:

Set(displayEmojis, true)

Emoji Picker component itself has only two custom properties defined.

Emojis input property is used to provide the predefined set of emojis. It is initialized as below. The app maker using this component can easily override the selection of the emojis. (I used getemoji.com website to copy an arbitrary set of emojis for this demo)

["", "🙂", "😀", "😉", "😂", "🤪", "🤓", "😎", "🙁", "👍", "👎", "👌", "👇", "☝️", "👏", "🤝", "🙏", "💪", "👈", "👉", "🖕"]

The Value output property exposes the selected emoji to the parent app. Basically it read’s the gallery control’s selected item value:

galEmojis.Selected.Value

Component’s OnReset property simply initializes the displayEmojis variable to false:

Set(displayEmojis, false);

🤓