Even the most engaging app starts with an impressive introduction screen that reflects the essence of your business or personal brand. In this post, I’ll show you how to create a splash screen in PowerApps!
Scenario
First of all: Why should you create a splash screen in PowerApps?
Coherent branding on the introductory screen of an app is of central importance, as it significantly shapes the first impression and contributes to recognition. Clear and consistent branding effectively communicates the brand’s identity and message, which can build trust and credibility with users. It also enables differentiation from the competition by giving the app a distinctive and memorable brand image.
As you can see, the intro or splash screen is displayed when you open the PowerApp. It is only a really short sequence that lasts no longer than 2 seconds.
So let’s check out how we can achive this:
What you need to create the splash screen
UI elements
Let’s start with talking about the UI.
Looking for a rectangle in PowerApps? Yep – me too! So I created the user interface of my splash screen myself.
So far there is no rectangle where you can simply use the border line and crop the interior at the same time. So I simply built one myself by using four rectangles and linking them together (see Rectangle8 to Rectangle(8_3).
If you work with these rectangles, I recommend giving them a better name like rctgl_X. In this case, however, they are only used for visual outlining, which is why I have dispensed with them.
The UI elements of my splash screen therefore consist of
- rectangles as boarder
- labels
- an image
- a simple circle icon.
And here comes the first trick: All these elements you need for the grouped splash screen in PowerApps are placed on a rectangle, which I have called rtgl_PopUpIntro and which represents the background.
To add functionality to the splash screen later, everything must then be grouped into one element (see grp_Intro).
grp_Intro is placed on a home display as the first element.
I have opted for a white background (see Fill RGBA(255;255;255;1)).
Add functionality
Using the Invisible Timer Trick
What we want to achieve then is that the splash screen appears for a few seconds when the app is started.
To do this, we use trick no. 2: an invisible timer that controls the length of this pop-up.
To make the timer invisible, set the “Visible” property to false.
The duration of the splash screen is then determined by the timer. This means that a length in milliseconds must be set under “Duration“. 1500 milliseconds corresponds to a duration of 1.5 seconds.
Time to add some functionality.
There are two things that need to be considered:
- The timer should start automatically when the app is opened.
- The timer controls whether the pop-up intro starts or not. However, it should only start once and not again when navigating back to the screen.
Therefore, we set two control variables:
- varLoading to start the intro pop up grp_Intro.
- varCount to make sure the pop up doesn’t apprears another time after the first load.
varLoading needs to be put into the “OnTimerStart” action which starts the timer when varLoading is true to start the splash screen.
It must also be inserted in “OnTimerEnd” to end the pop-up when the duration has expired.
The pop-up should only appear if varCount is set to 1. So we set it to 0 so that no further pop-ups are generated.
Control variables
So how does the splash screen finally work?
To use the variables as start controls, we need to set the variables to the “OnStart” action of the entire application.
And we set the “Visible” property of grp_Intro to the variables we have just defined.
That’s it! Your splash screen will pop up when the app is started.
Now you know how to create your own splash screen in PowerApps. Hope this was useful!
