Explore

Canvas Components

Phone Number field

How to design it in Power Apps

Preview

⁠

⁠

What does it consist of?

1x Container

1x Text Input

1x Rectangle

1x Dropdown PCF

Procedure

Step 1 - create cover container

Add a new Horizontal Container PCF object, call it "phone_input_frame" with this "DropShadow" property:

DropShadow.Regular

Step 2 - create content

Add a new Dropdown PCF, call it "prefix_code" with this "Items" property:

Sort(["+355","+213","+1-684","+376","+244","+1-264","+672","+1-268","+54","+374","+297","+61","+43","+994","+1-242","+973","+880","+1-246","+375","+32","+501","+229","+1-441","+975","+591","+387","+267","+55","+246","+1-284","+673","+359","+226","+257","+855","+237","+1","+238","+1-345","+236","+235","+56","+86","+61","+61","+57","+269","+682","+506","+385","+53","+599","+357","+420","+243","+45","+253","+1-767","+1-809","+1-829","+1-849","+670","+593","+20","+503","+240","+291","+372","+251","+500","+298","+679","+358","+33","+689","+241","+220","+995","+49","+233","+350","+30","+299","+1-473","+1-671","+502","+44-1481","+224","+245","+592","+509","+504","+852","+36","+354","+91","+62","+98","+964","+353","+44-1624","+972","+39","+225","+1-876","+81","+44-1534","+962","+7","+254","+686","+383","+965","+996","+856","+371","+961","+266","+231","+218","+423","+370","+352","+853","+389","+261","+265","+60","+960","+223","+356","+692","+222","+230","+262","+52","+691","+373","+377","+976","+382","+1-664","+212","+258","+95","+264","+674","+977","+31","+599","+687","+64","+505","+227","+234","+683","+850","+1670","+47","+968","+92","+680","+970","+507","+675","+595","+51","+63","+64","+48","+351","+1-787","+1-939","+974","+242","+262","+40","+7","+250","+590","+290","+1-869","+1758","+590","+508","+1784","+685","+378","+239","+966","+221","+381","+248","+232","+65","+1-721","+421","+386","+677","+252","+27","+82","+211","+34","+94","+249","+597","+47","+268","+46","+41","+963","+886","+992","+255","+66","+228","+690","+676","+1-868","+216","+90","+993","+1-649","+688","+1-340","+256","+380","+971","+44","+598","+998","+678","+379","+58","+84","+681","+212","+967","+260","+263"],Value)

Add a new Rectangle, call it "divider_input" with this "Fill" property:

RGBA(217, 217, 217, 1)

Add a new Text Input object, call it "number_value" with this "HintText" property:

"Phone number..."

This is an output:

⁠

⁠

How to design it in Figma

Preview

⁠

⁠

What does it consist of?

3x Frame

1x Rectangle

2x Text

1x Group

1x Vector

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

⁠

⁠

Step 2 - create a content

Open DesignKit 3.5.1 version and add new Dropdown PCF component with "dropdownpcf_prefix_code" name:

⁠

⁠

Add a new Rectangle (R command) objects, call them "rect_divider_input" with these properties:

⁠

⁠

Open DesignKit 3.5.1 version and add new Text Input component with "txt_number_value" name:

⁠

⁠

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_phone_input_frame = Horizontal Container

dropdownpcf_prefix_code = Dropdown PCF

rect_divider_input = Rectangle

txt_number_value = Text Input

YAML Output

⁠

Used Colours

Background - #F5F5F5

Prefix Colour - #2B3B47

Hint Colour - #949DAD

⁠

← Pie Chart⁠

⁠

Popup Menu →⁠

⁠

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.