Platform Banner

Power Apps - Dynamic color palette with named formulas Tutorial

Unlock the power of design consistency with "Dynamic Color Palette with Named Formulas"! Discover how to centralize color management in Power Apps, ensuring a cohesive user experience while simplifying updates. Learn to style your application's elements effortlessly using named formulas for a scalable approach. Don’t miss this essential tutorial for Power Platform enthusiasts!

03:53
267 views

Available in Microsoft365

00:00:04

the visual appearance of an application plays a

00:00:06

crucial role in ensuring a good user experience,

00:00:09

reinforcing graphic consistency,

00:00:12

and adhering to company standards.

00:00:14

Thanks to name formulas,

00:00:16

it is possible to centralize color management in a single location,

00:00:20

thereby ensuring perfect harmonization

00:00:23

and greatly simplifying future updates.

00:00:26

In this tutorial,

00:00:27

we will learn how to create a dynamic color palette using name formulas.

00:00:32

We will use this palette to style various

00:00:35

interface elements in a simple and scalable manner.

00:00:38

Using centralized colors allows for a

00:00:41

visual unification of the entire application

00:00:44

by following a primary theme,

00:00:46

often dictated by a corporate design charter.

00:00:49

It also ensures that any future changes can be made through a single formula update

00:00:55

without the need to manually adjust each screen or component.

00:01:00

In the application tree,

00:01:02

select the app object.

00:01:04

Then,

00:01:04

in its properties,

00:01:06

go to the formula section and enter the following formula.

00:01:10

Each property corresponds to a specific usage.

00:01:14

Primary color,

00:01:16

secondary color,

00:01:17

accent color,

00:01:18

background,

00:01:19

and text color.

00:01:21

The name FX palette is provided as an example.

00:01:24

You may choose another naming convention.

00:01:27

All your colors will thus be centralized

00:01:30

and easily reusable throughout the application.

00:01:34

Now that the name formula FX palette

00:01:37

has been defined with the various interface colors,

00:01:40

it is time to apply it to your visual elements.

00:01:43

This step will harmonize the appearance of your application

00:01:47

while facilitating future changes.

00:01:50

Here's how to proceed.

00:01:51

Start by inserting a button onto the screen via the insert menu.

00:01:57

Once the button is added,

00:01:58

select it and access the fill property,

00:02:01

which corresponds to the button's background color.

00:02:04

In the formula bar at the top of the editor,

00:02:07

replace the default value,

00:02:09

usually in RGBA code,

00:02:11

with FX palette primary.

00:02:14

You will immediately see the button adopt

00:02:15

the primary color defined in your palette.

00:02:19

Next,

00:02:19

insert a label to display text.

00:02:22

Once inserted,

00:02:23

select this control and access the color property,

00:02:26

which determines the text color.

00:02:29

Enter the formula FX palette.text.

00:02:33

The text now displays in the designated text color of the application.

00:02:38

To customize the screen background,

00:02:40

click on an empty space in the app to select the main screen.

00:02:44

Once selected,

00:02:45

open the fill property in the top bar,

00:02:48

then replace the existing value with FX palette.

00:02:51

Background.

00:02:52

The application's background will automatically take on

00:02:55

the background color defined in your palette.

00:02:59

Finally,

00:02:59

you can also create a secondary button using

00:03:02

a different color than the primary button.

00:03:05

To do so,

00:03:06

insert a new button or duplicate the one you already styled.

00:03:10

In the fill property,

00:03:11

enter the Value FX palette secondary

00:03:14

to apply a secondary tone.

00:03:17

Then in the color property,

00:03:19

enter again FX palette.text,

00:03:22

so the text remains consistent with the rest of your interface.

00:03:26

Thanks to this method,

00:03:27

all visual elements of your application

00:03:30

will automatically adopt the colors defined in the name formula.

00:03:34

This allows you to centralize the management of your design system.

00:03:38

If you ever decide to change a color in FX palette,

00:03:41

all linked components will instantly update without needing

00:03:45

to manually adjust each element one by one.

00:03:48

It is a clean,

00:03:49

consistent,

00:03:50

and scalable approach.

Mandarine AI: WHAT YOU SHOULD KNOW

RELATED COURSES This tutorial is part of the following courses

206 Views

Video Training Microsoft PowerApps : Mastering advanced features with variables, named formulas, and automation

Discover advanced Power apps features to build even more powerful, dynamic, and maintainable applications. This module guides you step by st...

ALL COURSES