Gallery

Power Apps UI Cooker

Introduction

About Author

Release Notes

Custom Functions

Custom Components

Explore

Custom Components

Info Box

MyCondy

Last edited 28 days ago by MyCondy

The info box shows you a summary of your input data, like title and value of current and last year.

How to design it in Power Apps

Preview

⁠

⁠

What does it consist of?

1x Group

4x Label

1x HTML TEXT

Procedure

Step 1 - create HTML menu box

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

"<div style='margin:9px;width:"&Self.Width-15&"px;height:152px;background-color:#fff; border-radius:10px; box-shadow:3px 3px 6px 1px #ccc;'></div>"

Step 2 - create input values

Add a new Label object, call it "logged_title" with this "text" property:

"LOGGED[h]"

Add a new Label object, call it "logged_value" with this "text" property:

If(IsBlank(Sum(Filter(<TABLE>,Year = Year(Now())),<TABLE COLUMN>)),0,Sum(Filter(<TABLE>,Year = Year(Now())),<TABLE COLUMN>))

You should replace text in "<>" by your input.

Add a new Label object, call it "logged_last_year" with this "text" property:

Concatenate(Year(DateAdd(Today(),-1,TimeUnit.Years)),":")

Add a new Label object, call it "logged_last_year_value" with this "text" property:

Value(Sum(Filter(<TABLE>,Year = Year(DateAdd( Now(),-1,TimeUnit.Years))),<TABLE COLUMN>))

You should replace text in "<>" by your input.

Step 3 - group all objects

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

This is an output:

⁠

⁠

How to design it in Figma

Preview

⁠

⁠

What does it consist of?

3x Frame

4x Text

Procedure

Step 1 - create a vertical frame with auto layout

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

⁠

⁠

⁠

Step 2 - create a content for the parent frame

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

⁠

⁠

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

⁠

⁠

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

⁠

⁠

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

⁠

⁠

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

⁠

⁠

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

⁠

⁠

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_info_box = Vertical Container

lbl_logged_info, lbl_content_value, lbl_year_info, lbl_value_info = Label

horcont_content_info, horcont_Bottom_info = Horizontal Container

YAML Output

⁠

Used Colours

Logged Box - #FFFFFF

Logged Title - #abacb1

Logged Value - #735667

Logged Last Year Value - #3ac08f

⁠

← Icon with Notification⁠

⁠

Info Popup with Button →⁠

⁠

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.