top of page

Enhance user training with interactive prompts in Power Apps

Are static PDF training guides a thing of the past?

User adoption and training is critical to the success of application uptake within a business. This article shows how to create interactive prompts within Power Apps, designed to enhance the training process by highlighting features within a Power App. The number of clicks on different topics can be reported to provide training insights and behaviour analysis, indicating where training effort should be focused.


Training tips

These countdown buttons automatically activate after a period of time. This article explains how to create these prompts using native Power Apps controls - without any custom code components.


Close up of countdown buttons

Like the app UI? Check out my related article about gallery styling


Creating prompts

The basic technique required a global variable which controlled the visibility property of each specific prompt dialogue. The training mode was activated with a toggle switch, setting the variable to 1 and therefore displayed the first prompt. This numeric value then incremented after each prompt had been displayed. Deactivating the toggle reset the value to 0, meaning no prompts were shown.


Turning on training prompts

Global variable values



OnCheck property of the toggle switch:

Set(gloVar_Tip, 1) //This activates the first prompt

OnUncheck property of the toggle switch:

Set(gloVar_Tip, 0) //This hides and resets the prompts

OnSelect property of the 'Next' buttons:

Set(gloVar_Tip, gloVar_Tip+1) //This increments the global numerical value to the next number

Visible property of the prompt dialogues:

gloVar_Tip = 1  //This number is set manually to control each prompt

Tip: The visibility setting was applied to a container in which all elements for the prompts were positioned.

I created the callout shapes with a drop shadow in SVG format.


Call out SVGs

You can download and copy the code in these .txt files into an Image in Power Apps:


CallloutBlueL
.txt
Download TXT • 2KB
CallloutBlueR
.txt
Download TXT • 2KB



Advanced styling - countdown buttons

Close up of countdown buttons

Countdown timer

A single timer was used to control all the countdown buttons within the separate prompts. The following properties were used for the timer control to achieve the desired effect:

Duration

7000

Repeat

true

Auto start

true

Auto pause

false

Visible

false

OnTimerEnd

If(gloVar_Tip>0, Set(gloVar_Tip, gloVar_Tip+1)); //This increments the variable, providing it's greater than 0
If(gloVar_Tip>4, Reset(tgl_Training)); //This switches off the training mode toggle

Start

gloVar_StartTimer //Either true or false

Updated OnCheck property of the toggle switch:

Set(gloVar_Tip, 1); //This activates the first prompt
//Restart the timer from the beginning
Reset(tmr_TipTimer); Set(gloVar_StartTimer, false); Set(gloVar_StartTimer, true); 

Updated OnUncheck property of the toggle switch:

Set(gloVar_Tip, 0); //This hides and resets the prompts
// Reset timer (but don't restart)
Reset(tmr_TipTimer)

Updated OnSelect property of the 'Next' buttons:

Set(gloVar_Tip, gloVar_Tip+1) //This increments the global numerical value to the next number
// Reset timer
Reset(tmr_TipTimer); Set(gloVar_StartTimer, false); Set(gloVar_StartTimer, true);

A slider control was used with the following properties to achieve the desired effect:

Default

tmr_TipTimer.Value

DisplayMode

DisplayMode.View

HandleFill

RGBA(0,0,0,0) //Transparent

HandleSize

10000 //Huge, so it disappears

Max

tmr_TipTimer.Duration

RailFill

RGBA(39, 113, 194, 1)

RailThickness

100

ValueFill

ColorFade(Self.RailFill, 10%)

For more tips using sliders, check out this related article

I positioned a rectangular button, with a border radius of 0, on top of the slider. This gave the impression of a button fill animation. I set the Fill property to be transparent.


The countdown text was added as follows:

Round((sld_Prompt1.Max-sld_Prompt1.Value)/1000,0)

This subtracts the dynamic slider value from the maximum value, converts it to seconds by dividing the number by 1000 and then rounds it.



Take it further

Develop your prompts further by adding images, videos, hyperlinks, polls, feedback, buttons and anything else you could possibly imagine. The aim is to minimise content on screen to reduce intrusion, and provide links to additional resources if required.


Take it further

The number of button clicks can be stored and reported on over time to gauge interactions and provide training insights. This feedback can contribute towards focusing effort on additional training.



Summary

This article promotes the shift from static PDF training guides to interactive prompts within Power Apps using native controls to improve user training and application adoption. I showed how to control the visibility and timing of the prompts with some basic controls including a toggle switch, timers control, sliders and SVGs.


In-app training prompts are more engaging, more easily maintainable and can even help provide interaction insights. Remember, these interactive prompts can significantly improve user understanding and adoption of Power Apps features.


The are several methods to achieve these results and I look forward to hearing about other solutions or any feedback on this one.


Thank you for reading!

Comments


Commenting has been turned off.
bottom of page