Explore

TextArea with special chars

How to design it in Power Apps

Preview

⁠

⁠

What does it consist of?

1x Group

2x Dropdown

3x Container

2x Image

1x Button

1x Text Input

Procedure

Step 1 - create 2 dropdowns

Add 2 new Dropdowns controls with names "hash_list" and "at_list" with Items property:

["HR","Security","IT"]

["Lukas Pavelka", "John Doe", "Patel Hatel"]

and OnChange property:

Set(_content,Concatenate(_content,"#",hash_list.Selected.Value));Reset(hash_list);Set(_set_hash,false)

Set(_content,Concatenate(_content,"@",at_list.Selected.Value));Reset(at_list);Set(_set_open,false)

Step 2 - create parent frame for text area

Add a new Vertical Container PCF, call it "parent" with this "Border radius" property:

and BorderStyle property:

BorderStyle.Dashed

Step 3 - create content for parent container

Add a new Text Input PCF, call it "input_text" with this "Placeholder" property:

"What's on your mind?"

and TriggerOutput property:

'TextInputCanvas.TriggerOutput'.Keypress

and OnChange property:

Set(_content,input_text.Value)

Add a new Horizontal Container PCF call it "action" with this "Border radius" property:

Step 4 - create content for action container

Add 2 new Images controls, call them "hash" and "at" with Image property:

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='36' height='34' viewBox='0 0 36 34' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M8 12H28' stroke='#bd2044' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/> <path d='M8 22H28' stroke='#bd2044' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/> <path d='M5.5 12H30.5' stroke='#bd2044' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/> <path d='M5.5 22H30.5' stroke='#bd2044' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/> <path d='M10.5 29.5L15.5 4.5' stroke='#bd2044' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/> <path d='M20.5 29.5L25.5 4.5' stroke='#bd2044' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/> </svg>")

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M26.6663 20C26.6663 23.6818 23.6815 26.6667 19.9997 26.6667C16.3178 26.6667 13.333 23.6818 13.333 20C13.333 16.3181 16.3178 13.3333 19.9997 13.3333C23.6815 13.3333 26.6663 16.3181 26.6663 20Z' stroke='#bd2044' stroke-width='5'/> <path d='M28.3333 32.4742C25.9498 34.0695 23.0835 35 20 35C11.7157 35 5 28.2843 5 20C5 11.7157 11.7157 5 20 5C28.2843 5 35 11.7157 35 20C35 26.6667 26.6667 26.6667 26.6667 20' stroke='#bd2044' stroke-width='5' stroke-linecap='round'/> </svg>")

And OnSelect property:

Set(_set_hash,true)

Set(_set_open,true)

Add a new Manual Container PCF, call it "Empty" with default properties.

Add a new Button PCF object, call it "Send" with this "BasePaletteColor" property:

RGBA(249, 83, 109, 1)

and Icon property:

"Send"

Step 5 - group all controls

Now, we select all objects and group them via shortcut - COMMAND + G (MAC) , CONTROL + G (WIN).

This is an output:

⁠

⁠

How to use it via DesignKit

Used Prefixes

vercont_parent = Vertical Container

horcont_action = Horizontal Container

cont_empty = Container

txtpcf_input_text = Text Input

svg_hash, svg_at = Image

btnpcf_send = Button

YAML Output

⁠

Used Colours

Border,button,image colour - #bd2044

Font colour - #000000

⁠

← Field with lock⁠

⁠

Multiple-step Tooltip →⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.