Skip to content
Gallery
Power Apps UI Cooker
Introduction
About Author
Release Notes
Custom Functions
Custom Components
Share
Explore
Custom Components

icon picker
Search Box

MyCondy
Last edited 32 days ago by MyCondy

How to design it in Power Apps

Preview

⁠
Screenshot 2024-09-15 at 9.37.04.png
⁠
⁠

What does it consist of?

1x Container
1x Text Input
1x Image

Procedure

Step 1 - create cover container
Add a new Horizontal Container PCF object, call it "searchbox" with this "DropShadow" property:
DropShadow.Semibold
Step 2 - create content
Add a new Text Input object, call it "input_search" with this "HintText" property:
"Search"
Add a new Image object, call it "search_icon" with this "Image" property:
"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M31.1533 31.1371L43.75 43.75M35.4167 20.8333C35.4167 28.8875 28.8875 35.4167 20.8333 35.4167C12.7792 35.4167 6.25 28.8875 6.25 20.8333C6.25 12.7792 12.7792 6.25 20.8333 6.25C28.8875 6.25 35.4167 12.7792 35.4167 20.8333Z' stroke='#53596C' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/> </svg>")
This is an output:
⁠
Screenshot 2024-09-15 at 9.37.10.png
⁠
⁠

How to design it in Figma

Preview

⁠
Screenshot 2024-09-15 at 9.37.43.png
⁠
⁠

What does it consist of?

3x Frame
1x Text
1x Vector

Procedure

Step 1 - create horizontal frame
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_searchbox" with these properties:
⁠
Screenshot 2024-09-15 at 9.49.12.png
⁠
⁠
Step 2 - create content for the parent frame
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object under a "horcont_searchbox" frame, call it "txt_input_search" with these properties:
⁠
Screenshot 2024-09-15 at 9.50.46.png
⁠
⁠
Import a new SVG file under a "horcont_searchbox" frame, call it "svg_search_icon" with this XML code:
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M31.1533 31.1371L43.75 43.75M35.4167 20.8333C35.4167 28.8875 28.8875 35.4167 20.8333 35.4167C12.7792 35.4167 6.25 28.8875 6.25 20.8333C6.25 12.7792 12.7792 6.25 20.8333 6.25C28.8875 6.25 35.4167 12.7792 35.4167 20.8333Z" stroke="#53596C" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
This is an output:
⁠
Screenshot 2024-09-15 at 9.38.31.png
⁠
⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

horcont_searchbox = Horizontal Container
txt_input_search = Text Input
svg_search_icon = Image

YAML Output

⁠
Screenshot 2024-09-15 at 9.46.55.png
⁠
⁠

Used Colours

Container Background - #FFFFFF
Hint Colour - #BEBFC3
Icon Colour - #53596C

⁠
← Rich Text
⁠
⁠
⁠
Short Calendar →
⁠
⁠

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.