Power Apps - Customize data display Tutorial

Unlock the power of customization in your applications with our video, 'Customize Data Display'. Discover how to enhance your data presentation using dynamic labels, color-coded status indicators, and intuitive filtering techniques. Elevate your Power Platform skills with these low-code strategies tailored for intermediate users, making your apps visually appealing and effective!

03:55
0 views

Available in Microsoft365

00:00:04

we will explore how to enhance data display

00:00:08

and refine control customization

00:00:10

for an optimized presentation.

00:00:13

By switching to edit mode,

00:00:15

you can now personalize the gallery display.

00:00:18

We first insert a label control that will display text extracted from the data.

00:00:23

This control's font can be customized in terms of size,

00:00:27

typeface,

00:00:27

or color.

00:00:29

The label must occupy the available space without being truncated.

00:00:33

To achieve this,

00:00:35

the labels with property is set using the following formula.

00:00:40

This formula calculates the remaining space by

00:00:43

subtracting the control's current horizontal position,

00:00:47

self.X,

00:00:48

from the total width of the template item.

00:00:51

For example,

00:00:52

if the total space is 300 pixels

00:00:55

and the label starts 50 pixels from the edge,

00:00:58

the label will stretch over 250 pixels.

00:01:02

To further improve the interface,

00:01:04

a rectangle control is inserted next to the label

00:01:08

to visually represent the task status with a dynamic color.

00:01:13

The fill property of the rectangle is configured using the switch function

00:01:16

with a formula.

00:01:19

This formula checks the current status value.

00:01:22

For example,

00:01:23

in progress or completed,

00:01:25

and assigns a specific color to the rectangle,

00:01:28

thus creating an intuitive visual indicator to

00:01:31

distinguish the status of each task.

00:01:35

To optimize the display,

00:01:36

a second blank gallery is added inside the horizontal gallery,

00:01:40

ensuring it does not overlap the text at the top.

00:01:44

Its width is defined using the this item template width formula

00:01:49

to ensure it fits the structure of the model.

00:01:52

Its height is adjusted using the formula this item template height minus self Y,

00:01:57

which takes into account the vertical position for harmonious integration.

00:02:01

This approach was previously used to define the width of the text label above.

00:02:07

Delay item loading property is again set to

00:02:09

false to ensure all items are loaded immediately.

00:02:14

The item's property of this vertical gallery is defined using a formula

00:02:18

that filters the task list to retain only the tasks

00:02:21

whose status matches the selected item in the horizontal gallery.

00:02:25

This way,

00:02:26

only relevant tasks for the chosen status are displayed,

00:02:30

creating a dynamic relationship between galleries.

00:02:34

To provide information about the priority of each task,

00:02:37

a label control is added inside the vertical gallery.

00:02:44

Its formula

00:02:46

This item priority value

00:02:48

directly displays the priority value.

00:02:53

To improve readability,

00:02:54

the text color of this label is modified

00:02:57

based on the priority using the switch function.

00:03:00

This function assigns a specific color for each level of priority,

00:03:05

for example,

00:03:05

red for high or blue for elevated,

00:03:08

making it easier to read and visually recognize the importance of each task.

00:03:14

It is also possible to add additional

00:03:16

controls to the galleries to display more information

00:03:19

by binding them to data using this item.

00:03:23

The second part of the tutorial guided you through the

00:03:26

advanced display of data in a Power Apps gallery.

00:03:29

You learned how to dynamically adjust text with,

00:03:32

use colored rectangles to visually indicate status,

00:03:35

and connect galleries to filter and display detailed information.

00:03:39

By combining these techniques,

00:03:41

you can make your application more intuitive,

00:03:43

visually appealing,

00:03:45

and responsive.

00:03:46

In the next tutorial,

00:03:47

we will cover the creation and management of forms,

00:03:50

essential steps for enhancing data interaction.

Mandarine AI: WHAT YOU SHOULD KNOW

RELATED COURSES This tutorial is part of the following courses

0 Views

Video Training Microsoft PowerApps : Design dynamic and engaging user experiences

Enhance your mastery of power apps with this intermediate module. Learn how to structure responsive interfaces, improve data visualization, ...

ALL COURSES