Explore

Field with lock

How to design it in Power Apps

Preview

⁠

⁠

What does it consist of?

1x Group

1x Text

1x TextInput

1x Horizontal Container

2x Image

Procedure

Step 1 - create title for the field

Add a new TextInput object, call it "field_name" with this "Text" property:

"Your Field Name"

Step 2 - create field

Add a new Horizontal Container PCF object, call it "field_with_lock" with this "Border Radius" property:

Add a new TextInput object, call it "field" under "field_with_lock" container with this "Color" property:

RGBA(96, 135, 204, 1)

Add a new Image object, call it "lock" with this "Image" property:

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M12 2C13.0609 2 14.0783 2.42143 14.8284 3.17157C15.5786 3.92172 16 4.93913 16 6V8H17.75C18.0455 8 18.3381 8.0582 18.611 8.17127C18.884 8.28434 19.1321 8.45008 19.341 8.65901C19.5499 8.86794 19.7157 9.11598 19.8287 9.38896C19.9418 9.66195 20 9.95453 20 10.25V19.75C20 20.0455 19.9418 20.3381 19.8287 20.611C19.7157 20.884 19.5499 21.1321 19.341 21.341C19.1321 21.5499 18.884 21.7157 18.611 21.8287C18.3381 21.9418 18.0455 22 17.75 22H6.25C5.65326 22 5.08097 21.7629 4.65901 21.341C4.23705 20.919 4 20.3467 4 19.75V10.25C4 9.65326 4.23705 9.08097 4.65901 8.65901C5.08097 8.23705 5.65326 8 6.25 8H8V6C8 4.93913 8.42143 3.92172 9.17157 3.17157C9.92172 2.42143 10.9391 2 12 2ZM17.75 9.5H6.25C6.05109 9.5 5.86032 9.57902 5.71967 9.71967C5.57902 9.86032 5.5 10.0511 5.5 10.25V19.75C5.5 20.164 5.836 20.5 6.25 20.5H17.75C17.9489 20.5 18.1397 20.421 18.2803 20.2803C18.421 20.1397 18.5 19.9489 18.5 19.75V10.25C18.5 10.0511 18.421 9.86032 18.2803 9.71967C18.1397 9.57902 17.9489 9.5 17.75 9.5ZM12 13.5C12.3978 13.5 12.7794 13.658 13.0607 13.9393C13.342 14.2206 13.5 14.6022 13.5 15C13.5 15.3978 13.342 15.7794 13.0607 16.0607C12.7794 16.342 12.3978 16.5 12 16.5C11.6022 16.5 11.2206 16.342 10.9393 16.0607C10.658 15.7794 10.5 15.3978 10.5 15C10.5 14.6022 10.658 14.2206 10.9393 13.9393C11.2206 13.658 11.6022 13.5 12 13.5ZM12 3.5C11.337 3.5 10.7011 3.76339 10.2322 4.23223C9.76339 4.70107 9.5 5.33696 9.5 6V8H14.5V6C14.5 5.33696 14.2366 4.70107 13.7678 4.23223C13.2989 3.76339 12.663 3.5 12 3.5Z' fill='#ffffff'/> </svg>")

Add a new Image object, call it "unlock" with this "Image" property:

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M12 2.00403C13.875 2.00403 15.334 3.21003 15.928 5.00703C15.9903 5.196 15.975 5.40198 15.8855 5.57967C15.7959 5.75736 15.6395 5.8922 15.4505 5.95453C15.2615 6.01685 15.0555 6.00156 14.8779 5.91201C14.7002 5.82246 14.5653 5.666 14.503 5.47703C14.102 4.26203 13.185 3.50403 12 3.50403C10.593 3.50403 9.58 4.46203 9.504 6.05503L9.499 6.25003V7.99903H17.75C18.3203 7.99898 18.8693 8.21548 19.2861 8.60476C19.7028 8.99405 19.9562 9.52706 19.995 10.096L20 10.25V19.746C20.0001 20.3162 19.7837 20.865 19.3946 21.2818C19.0056 21.6985 18.4728 21.952 17.904 21.991L17.75 21.996H6.25C5.67987 21.9961 5.13098 21.7797 4.71425 21.3907C4.29751 21.0016 4.04402 20.4688 4.005 19.9L4 19.746V10.25C3.99993 9.6799 4.2163 9.13101 4.60537 8.71428C4.99444 8.29754 5.52721 8.04405 6.096 8.00503L6.25 8.00003L7.999 7.99903V6.24903C8 3.71203 9.71 2.00503 12 2.00503V2.00403ZM17.75 9.50003H6.25C6.06876 9.50004 5.89366 9.56567 5.75707 9.6848C5.62048 9.80392 5.53165 9.96847 5.507 10.148L5.5 10.25V19.746C5.5 20.126 5.782 20.439 6.148 20.489L6.25 20.496H17.75C17.9312 20.496 18.1063 20.4304 18.2429 20.3113C18.3795 20.1921 18.4684 20.0276 18.493 19.848L18.5 19.746V10.25C18.5002 10.0686 18.4347 9.89327 18.3156 9.75647C18.1964 9.61968 18.0317 9.5307 17.852 9.50603L17.75 9.50003ZM12 13.5C12.2013 13.4927 12.4021 13.526 12.5902 13.5979C12.7784 13.6699 12.9501 13.7791 13.0952 13.9189C13.2402 14.0587 13.3556 14.2264 13.4343 14.4118C13.5131 14.5972 13.5537 14.7966 13.5537 14.998C13.5537 15.1995 13.5131 15.3989 13.4343 15.5843C13.3556 15.7697 13.2402 15.9373 13.0952 16.0772C12.9501 16.217 12.7784 16.3262 12.5902 16.3981C12.4021 16.4701 12.2013 16.5034 12 16.496C11.6093 16.4859 11.2379 16.3236 10.9652 16.0437C10.6924 15.7638 10.5397 15.3884 10.5397 14.9975C10.5397 14.6067 10.6924 14.2313 10.9652 13.9514C11.2379 13.6714 11.6093 13.5091 12 13.499V13.5Z' fill='#ffffff'/> </svg>")

Step 3 - group all objects

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

gr_fieldGroup = GroupContainer

lblpcf_field_name = Text

horcont_field_with_lock = Horizontal Contrainer

txtpcf_modern_text_input = TextInput

svg_lock , svg_unlock = Image

Figma output:

⁠

⁠

YAML Output

⁠

Used Colours

Input Field background - #6087CC

Font colour - #000000

Icon colour - #FFFFFF

⁠

← Canvas Components⁠

⁠

TextArea with special chars →⁠

⁠

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.