Skip to content
How to design it in Power Apps
Preview
What does it consist of?
Procedure
Step 1 - create password container
Add a new Horizontal Container PCF object, call it "pass_generator" with this "Gap" property:
10
and "DropShadow" property:
DropShadow.Semibold
Step 2 - create content
Add a new Image object, call it "lock_icon" with this "Image" property:
"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='30' height='31' viewBox='0 0 30 31' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M15 18.625V21.125M8.75 13.036C9.33927 13 10.0657 13 11 13H19C19.9342 13 20.6608 13 21.25 13.036M8.75 13.036C8.0146 13.0809 7.49286 13.1819 7.04754 13.4087C6.34193 13.7682 5.76825 14.3419 5.40873 15.0475C5 15.8497 5 16.8998 5 19V20.75C5 22.8503 5 23.9002 5.40873 24.7025C5.76825 25.4081 6.34193 25.9818 7.04754 26.3413C7.8497 26.75 8.8998 26.75 11 26.75H19C21.1002 26.75 22.1502 26.75 22.9525 26.3413C23.6581 25.9818 24.2318 25.4081 24.5913 24.7025C25 23.9002 25 22.8503 25 20.75V19C25 16.8998 25 15.8497 24.5913 15.0475C24.2318 14.3419 23.6581 13.7682 22.9525 13.4087C22.5071 13.1819 21.9854 13.0809 21.25 13.036M8.75 13.036V10.5C8.75 7.04822 11.5482 4.25 15 4.25C18.4517 4.25 21.25 7.04822 21.25 10.5V13.036' stroke='url(#paint0_linear_5038_20095)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>
<defs>
<linearGradient id='paint0_linear_5038_20095' x1='15' y1='4.25' x2='15' y2='26.75' gradientUnits='userSpaceOnUse'>
<stop stop-color='#436FF6'/>
<stop offset='1' stop-color='#379CFE'/>
</linearGradient>
</defs>
</svg>")
Add a new Text Input PCF object under "pass_frame", call it "input_pass" with this "Value" property:
varPassword
Add a new HTML TEXT object, call it "button_generate" with this "HTML text" property:
Set(varPassword,
Concat(FirstN(Shuffle(Split("ABCDEFGHIJKLMNOPQRSTUVWXYZ@#$%&*-+=?>.abcdefghijklmnopqrstuvwxyz123456789","")),15),Value))
This is an output:
How to design it in Figma
Preview
What does it consist of?
Procedure
Step 1 - create a horizontal frame with auto layout
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_pass_generator" with these properties:
Step 2 - create an icon
Import a new SVG file, call it "svg_lock_icon" with this XML code:
<svg width='30' height='31' viewBox='0 0 30 31' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M15 18.625V21.125M8.75 13.036C9.33927 13 10.0657 13 11 13H19C19.9342 13 20.6608 13 21.25 13.036M8.75 13.036C8.0146 13.0809 7.49286 13.1819 7.04754 13.4087C6.34193 13.7682 5.76825 14.3419 5.40873 15.0475C5 15.8497 5 16.8998 5 19V20.75C5 22.8503 5 23.9002 5.40873 24.7025C5.76825 25.4081 6.34193 25.9818 7.04754 26.3413C7.8497 26.75 8.8998 26.75 11 26.75H19C21.1002 26.75 22.1502 26.75 22.9525 26.3413C23.6581 25.9818 24.2318 25.4081 24.5913 24.7025C25 23.9002 25 22.8503 25 20.75V19C25 16.8998 25 15.8497 24.5913 15.0475C24.2318 14.3419 23.6581 13.7682 22.9525 13.4087C22.5071 13.1819 21.9854 13.0809 21.25 13.036M8.75 13.036V10.5C8.75 7.04822 11.5482 4.25 15 4.25C18.4517 4.25 21.25 7.04822 21.25 10.5V13.036' stroke='url(#paint0_linear_5038_20095)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>
<defs>
<linearGradient id='paint0_linear_5038_20095' x1='15' y1='4.25' x2='15' y2='26.75' gradientUnits='userSpaceOnUse'>
<stop stop-color='#436FF6'/>
<stop offset='1' stop-color='#379CFE'/>
</linearGradient>
</defs>
</svg>
Step 3 - create a input field for pass frame
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "txtpcf_input_pass" with these properties:
Add a new Text (T command) under "txtpcf_input_pass" frame, call it "text" with these properties:
Step 4- create a html frame
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "html_button_generate" with these properties:
Add a new Text (T command) under "html_button_generate" frame, call it "text" with these properties:
This is an output:
How to use it via DesignKit
Prerequisites
Used Prefixes
YAML Output
Used Colours
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.