55265A - Microsoft PowerApps - Skillpipe - Mod - 3

28/5/2020 Module 3 - Branding and Media
Module 3 - Branding and Media
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No aro be No aro be
un ara long un ara long
au au
tho ujo3 s to tho ujo3 s to
riz @ A riz @ A
ed gm lvar ed gm lvar
co ail o co ail o
pie .co Arau pie .co Arau
sa m jo. sa m jo.
llo llo
we we
d! d!
Th Th
is is
do do
cu cu
me m
alv nt alv ent
No aro be No a be
un ara long un roara long
au a
tho ujo3 s to uth uj
ori o3@ to Al
s
riz @ Alv z
ed g ma aro ed g ma varo
co i co
pie l . c A r piebe ireproduced
l.c Ar
Copyright © Combined Knowledge s a oLtd. m Allaurights
jo. reserved. No part of this manual may s a om
au in any form
jo.
or by any method without the expressed, l l o written consent of Combined Knowledge. l l o
we we
d! d!
Please call 44-1455-200-520 for more information.
V 2.0
Table ofThContent Th
is is
do do
cu cu
m m
alv ent alv ent
No aro be No a be
un TABLEara OF lon CONTENT
g un roara long
au au
riz @ A riz @ A
TOPICS ed gm lvar ed gm lvar
co a o co a o
pie il.co Arau pie il.co Arau
BRANDING all s m jo. sa m jo.
ow llo
ed we
! d!
LESS IS MORE
DUPLICATE SCREENS
FONTS
SCREEN COLOURS
Th Th
is is
doSCREEN BACKGROUNDS do
cu cu
me m
alvBUTTONS
nt alv ent
N a b N a b
https://www.skillpipe.com/#/reader/book/9bfdd7c5-db74-411a-816d-bad3559be2fa 1/23
SIZE AND ALIGN BY REFERENCE
TIMER
HIDE ON TIMER
ICONS
MEDIA
Th EMBED MEDIA Th
is is
do do
cu cu
me m
alvIMAGESn BY URL alv ent
No aro t bel No aro be
un ar on
gs un ara long
uth aujSOURCES
aVIDEO au
tho ujo3 s to
ori o3@ to Al riz @ A
ze
d c gma
va
r ed gm lvar
Video Control
op il.c o Ar co ail
pie .co Arau
o
ies om au
all jo. sa m jo.
AUDIO CONTROL o llo
we we
d! d!
KEY POINTS
LAB 3 – BRANDING AND MEDIA
Topics Th
is
do
Th
is
do
cu cu
m m
alv ent alv ent
No aro be No aro be
au au
riz @ A riz @ A
co ail o co ail o
sa m jo. sa m jo.
llo llo
we we
d! d!
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No a be No a be
un roara long un roara long
au au
riz @ A riz @ A
co a o co a o
sa m jo. sa m jo.
llo llo
we we
d! d!
In this module you will learn how to achieve a consistent branding across multiple screens in your app. Including
options such as font, colour and background. Good branding will drastically improve your user’s perception of your
app and therefore encourage them to use it more.
You will alsoT learn how to consume media in your app including images,
Th video and audio.
his is
do do
cu cu
me me
Branding N
a lva n tb N
a lva nt b
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No aro be No aro be
au au
riz @ A riz @ A
co ail o co ail o
sa m jo. sa m jo.
llo llo
we we
d! d!
The first lesson is branding, you will study a range of functionality designed to help you customise your apps
appearance. You will study work with many different controls, including screen, buttons and icons. You will also
learn some Tsimple
his Th
formulas that can be useful when applying branding.is
do do
cu cu
me m
alv nt alv ent
Less is More No aro be No a be
au a
ori o3@ to Al
s
riz @ Alv z
co i co
pie l . c A rau pie il.co Arau
s a om jo. sa m jo.
llo llo
we we
d! d!
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No a be No a be
au au
riz @ A riz @ A
co a o co a o
sa m jo. sa m jo.
llo llo
we we
d! d!
Before we look at the many ways that you can customise the appearance of your app, it is worth mentioning that
the best looking, and most user-friendly apps are very simple. On your mobile phone, open some of the apps that
you use most often, apps like your online banking, eBay and Amazon, they all use very few colours, fonts and
images. T Th
his is
do do
cu cu
me m
alv nt alv ent
N a b N a b
Just because Power Apps lets you use garish colours and fonts that look like hand writing, does not make it a good
idea. The slide above shows the same app twice, the first image shows what the app might look like with lots of
variety of fonts, font size, colours and button sizes.
The second image shows the same app with consistent use of fonts, colours and sizes. In the second image we
have also hidden the timer control, by setting its visible property to false. This can be a useful exercise for any
controls that you do not want users to see.
Th Screens
Duplicate Th
is is
d oc do
um cu
m
alv ent alv ent
No a be No aro be
un roara long un ara long
au au
riz @ A riz @ A
co ail o co ail o
sa m jo. sa m jo.
llo llo
we we
d! d!
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No aro be No aro be
au au
riz @ A riz @ A
co ail o co ail o
sa m jo. sa m jo.
llo llo
we we
d! d!
A useful method to improve the speed that you can build apps is duplicate screen. Duplicate screen allows you to
create one perfect screen, with controls, background, formulas and more, then create an exact copy of that screen,
or even several copies within a few seconds.
The process does not link the original screen with the duplicate screen, this means that the new screen can now be
customisedTwithout fear of ruining the original screen. Th
his is
do do
cu cu
me me
Fonts No lvar t be
a n
No lvar
a nt
be
un oa lon u oa lon
au r a g n au r a g
riz @ A riz @ A
co a o co a o
sa m jo. s all
m jo.
llo ow
we e
d! d!
Th Th
is is
do do
cu cu
m m
alv ent alv ent
N a b N a b
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No aro be No aro be
au au
riz @ A riz @ A
co ail o co ail o
sa m jo. sa m jo.
llo llo
we we
d! d!
The default font in Power Apps is called Open Sans, there are also thirteen other fonts to choose from.
Ththat displays text, such as labels and buttons can use aThfont of your choosing. It is possible to set the
Each control is is
do do
cu
font and other properties for multiple controls on the same screen: cu
me m
alv nt alv ent
No aro be No a be
1. Using the CTRL+Aa uth ujshortscut to select all controls on the screen or ut a ujo st
ori o3@ to Al ho
riz 3@g
oA
ze
dc g ma v aro ed ma lvaro
il.c co
2. Hold down your left mouse op
ies button
om and
Ar drag a selection box over multiple controls
au pie il.co Arau
all j o. sa m jo.
ow llo
Note: You can’t drag from outside ed of the screen design area inwards, this will not select eany w
! d! controls.
Th Th
is is
do do
cu cu
me m
alv nt alv ent
No a b e N o u aroa belo
un roara long na r n
au
tho ujo3 s to uth aujo gs to
riz @ A o riz 3 @ A
co a o co a o
s m jo. s m jo.
or all all
ow ow
ed ed
! !
3. Hold down the SHIFT or CTRL key on your keyboard while clicking once on each control you wish to select
Screen Colours
Th Th
is is
do do
cu cu
m m
alv ent alv ent
N a b N a b
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No aro be No aro be
au au
riz @ A riz @ A
co ail o co ail o
sa m jo. sa m jo.
llo llo
we we
d! d!
A white screen colour can make your app look unfinished. If you have specific colours in your companies branding
guide that will be a good place to start. If you have not been provided with any specific colours, look at your
company’s Tintranet,
his or public facing website for inspiration. Th
is
do do
cu cu
me me
a n a lva nt b
No lvacolour:
To set the screen tb
e N el
un roara long ou
na
roa
rau ongs
au u jo s u jo
tho to tho to
riz 3@g A riz 3@g A
1. Click on the screen ed ma lvaro ed ma lvaro
co c
pie il.co Arau op il
ies .com rauj
A
sa m jo. a o.
llo llo
we we
d! d!
2. In the properties pane click the Fill option
Th Th
is is
do do
cu cu
me m
alv nt alv ent
N a
3. Select ao standard b
orecustom colour N o u aroa belo
au
Note: Custom colour @ A
is gthe most o
accurate way to apply a specific colour based 3 @on Alv or HEX
riz
ed ma lvaro
riz
ed gmRGB aro
co co a
sa m jo. sa m jo.
llo llo
we we
d! d
Each screen has its own colour, the colour is set independently to the app and other screens. !
If you have several screens in an app, and you think that it is likely that the screen colour will need to be changed
multiple times in the future, it is worth looking later in this module at “Size and Align by Reference”. Using the same
technique, you can centrally manage the updating of screen colour
Th
Matching Colours Th
is is
do do
cu cu
m m
alv ent alv ent
N a b N a b
If you do not know the hex or RGB values for a colour that you need to use in your app, but you have an image that
is the correct colour, you can paste the image use PowerPoint or other tools to work out the RGB value of the
colour.
To use PowerPoint to work out the RGB value of the Power Apps logo pictured below:
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No aro be No aro be
au s t PowerPoint au
1. Copy the sample ujo
tho image to oA tho ujo3 s to
riz 3@g riz @ A
ed ma lvaro ed gm lvar
ail o
c co
2. pie il.co Arau
Click Insert, Shapes,oRectangle pie .co Arau
sa m jo. sa m jo.
llo llo
we we
3. Select the rectangle d! d!
4. Click Format, Shape Fill, Eyedropper
5. Click on the colour you need in the sample image As you hover your mouse pointed over part of the image
you will see the RGB value, notice that slight movements on what can look like the same colour will have
variations in values.
Th Th
is is
do do
cu cu
me m
alv nt alv ent
No aro be No a be
au a
ori o3@ to Al
s
riz @ Alv z
co i co
s a om jo. sa m jo.
lo l
6. You can see the RGB value lagain we by clicking Format, Shape Fill, More Fill Colourslowe
d! d!
Screen Backgrounds
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No a be No a be
au au
riz @ A riz @ A
co a o co a o
sa m jo. sa m jo.
llo llo
we we
d! d!
Th Th
is is
do do
cu cu
m m
alv ent alv ent
N a b N a b
An alternative to using screen colour is screen backgrounds. Screen backgrounds allow you to set an image that is
embedded in the app for use as your background.
Depending on the size of your background image and how you configure the image position the background colour
might still be visible.
The slide above shows how a small landscape image appears with a variety of different image positions applied.
T Th
To remove ahbackground
is image and return to using background colour,isyou will need to:
do do
cu cu
me m
alv nt alv ent
N
1. Click ono the a b N
el wish to remove the background image from a roa belo
un screen
roa you
rau ongs
ou
na r n
au
tho jo3 to uth aujo gs to
riz @ A o riz 3 @ A
co ail oA cop a i l oA
pie .co rau ies .com rauj
sa m jo. all o.
llo ow
we ed
d! !
2. At the top left corner of the page, scroll to the BackgroundImage property
Th Th
is is
do do
cu of the image from the formula bar, in the example above
3. Delete the name cu frenchflag
me m
alv nt alv ent
No aro be No a be
au a
ori o3@ to Al
s
riz @ Alv z
Buttons ed g ma aro ed g ma varo
co i co
s a om jo. sa m jo.
llo llo
we we
d! d!
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No a be No a be
au au
riz @ A riz @ A
co a o co a o
sa m jo. sa m jo.
llo llo
we we
d! d!
Buttons are a simple way for users to interact with your app. When a user clicks a button, you can control what
happens next,
Th whether they are navigated to another screen, play a Tvideo
his or even perform some calculations.
is
do do
cu cu
me m
alv nt alv ent
N a b N a b
When a user clicks a button, the button changes colour to make it clear to the user that the click was successful.
This visual feedback is reassuring and hopefully stops the user pressing the same button several times in a row. In
the slide, you can see the default button is blue, and the “pressed color” is white.
OnSelect
The event that is triggered when a user clicks on a button is onSelect. When you are editing an app and you click
on a button, you can then select the onSelect event in the property drop down menu. The default formula is “false”,
Th to delete this to add your formula.
you will need Th
is is
do do
cu cu
me m
alv nt alv ent
No
Enter your formula ain the bformula
e bar, in the example below we are N
using roa belo
navigate.
a
un roara long ou
n r n
au
tho ujo3 s to
a uth aujo gs to
riz @ A o riz 3 @ A
sa m jo. all o.
llo ow
we ed
d! !
If you do not
Thlike the look of buttons, you can use icons or images asThalternative.
is is
do do
cu cu
me me
Size andNoAlign a lva by n t b Reference
e N
a lva nt b
el
un roara long ou
na
roa
rau ongs
au u jo s u jo
tho to tho to
riz 3@g A riz 3@g A
ed ma lvaro ed ma lvaro
co c
pie il.co Arau op il
ies .com rauj
A
sa m jo. a o.
llo llo
we we
d! d!
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No a be No a be
au au
riz @ A riz @ A
co a o co a o
sa m jo. sa m jo.
llo llo
we we
d! d!
You can customise your buttons (and other controls), including their colour, width, height and many other
properties. To make your app look consistent and professional, it is a good idea to make all your buttons look the
same size. This can be easier said than done, especially if you are still testing a few ideas for your branding, and
you are changing button sizes multiple times.
Th Th
is is
do do
cu cu
To save you time andmekeep the button consistent, you can set the size of one me
alv nt alv button
nt based on the size of another
N a b N a b
button. In this way, when the first button is resized the other button will automatically change size.
This process can even be scaled up so that changing the size, colour or even position of one button will change all
the other buttons in your entire app.
To set the width of a button, based on the width of another button, instead of using a specific size for the width such
as 200, you will reference the width property of the other button. The formula is simple, use the buttons name then
a dot, followed by the property.
In the example below, we are setting the width of button 2 using Button1.Width.
Th Th
is is
do do
cu cu
me m
alv nt alv ent
No aro be No a be
au a
ori o3@ to Al
s
riz @ A
ed gm lvar ze
dc g ma varo
co ail oA o il.c A
p ies . com r athis p ies using omtheramouse,
Note: If you then manually resize ujo button, by dragging the edge of the button ujo you will
all . all .
lose the formula, and revert owback to a specific width value like 200. ow
ed ed
! !
Timer
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No aro be No aro be
au au
riz @ A riz @ A
co ail o co ail o
sa m jo. sa m jo.
llo llo
we we
d! d!
Th Th
is is
do do
cu cu
me m
alv nt alv ent
au uj st uth aujo gs to
The timer control isthuseful
ori o3when@ oyou
A want
lva
to either: o riz 3 @ A
ze
d c gma ro ed gm lvar
il co a o
op
ies .com rauj
A pie il.co Arau
o. s m jo.
1. Record how much time a business all process has taken (like a stop watch) all
ow ow
ed ed
! !
2. Run a formula automatically after a period of time, rather than waiting for a user to click
The use of a timer to automate processes can also reduce or simply the inputs that need to be made by a user.
Timers are Tnot a pretty control, typically when a timer has been added
Th to a screen we set the timers visible property
his is
to false so that itdocan’t be seen. do
cu cu
me m
alv nt alv ent
N a b N a b
Timers have a duration property; the duration is measured in milliseconds, a value of 1000 equals 1 second. When
a timer has started, and the duration has passed the OnTimerEnd event runs. It is also possible, to run an event
when the timer first starts, or when a user clicks on the timer (this is not possible if the timer’s visible property is set
to false).
Add a Timer and configure a Timer
1. Select the screen where you wish to use the timer

Th Th
is is
2. Click Insert,do Controls, Timer (you might need to scroll down in the dmenu)
oc
cu um
me
alv nt alv ent
No a be No a be
au a
ori o3@ to Al
s
riz @ A
ed gm lvar ze
dc g ma varo
co ail oA o il A
3. p . c
At the right of the page, ieins the opropertiesr au page set: p ies .com rauj
m j o o.
all . all
ow ow
ed ed
Duration: 5000 ! !
Repeat: On
Auto Start: On
This combination of settings tells the timer to:
• Start the timer counting automatically when the screen loads

Th Th
is is
• Count for do 5 seconds do
cu cu
me m
alv nt alv ent
N
• Repeat a
o u theroprocessb e N a roa belo
na ara lonuntil
g
the user exits the screen ou
n r n
uth ujo st
o
a uth aujo gs to
o 3 ori 3
4. ze @F5
Click Preview orripress d c gma
to Atest
lva the timer ze @gm Alva
dc
ro r
op il A op ail.c o Ara
ies .com rauj ies om ujo
The time will count from 0 to all 5 then starto. at 0. all .
ow ow
ed ed
! !
5. Near the top right corner of the page click the black cross or press ESC on your keyboard, to exit the preview
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No a be No a be
au au
riz @ Alv riz @ A
gm lvar
Hide on Timer ed co gmail. aro A ed
co a o
pie c rau pie il.co Arau
s a om jo. sa m jo.
llo llo
we we
d! d!
Th Th
is is
do do
cu cu
m m
alv ent alv ent
N a b N a b
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No aro be No aro be
au au
riz @ A riz @ A
co ail o co ail o
sa m jo. sa m jo.
llo llo
we we
d! d!
The timer can run formulas in three different situations:
1. Th - when the timer control is clicked by a user

OnSelect Th
is is
do do
cu cu
me m
2. OnTimerStart alv - whennt the timer starts counting alv ent
No aro be No a be
au ujo st a uth uj s
3. OnTimerEndth-owhen
riz 3@g
the timer
o A has counted to its duration
l ori o3@ to Al
ed ma v aro zed g ma varo
co i co
s a om jo. sa m jo.
llo llo
we we
Let’s try something fun, we will make a d! button appear for two seconds then hide for two seconds d! repeatedly. For
this we will add a formula to the OnTimerEnd event of the timer.
1. Navigate to a screen in your app
2. Click Insert, Button then click Insert, Controls, Timer
3. Th timer to the right of the button, so that they aren’t overlapping

Drag the Th
is is
do do
cu cu
me m
alv nt alv ent
au
riz @ A o riz 3 @ A
co a o co a o
sa m jo. s all
m jo.
llo ow
we e
d! d!
4. Set the timer properties:
Duration: 2000
Repeat: On
Auto Start: On
Th Th
5. While the
is timer control is still selected. At the top left corner of theis page in the properties drop down, click
do do
OnTimerEnd umec cu
m
alv nt alv ent
N a b N a b
Th Th
is is
6. do bar type Set(varShowHide,!varShowHide)
In the formula do
cu cu
me m
alv nt alv ent
N
As you otype a b
this formula
e N
you might find that some words are initially a roa beloas though they contain errors,
o u underlined
un roara long n n
a
this underline uj
uthwill disappears when you click away from the formula. ut raujo gs t
a
ori o3@ to A lva
ho
riz 3 @ o Alv
ze
d c gma ro ed gm
cvalue ail
aro
What the formula does, il.c aAvariable
op is create called varShowHide, and sets the o to True. A
ies om r au
jo.
p ies . c om rWhenau
jo.
the
formula is run subsequent times, a llo a l tell the variable to
we the value of varShowHide is reversed to false, the “!”low ed
reverse its value from true to false d! or false to true. !
7. Click on the button that you added to the screen in step two
Th Th
8. Near theistop is select Visible
do left corner of the page, from the properties drown down,do
cu cu
me m
alv nt alv ent
9. In the Nformula
ou a bar,
roa b
type
el varShowHide N ou a roa belo
na rau ongs na r n
uth jo3 t o uth aujo gs to
ori ori 3
ze @gm Alva ze @gm Alva
dc ro dc r
op a il A op ail.c o Ara
ies .com rauj ies om ujo
all o. all .
ow ow
ed ed
! !
10. Click preview or press F5 on your keyboard, you should see the button appear then disappear every two
seconds, and the timer counting to 2 seconds then returning to 0.
11. Near the top right corner of the page click the black cross or press ESC on your keyboard, to exit the preview
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No a be No a be
Icons un roara long un roara long
au au
riz @ A riz @ A
co a o co a o
sa m jo. sa m jo.
llo llo
we we
d! d!
Th Th
is is
do do
cu cu
m m
alv ent alv ent
N a b N a b
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No aro be No aro be
au au
riz @ A riz @ A
co ail o co ail o
sa m jo. sa m jo.
llo llo
we we
d! d!
Icons are a prettier alternative to buttons, Microsoft provide a library with approximately 100 icons available for free.
Th to your screen, click Insert, Icons then scroll down through

To add an icon Th the list of icons.
is is
do do
cu cu
me me
a nt a nt
No lvar be No lvar be
oa lon oa l
un
au rau gs u na rau ongs
tho jo3 to uth jo3 to
A ori
riz
ed
@
gm lvar ze @gm Alva
co a o d co a ro
sa m jo. sa m jo.
llo llo
we we
d! d!
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No a be No a be
au au
riz @ A riz @ A
co a o co a o
sa m jo. sa m jo.
llo llo
we we
d! d!
Down at the bottom of the icons list you will find basic shapes including circles, rectangles and triangles.
When an icon is selected you can configure the icon in the properties pane.
Unlike a button, icons do not have a pressed colour property, they do have something similar, called Focused
border. TheTimage
his below shows two icons the right icon has been click Th by a user and is now showing its focused
is
d
border. This makes do
oc it easy for a user to identify which icon is currently selected.
um cu
m
alv ent alv ent
N a b N a b
Media
Th Th
is is
do
Embed Media do
cu cu
me m
a nt alv ent
No lvar be No aro be
oa l ara long
un
au rau ongs un
au
tho jo3 t tho ujo3 s to
riz @ o Alv riz @ A
ed gm aro ed gm lvar
co a co ail o
pie il.co Arau pie .co Arau
sa m jo. sa m jo.
llo llo
we we
d! d!
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No aro be No aro be
au au
riz @ A riz @ A
co ail o co ail o
sa m jo. sa m jo.
llo llo
we we
d! d!
To make your app unique and interesting, it is useful to have a variety of media that can be used thorough out the
screens in your app. It is possible to embed images, video and audio in to an app, up to 200MB in total. Embedded
files can be a maximum size of 64MBs.
Embedded media is useful for a few reasons:

Th Th
is is
do do
cu cu
• Available even me you do not have an internet connection m
alvwhen nt alv ent
No a be No a be
au all screens au
• Can be used on tho ujo3 sin t the app tho ujo3 s to
riz @ o Alv riz @ A
co a co a o
sa m jo. sa m jo.
llo llo
To embed content in to your app: we we
d! d!
1. Click File, Media
2. Click the type of media you wish to upload, then at the right of the page click Browse
Th Th
is is
do do
cu cu
m m
alv ent alv ent
N a b N a b
Th Th
is is
do do
cu cu
me m
3. SelectNyouralvfile(s),
nt then click Open alv ent
ou a roa belo No
un
aro be
ara long
na r n
uth aujo gs to au
tho ujo3 s to
ori 3@ Alv riz @ A
ze
d c gma ar ed gm lvar
op il.c o Ara co ail
pie .co Arau
o
ies om ujo sa m jo.
all . llo
ow we
ed d!
!
Note: Ensure you are happy with the names of the files, they can’t be changed after the upload.
Tip: You can also upload an image from a URL (web address), paste the full URL of the image in to the
Filename box instead of selecting a file. A copy of the image will be embedded in to the app.
4. At the top left corner of the page, click the arrow to exit the media window and return to the app
Th Th
is is
do do
cu cu
me m
alv nt alv ent
No aro be No a be
au a
ori o3@ to Al
s
riz @ Alv z
co i co
s a om jo. sa m jo.
To use an image that has been lembedded: low llo
w
ed ed
! !
1. Click Insert, Media, Image
2. In the formula bar, delete SampleImage, then type the first few characters of the images name
Th Th
is is
do do
cu cu
me m
alv nt alv ent
au
riz @ A o riz 3 @ A
co a o co a o
sa m jo. s all
m jo.
llo ow
3. You will be offered a list of matching we objects, not all of these are images. e
d! d!
4. Click on the name of your image
Th Th
is is
do do
cu cu
m m
alv ent alv ent
N a b N a b
Th Th
is is
do do
cu cu
me m
alv nt alv ent
To addNosomeamovement b e to your images you can also use animated
N GIFs.
a roa belo
un roara long ou
n r n
au
tho ujo3 s to
a uth aujo gs to
riz @ A o riz 3 @ A
. ies .com rauj
Delete Embedded Media pies com raujo o.
all . all
ow ow
ed ed
! !
You can delete media that is embedded in an app. If you have embedded an image, audio file or video and decided
that the media is no longer needed It is simple to remove.
1. Click File, Media
2. Click the Delete icon (trash can) to the right of the image
Th Th
is is
Note: If you do attempt to delete media that is still being referenced in dthe
oc app, you will be allowed to delete the
cu um
me en description, the example below
media withouta any nt warnings. Before you delete any media look at the
a medias
No lvar be No lvar tb
elo
un
tells me “Used oin lon
ara1 place(s)”. This is a good indicator that I shouldunot o
delete
ara the ngmedia.
au g s n a
tho u jo3 to u tho u jo3 s to
riz @ A riz @ A
co ail oA cop a il oA
sa m jo. all o.
llo ow
we ed
d! !
If you Tdo delete media that is still being referenced the control where
Th the media is referenced will show a
his is
warning icon do as pictured below. If you hover your mouse pointer over do the warning symbol you will see the
cu cu
m me
alv enName”.
message “Invalid t a l v nt
au
riz @ A o riz 3 @ A
co a o co a o
sa m jo. s all
m jo.
llo ow
we e
d! d!
Images by URL
Th Th
is is
do do
cu cu
m m
alv ent alv ent
N a b N a b
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No aro be No aro be
au au
riz @ A riz @ A
co ail o co ail o
sa m jo. sa m jo.
llo llo
we we
d! d!
Images do not have to be embedded in the app. You can reference images that are stored online. There are
potential advantages and disadvantages to this technique.
Th Th
is is
do do
Advantages cu cu
me m
alv nt alv ent
No aro be No a be
a s t and used in multiple app (embedded images a s
• Images can beuhostedtho ujoonline oA uth areujonly
ori o3@ to Al
available to one app)
riz 3@g lv z g v
ed ma aro ed ma ar
• You can update an image co without
pie il.co having Ar to edit or republish your app co
p il.c o Ar
a ujo i es o au
sa m . all
m jo.
llo o
we we
d! d!
Disadvantages
• You need to host your images in an online location that all your users have access to
• If the images are moved, renamed or deleted your app will stop working (the app is no longer self-contained)
Th Th
is
• Images referenced is
using this method are not available when your device
do do is offline
cu cu
me m
alv nt alv ent
Video Sources au
riz @ A o riz 3 @ A
co a o co a o
sa m jo. s all
m jo.
llo ow
we e
d! d!
Th Th
is is
do do
cu cu
m m
alv ent alv ent
N a b N a b
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No aro be No aro be
au au
riz @ A riz @ A
co ail o co ail o
sa m jo. sa m jo.
llo llo
we we
d! d!
When creating Power Apps, videos can currently be sourced from within the app (embedded), Azure Media
Services or YouTube. More video sources are likely to become available over time, a popular request, is to access
videos fromTStream.
his Th
is
do do
cu cu
me me
a n a nt
No lvaup
Only small videos,
roa
tot b64MB
elo individually can be embedded in to the
N app,
ou
lvaanything
roa belo
bigger will need to be hosted
u na rau n g n r n
in one of the external
uth locations.
jo3 s to a uth a ujo gs t
ori ori 3 o
ze @gm Alva ze @gm Alva
dc ail r oA d co ail ro
If you have access to AzureopMedia ies .cServices
om rauj or YouTube, you can upload videos to these .co Araand use them
pie locations
o. sa m ujo
within your Power Apps, by referencing all their URL. llo .
ow w
ed ed
! !
Video Control
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No a be No a be
au au
riz @ A riz @ A
co a o co a o
sa m jo. sa m jo.
llo llo
we we
d! d!
Th Th
is is
do do
cu cu
m m
alv ent alv ent
N a b N a b
Now that you have established where your video will be stored and either copied the URLs of the videos or
uploaded the videos to your app, you are ready to display the videos.
The control that is used to display videos, regardless of their source is the Video control. To add a video control to
your screen:
1. Navigate to the screen where you want to display the video
2. Click Insert,
Th Media, Video Th
is is
do do
cu cu
m m
alv ent alv ent
No aro be No aro be
au au
riz @ A riz @ A
co ail o co ail o
sa m jo. sa m jo.
llo llo
we we
d! d!
Th Th
is is
do do
cu c
3. me hold down the ALT key on your keyboard and click uonce
To test the control, m on the center of the control (you
alv nt alv ent
N a
o u to be
don’t need b el
roa in preview mode) N ou a roa belo
na rau ongs na r n
uth jo3 t o uth aujo gs to
oi @ will Alvplay. If you keep the ALT key pressed down ori 3 Alv test moving forward
A sample video rwith ze audio zeyou @can also
d c gma aro d c gma aro
op and il A op il A
and backward in a video ies .cadjusting
om rauj the volume ies .com rauj
all o. all o.
ow ow
4. To the left of the formula bar, select e d e d
! the Media property (it might be selected by default) !
5. In the formula bar delete the words SampleVideo
6. If you Thave
his the URL of a video hosted in Azure Media ServicesTor hisYouTube, paste the complete URL in to the
d
formula bar,octhen do
um add double quotes before and after the URL. cu
m
alv e nt alv ent
au
riz @ A o riz 3 @ A
co a o co a o
Or sa m jo. s all
m jo.
llo ow
we e
If you want to reference a video dthat ! you have embedded in the app (File, Media), in the formula d! bar type the
first few characters of the name of the video, then select the video from the list that appears.
Th Th
is is
do do
cu cu
m m
alv ent alv ent
N a b N a b
Note: If you uploaded the videos previously, and can’t remember their names, click File, Media, then click
Videos. Here you can see the videos that have been embedded and upload or delete other videos.
You can configure the properties of the control, including whether the video will start automatically, start from
a specific point in the video or loop.
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No aro be No aro be
au au
riz @ A riz @ A
co ail o co ail o
sa m jo. sa m jo.
llo llo
we we
d! d!
Audio Control
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No aro be No aro be
au au
riz @ A riz @ A
co ail o co ail o
sa m jo. sa m jo.
llo llo
we we
d! d!
Th Th
is is
do do
cu cu
me m
alv nt alv ent
au
riz @ A o riz 3 @ A
The audio control can be used a
co toilplay o Ar within an app. The audio control is not cas a il.c aso the
A video control,
pie .co audio au op clever
i e om rauj
s m j o s o.
your audio files MUST be embedded a .
llo within the app not hosted online. a llo
we we
d! d!
The audio control can play audio from a video file that is hosted in the app.
If you want to play audio when a button or icon is clicked in app, you can do this with a short formula as described
below:
1. Th audio control to the screen (Insert, Media, Audio)

Add your Th
is is
do do
cu cu
m m
2. alv to ethe
Add a button nt screen (Insert, Button) alv ent
N a b N a b
3. Click the button control, in the formula bar type the following formula
4. Click the audio control
5. At the right of the screen click Advanced, type Auto

Th Th
6. is
In the AutoStart field delete false and type musicMe is
do do
cu cu
me m
a nt alv ent
No lvar be No aro be
oa l ara long
un
au rau ongs un
au
tho jo3 t tho ujo3 s to
riz @ o Alv riz @ A
co a co ail o
pie il.co Arau pie .co Arau
sa m jo. sa m jo.
llo llo
we we
d! d!
Th Th
is is
do do
7. cu
Click the preview icon or press F5 on your keyboard cu
me m
alv nt alv ent
No aro be No a be
8. Click the ubutton
na aand
rau the
lon music will play
g un roara long
uth j s a uth uj s
ori o3@ to Al ori o3@ to Al
z g
Note: Pressing theedbuttonmaagain v arowill not stop the music, click the pause button zed on m g the va control to stop the
co il A co ail audio ro
Ar
p i . co r a p i . c o au
music. es m ujo es m jo.
all . all
ow ow
ed ed
! !
Key Points
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No a be No a be
au au
riz @ A riz @ A
co a o co a o
sa m jo. sa m jo.
llo llo
we we
d! d!
Th Th
is is
do do
cu cu
m m
alv ent alv ent
N a b N a b
When creating an app always make time to ensure that you are following your companies brand guidelines.
Conforming to rules about colours and use of logos can feel restrictive they will make your app look professional
and help to make it fit in with other apps and systems within your organisation.
There are benefits to embedding media and using externally reference media. Test both to help decide which works
best for your app.
Th Th
is is
do do
cu cu
Lab 3 – Branding m
alv ent and Media m
alv ent
No aro be No a be
au a
ori o3@ to Al
s
riz @ A
ed gm lvar ze
dc g m va
r
co a o op ail.c o Ara
pie il.co Arau i e o ujo
sa m jo. sa m .
llo llo
we we
d! d!
Th Th
is is
do do
cu cu
m m
alv ent alv ent
No aro be No aro be
au au
riz @ A riz @ A
co ail o co ail o
sa m jo. sa m jo.
llo llo
we we
d! d!
Please turn to Module 9 lab 3 and complete exercises 1, 2 and 3.
This lab will give you an opportunity to create a Power App using a variety of controls and branding properties.
Th Th
is is
do do
cu cu
me m
alv nt alv ent
au
riz @ A o riz 3 @ A
co a o co a o
sa m jo. s all
m jo.
llo ow
we e
d! d!
Th Th
is is
do do
cu cu
m m
alv ent alv ent
N a b N a b

55265A - Microsoft PowerApps - Skillpipe - Mod - 3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

55265A - Microsoft PowerApps - Skillpipe - Mod - 3

Uploaded by

Copyright:

Available Formats

28/5/2020 Module 3 - Branding and Media

Module 3 - Branding and Media

Please call 44-1455-200-520 for more information.

SIZE AND ALIGN BY REFERENCE

LAB 3 – BRANDING AND MEDIA

2. In the properties pane click the Fill option

4. Click Format, Shape Fill, Eyedropper

Add a Timer and configure a Timer

1. Select the screen where you wish to use the timer

This combination of settings tells the timer to:

• Start the timer counting automatically when the screen loads

The timer can run formulas in three different situations:

1. Th - when the timer control is clicked by a user

1. Navigate to a screen in your app

2. Click Insert, Button then click Insert, Controls, Timer

3. Th timer to the right of the button, so that they aren’t overlapping

Th to your screen, click Insert, Icons then scroll down through

Embedded media is useful for a few reasons:

1. Click File, Media

1. Click Insert, Media, Image

1. Click File, Media

1. Navigate to the screen where you want to display the video

5. In the formula bar delete the words SampleVideo

1. Th audio control to the screen (Insert, Media, Audio)

4. Click the audio control

5. At the right of the screen click Advanced, type Auto

Please turn to Module 9 lab 3 and complete exercises 1, 2 and 3.

You might also like