Explore

Canvas Components

Link Input Field

Lukas Pavelka

Last edited 152 days ago by Lukas Pavelka.

How to design it in Power Apps

Preview

⁠

⁠

What does it consist of?

1x Container

1x Image

1x Label

1x Rectangle

Procedure

Step 1 - create link container

Add a new Horizontal Container PCF object, call it "link_frame" with this "Gap" property:

Step 2 - create content of the container

Add a new Image object under "link_frame", call it "link_icon" with Image property:

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M9.16488 18.1505C8.92513 18.3743 8.73958 18.5241 8.54996 18.6336C7.62175 19.1695 6.47816 19.1695 5.54996 18.6336C5.20791 18.4361 4.87912 18.1073 4.22153 17.4498C3.56394 16.7922 3.23514 16.4634 3.03767 16.1213C2.50177 15.1931 2.50177 14.0495 3.03767 13.1213C3.23514 12.7793 3.56394 12.4505 4.22153 11.7929L7.04996 8.96448C7.70755 8.30689 8.03634 7.97809 8.37838 7.78062C9.30659 7.24472 10.4502 7.24472 11.3784 7.78061C11.7204 7.97809 12.0492 8.30689 12.7068 8.96448C13.3644 9.62207 13.6932 9.95086 13.8907 10.2929C14.4266 11.2211 14.4266 12.3647 13.8907 13.2929C13.7812 13.4825 13.6314 13.6681 13.4075 13.9078M10.5919 11.0922C10.368 11.3319 10.2182 11.5175 10.1087 11.7071C9.57284 12.6353 9.57284 13.7789 10.1087 14.7071C10.3062 15.0492 10.635 15.378 11.2926 16.0355C11.9502 16.6931 12.279 17.0219 12.621 17.2194C13.5492 17.7553 14.6928 17.7553 15.621 17.2194C15.9631 17.0219 16.2919 16.6931 16.9495 16.0355L19.7779 13.2071C20.4355 12.5495 20.7643 12.2207 20.9617 11.8787C21.4976 10.9505 21.4976 9.80689 20.9617 8.87869C20.7643 8.53665 20.4355 8.20785 19.7779 7.55026C19.1203 6.89267 18.7915 6.56388 18.4495 6.3664C17.5212 5.8305 16.3777 5.8305 15.4495 6.3664C15.2598 6.47588 15.0743 6.62571 14.8345 6.84955' stroke='#8B8B8B' stroke-width='2' stroke-linecap='round'/> </svg>")

and add a new Label object object under "link_frame", call it "prefix_link" with Text property:

"https://"

and add a new Rectangle object under "link_frame", call it "divider_link" with this "Color" property:

RGBA(139, 139, 139, 1)

and add a new Text Input PCF object under "link_frame", call it "value_link" with this "HintText" property:

"insert text..."

This is an output:

⁠

⁠

How to design it in Figma

Preview

⁠

⁠

What does it consist of?

3x Frame

1x Rectangle

1x Vector

2x Text

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_link_frame" with these properties:

⁠

⁠

Step 2 - create a content for the parent frame

Import a new SVG file under a "horcont_link_frame" frame, call it "svg_link_icon" with this XML code:

Add a new Text (T command) object under a "horcont_link_frame" frame, call it "lbl_prefix_link" with these properties:

⁠

⁠

Add a new Rectangle (R command) object under "horcont_link_frame", call it "rect_divider_link" with these properties:

⁠

⁠

Step 3 - import CheckBox component

Open DesignKit PRO 3.0 version and import Text PCF component:

⁠

⁠

This is an output:

⁠

⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

horcont_link_frame = Horizontal Container

svg_link_icon = Image

lbl_prefix_link = Label

rect_divider_link = Rectangle

txtpcf_value_link = Modern Text PCF

YAML Output

⁠

Used Colours

Background Colour - #FFFFFF

Stroke Colour - #C9B4E6

Font Colour - #1D1D1D

Prefix Colour - #8B8B8B

⁠

← Language Bar⁠

⁠

Light/Dark Mode →⁠

⁠

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.