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);

πŸ€“

2 Comments

    1. Unfortunately I didn’t finalize the component so that it would be generic enough to be provided as a downloadable asset. However, you can easily create your own by following the guidelines in this post.

      Like

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s