Platform Banner

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
361 views
Share

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

Video Training Microsoft PowerApps : Design dynamic and engaging user experiences

E-learning Intermediate

Vu 507 fois

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, create reusable components, and automate interactions with dynamic forms. This course will enable you to develop more complex applications while maintaining excellent usability.

ALL COURSES