Skip to content
Canvas Components
Email Field
How to design it in Power Apps
Preview
What does it consist of?
Procedure
Step 1 - create field container
Add a new Manual Container PCF object, call it "email_field_comp" with default properties.
Step 2 - create content
Add a new Label object, call it "enter_email_title" with Text property:
"Enter Email"
Add a new Vertical Container PCF object, call it "field_cover" with this "DropShadow" property:
DropShadow.Regular
and "Color" property:
If(IsMatch(email_value_field.Text,
"(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*)@{1}(?:([a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9]{2,})"
),ColorValue("#7FD1AE"),ColorValue("#F08765"))
Add a new Text Input object, call it "email_value_field" under "field_cover" container with this "Color" property:
If(IsMatch(
email_value_field.Text,
"(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*)@{1}(?:([a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9]{2,})"
),ColorValue("#7FD1AE"),ColorValue("#F08765"))
Add a new Horizontal Container PCF object, call it "chars_frame" with default properties.
Add a new Text Input object, call it "entered_chars" under "chars_frame" container with this "Text" property:
Len(email_value_field.Text)
Add a new Text Input object, call it "divider_chars" under "chars_frame" container with this "Text" property:
"/"
Add a new Text Input object, call it "max_chars" under "chars_frame" container with this "Text" property:
"30"
This is an output:
How to design it in Figma
Preview
What does it consist of?
Procedure
Step 1 - create a main frame
Add a new Frame (F command) object, call it "cont_email_field_comp" with these properties:
Step 2 - create a content
Add a new Text (T command) object, call it "lbl_enter_email_title" with these properties:
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_chars_frame" with these properties:
Add a new Text (T command), call it "lbl_entered_chars" under "horcont_chars_frame" container with these properties:
Add a new Text (T command), call it "lbl_divider_chars" under "horcont_chars_frame" container with these properties:
Add a new Text (T command), call it "lbl_max_chars" under "horcont_chars_frame" container with these properties:
Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_field_cover" with these properties:
Open DesignKit PRO 3.5 version and import Text Input component:
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.