Power Apps UI Cooker

About Author

Release Notes

Custom Functions

Custom Components

Explore

Custom Components

Icon with Notification

MyCondy

Last edited 104 days ago by MyCondy

How to design it in Power Apps

Preview

⁠

⁠

What does it consist of?

1x Manual Container

1x Group

1x Image

1x HTML TEXT

1x Label

1x Circle

Procedure

Step 1 - create manual container

Add a new Container PCF object, call it "notification_frame".

Step 2 - create content for the container

Add a new HTML TEXT object, call it "notification_back" with this "HTML text" property:

"<div style='border-radius:10px;background:linear-gradient(#28d,#0be);width:100px;height:100px;'></div>"

Add a new Circle object, call it "notification_circle".

Add a new Label object, call it "notification_value" with Text property:

CountRows(<Table>)

Replace value between "<>" by your real table name.

Step 3 - group label and circle objects

Now, we select Label and Circle objects and group them via shortcut - COMMAND + G (MAC) , CONTROL + G (WIN).

Step 4 - create icon image

Create an Image object, call it "notification" with Image property:

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M23.75 47.5C22.2389 47.5 17.5309 47.5 14.0429 47.5C12.1844 47.5 10.9779 45.5442 11.809 43.882L13.9443 39.6115C14.6386 38.223 15 36.6935 15 35.141C15 33.2168 15 30.3585 15 27.5C15 22.5 17.5 12.5 30 12.5C42.5 12.5 45 22.5 45 27.5C45 30.3585 45 33.2168 45 35.141C45 36.6935 45.3615 38.223 46.0558 39.6115L48.191 43.882C49.022 45.5442 47.8133 47.5 45.955 47.5H36.25M23.75 47.5C23.75 52.5 26.25 55 30 55C33.75 55 36.25 52.5 36.25 47.5M23.75 47.5C27.6553 47.5 36.25 47.5 36.25 47.5' stroke='white' stroke-width='2.5' stroke-linejoin='round'/> <path d='M30 12.5V7.5' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/> </svg>")

This is an output:

⁠

⁠

How to design it in Figma

Preview

⁠

⁠

What does it consist of?

2x Frame

1x Group

1x Vector

1x Oval

1x Text

1x Rectangle

Procedure

Step 1 - create a gradient rectangle

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

⁠

⁠

Step 2 - create a notification icon

Import a new SVG file, call it "svg_notification" with this XML code:

</svg>

Step 2 - create a notification group value

Add a new Text (T command), call it "lbl_notification_value" with these properties:

⁠

⁠

Add a new Oval (O command), call it "ci_notification_circle" with these properties:

⁠

⁠

Select Text and Oval objects and press COMMAND + G (MAC) or CTRL + G (WIN) and call the group "gr_notification_group".

Step 3 - create a parent frame for all objects

Select Group,SVG, and Rectangle objects and press OPTION + COMMAND + G (MAC) or ALT + CONTROL + G (WIN) and call the frame: "cont_notification_frame".

This is an output:

⁠

⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

cont_notification_frame = Manual Container

gr_notification_group = Group

svg_notification = Image

lbl_notification_value = Label

ci_notification_circle = Circle

html_notification_back = HTML Text

YAML Output

⁠

⁠

Used Colours

Rectangle Background - Gradient(#2580E0,#00C1F1)

Circle Background - #D65354

Text Colour - #FFFFFF

Icon Colour - #FFFFFF

⁠

← Gradient Button⁠

⁠

Info Box →⁠

⁠

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.