Power Apps UI Cooker

About Author

Release Notes

Canvas Components

Explore

Canvas Components

Status Report

MyCondy

Last edited 141 days ago by MyCondy

How to design it in Power Apps

Preview

⁠

⁠

What does it consist of?

6x Container

5x Label

1x Rectangle

1x Image

2x Circle

Procedure

Step 1 - create main container

Add a new Manual Container PCF, call it "status_report" with this "Gap" property:

and "DropShadow" property:

DropShadow.Regular

with CENTER vertical and STRETCH horizontal alignment.

Step 2 - create header container

Add a new Vertical Container PCF, call it "title_report_frame" with this "Gap" property:

And Label object under "title_report_frame", call it "title_report_value" with Text property:

"Delivered Project"

And Label object under "title_report_frame", call it "dscr_report_value" with Text property:

"Transited Knowledge"

Step 3 - create line container

Add a new Rectangle, call it "separator_line" with default properties.

Step 4 - create legend container

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

with CENTER horizontal and STRETCH vertical alignment.

Add new Circle and Label under every Horizontal Container, call them "left/right_legend", "left/right_title_value" with these properties:

"Text" property:

"Active" , "Inactive"

"Color" property:

First Circle - RGBA(255, 153, 34, 1)

Second Circle - RGBA(217, 217, 217, 1)

Step 5 - create content container

Add a new Manual Container PCF, call it "content_report" with this "Height" property:

195

And Label object under "content_report", call it "report_value" with Text property:

"80%"

And Image object under "content_report", call it "report_img" with Image property:

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='459' height='196' viewBox='0 0 459 196' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M18.4838 168.552C14.5295 158.161 17.0733 149.979 26.2228 143.662C41.6059 133.041 81.4037 160.819 81.4037 160.819L73.6648 185.709C73.6648 185.709 25.1324 186.024 18.4838 168.552Z' fill='#FF9922'/> <path d='M42.4457 111.453C42.3191 100.335 47.5294 93.5335 58.2965 90.7606C76.3994 86.0985 104.171 125.901 104.171 125.901L88.3199 146.594C88.3199 146.594 42.6586 130.145 42.4457 111.453Z' fill='#FF9922'/> <path d='M77.9775 68.0746C80.3998 57.2232 87.0291 51.795 98.145 51.561C116.835 51.1675 134.755 96.2713 134.755 96.2713L114.587 112.785C114.587 112.785 73.905 86.3192 77.9775 68.0746Z' fill='#FF9922'/> <path d='M122.696 33.2997C127.645 23.3431 135.38 19.6587 146.229 22.0912C164.47 26.181 171.078 74.2625 171.078 74.2625L147.545 85.4709C147.545 85.4709 114.377 50.0399 122.696 33.2997Z' fill='#FF9922'/> <path d='M181.232 11.6876C188.969 3.70314 197.458 2.54108 207.057 8.15241C223.195 17.5868 214.894 65.4051 214.894 65.4051L189.069 68.9403C189.069 68.9403 168.223 25.112 181.232 11.6876Z' fill='#FF9922'/> <path d='M240.156 6.73799C249.528 0.755944 258.056 1.58546 266.1 9.26152C279.623 22.1674 260.505 66.7767 260.505 66.7767L234.562 64.2531C234.562 64.2531 224.399 16.7957 240.156 6.73799Z' fill='#FF9922'/> <path d='M304.05 17.973C314.735 14.8987 322.676 18.1158 328.208 27.7599C337.51 43.9749 306.511 81.3186 306.511 81.3186L282.353 71.5317C282.353 71.5317 286.085 23.142 304.05 17.973Z' fill='#FF9922'/> <path d='M358.089 45.7921C369.206 45.6315 376.024 50.8211 378.829 61.5797C383.547 79.6683 343.829 107.561 343.829 107.561L323.088 91.7731C323.088 91.7731 339.397 46.062 358.089 45.7921Z' fill='#FF9922'/> <path d='M402.91 88.3876C413.604 91.4276 418.644 98.357 418.241 109.468C417.563 128.149 371.506 143.456 371.506 143.456L356.175 122.376C356.175 122.376 384.928 83.2764 402.91 88.3876Z' fill='#D9D9D9'/> <path d='M435.656 142.414C444.737 148.83 447.191 157.039 443.125 167.387C436.287 184.785 387.761 183.944 387.761 183.944L380.292 158.971C380.292 158.971 420.389 131.627 435.656 142.414Z' fill='#D9D9D9'/> </svg>")

This is an output:

⁠

⁠

How to design it in Figma

Preview

⁠

⁠

What does it consist of?

7x Frame

4x Text

1x Rectangle

2x Oval

10x Vector

Procedure

Step 1 - create a master frame

Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_status_report" with these properties:

⁠

⁠

⁠

Step 2 - create a header frame

Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_title_report_frame" with these properties:

⁠

⁠

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

⁠

⁠

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

⁠

⁠

Step 3 - create a line

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

⁠

⁠

Step 4 - create a legend frame

Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_legend_report" with these properties:

⁠

⁠

Add new 2 Frames (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_left/right_legend_frame" with these properties:

⁠

⁠

Add 2 Oval (O command) objects for every horizontal frame, call it "ci_left/right_legend" with these properties:

⁠

⁠

⁠

Add 2 Text (T command) objects for every horizontal frame, call it "lbl_left/right_title_value" with these properties:

⁠

⁠

Step 3- create a content frame

Add a new Frame (F command) object, call it "cont_content_report" with these properties:

⁠

⁠

Add a Text (T command) object under "cont_content_report" frame, call it "lbl_report_value" with these properties:

⁠

⁠

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

</svg>

This is an output:

⁠

⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

vercont_status_report, vercont_title_report_frame = Vertical Container

horcont_legend_report, horcont_left_legend_frame = Horizontal Container

cont_content_report = Manual Container

rect_separator_line = Rectangle

lbl_title_report_value, lbl_dscr_report_value, lbl_left_title_value, lbl_report_value = Label

svg_report_img = Image

ci_left_legend = Circle

YAML Output

⁠

Used Colours

Report Background - #F6F6F6

Title Font Colour - #000000

Dscr Font Colour - #D9D9D9

Active Chart Colour - #FF9922

Inactive Chart Colour - #D9D9D9

⁠

← Search Box⁠

⁠

Tabs →⁠

⁠

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.