Status Report

MyCondy

Last edited 67 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:

⁠