Reusable Components

Hands-on Lab
Table of Contents
Lab Overview..................................................................................................................................................................... 1
Scenario ............................................................................................................................................................................................ 1
Things you will learn .................................................................................................................................................................. 1
Exercise 1 – Create Canvas Application .................................................................................................................................. 2
Task 1: Create Canvas Application ....................................................................................................................................... 2
Task 2: Setup the Carousel Component ............................................................................................................................. 7
Exercise 2 – Build and Consume Component .....................................................................................................................12
Task 1: Add Controls to Component ..................................................................................................................................12
Task 2: Consume the Component .......................................................................................................................................18
Task 3: Add Auto Play ..............................................................................................................................................................22
Task 4: Add Selected Record .................................................................................................................................................24

2 © 2020 Microsoft Corporation. All rights reserved.

Reusable Components- Lab Overview

Lab Overview
Scenario
You are building a conference management application and need to display registered attendees
and be able to cycle through them. Each conference has different information that is important to
see about the attendee. For example, virtual conferences show different data than in-person
conferences. Therefore, you want to use a template associated with each conference to display
the information.
You've decided to build a reusable component that will allow viewing of the records in a carousel
that can cycle through the records. The user will be able to manually cycle through the records or
enable an automated play cycle. The content will be displayed using a dynamic HTML template
that will be used to customize the display using an HTML text control. By building a reusable
component you believe other app makers will be able to use it for other similar scenarios.
To help ensure the control will work for multiple scenarios, you have chosen to build out the
component using a test app that uses Accounts and Contacts and displays a simple business card
for each contact.

Things you will learn

• How to build a reusable component
• How to define input/output properties
• How to use simulate behavior properties on a component
• How to dynamically tailor data using substitute
• How to use the timer control to animate the carousel

1
Reusable Components- Lab Overview

Exercise 1 – Create Canvas Application

In this exercise, you will create a canvas application and setup the carousel component. The
hosting app itself will just be used as a test harness to support development of the reusable
component.

Task 1: Create Canvas Application

In this task, you will create a canvas application and enable it for components. The app will have a
gallery listing all the accounts from CDS and on the right side will have the component showing the
related contacts. The component however could be used with any list of data and by design will not
have any dependencies on a specific entity.
1) Navigate to https://make.powerapps.com and make sure you are in the correct environment.
2) Select Apps, click Create an App, and select Canvas.

3) Select Tablet Blank App.

4) Double click on Screen1 and rename it MainScreen.

2 © 2020 Microsoft Corporation. All rights reserved.

Reusable Components- Lab Overview

5) Select Data Sources and select Accounts.

6) Accounts should be added to your app. Select Tree View.

7) Select the Insert tab, click Gallery and select Vertical.

8) Rename the gallery accountsList.

3
Reusable Components- Lab Overview

9) Go to the Properties pane and select Accounts for Data Source.

10) Change the Layout to Title and Subtitle.

11) Click Edit Fields, select Main Phone for Subtitle2 and select Account Name for Title2.

12) Close the Data pane.

4 © 2020 Microsoft Corporation. All rights reserved.

Reusable Components- Lab Overview

13) Resize and reposition the accountsList as shown below.

14) Click File and select Advanced Settings.

15) Scroll down and turn on Components. Components are currently in preview and must be
enabled prior to use in your applications.

5
Reusable Components- Lab Overview

16) To work around a current bug, also turn off Explicit Column selection

17) Click OK to the dialog telling you that you will need to close the app to finish the change.
18) Select the Name + icon tab and name the application Carousel Component.

19) Select the Save tab and click Save.

20) On the left side navigation click Close. Normally, closing is not required but because we
turned off Explicit Column Selection we must do this for the change to take effect.
21) Now that the app is closed, click Open and Browse PowerApps and select your application in
the list to re-open.

22) You should be back to the app designer. Do not navigate away from this page.

6 © 2020 Microsoft Corporation. All rights reserved.

Reusable Components- Lab Overview

Task 2: Setup the Carousel Component

In this task, you will create a component and set its properties. If you aren’t familiar with carousel
type controls, they basically have a display area showing details and allow you to navigate through a
collection of items. The display area for our carousel we are going to use the HTML text area for the
visual display.
1) In the Tree view select the Components tab and click New Component. Note: if you don’t see
Components here check your Advanced Settings to ensure the feature is enabled.

2) Rename the component Carousel.

3) Next you are going to add some custom properties. Properties define how your component will
communicate with the hosting app. You can define input properties that allow the hosting app
screen to give the component data and output properties that allow the component to give the
hosting app screen data. Think of properties as defining a contract for how your component
and app will communicate. Because your component might be used by multiple apps you
should try to not make breaking changes to your input and output properties that would
impact apps using your component.

The following are the properties you will add:

Property Name Description
Data This is a table of data the component will visualize
Template This is the HTML template – this will define the format for
the HTML text control

7
Reusable Components- Lab Overview

RefreshData This is a Boolean (True/False) used for the app to

communicate to the component to refresh data
Selected This is an output property that allows the hosting app to
know which record is currently selected by the component

4) Go to the Properties pane and click New Custom Property.

5) Enter the following information and click Create:

• Display name: Data
• Name: Data
• Description: Description of your choice
• Property type: Input
• Data type: Table

8 © 2020 Microsoft Corporation. All rights reserved.

Reusable Components- Lab Overview

6) Click New Custom Property.

7) Provide the following information and click Create:
• Display name: Template
• Name: Template
• Description: Description of your choice
• Property type: Input
• Data type: Text

8) Add another custom property with the following information and click Create.
• Display name: Refresh Data

9
Reusable Components- Lab Overview

• Name: RefreshData
• Description: Description of your choice
• Property type: Input
• Data type: Boolean

9) Add one more custom property with the following values and click Create. Make sure this
property is an output property type.
• Display name: Selected
• Name: Selected
• Description: Description of your choice
• Property type: Output
• Data type: Record

10) Your component should now have 4 custom properties.

10 © 2020 Microsoft Corporation. All rights reserved.

Reusable Components- Lab Overview

11) Select the Data property of the Carousel and replace the value with formula below. This sets a
default value for the Data property and will allow you to build the component using these
column names.
Table({ Record: "Contact", Values:Table({Col:1,Value:"Full Name"}, {Col:2,
Value:"Address 1: Street 1"}) })

12) Click File and Save.

13) Go back to the app designer by clicking on the back button. Do not navigate away from the app
designer.

11
Reusable Components- Lab Overview

Exercise 2 – Build and Consume Component

In this exercise, you will build and use the component.

Task 1: Add Controls to Component

In this task, you will add controls to the component.
1) Make sure you still have the Carousel component selected.

2) Select the Insert tab, click Text and select HTML text.

3) Rename the HTML Text control htmlText.

In the next few steps you will ensure that the controls are properly positioned, are automatically
resized to take up the available parent’s space and have some margins for readability.
4) Select the htmlText control, go to the Home tab, select the Height property and set it to the
formula below.
Parent.Height -100

5) Select the Width property and set it to the formula below.

Parent.Width -100

12 © 2020 Microsoft Corporation. All rights reserved.

Reusable Components- Lab Overview

6) Select the X property and set it to 50.

7) The htmlText control layout should now look like the image below.

8) Select the Insert tab, click Icons and select Left. We are adding left and right icons to allow
the user of the app to manually change the item displayed.

9) Rename the left icon previousIcon.

10) Select the previousIcon, select the Height property and set it to the formula below.
htmlText.Height

11) Select the Width property and set it to 50.

13
Reusable Components- Lab Overview

12) Select the X property and set it to 0.

13) Select the Y property and set it to the formula below.
htmlText.Y

14) Select the OnSelect property and set it to the value shown below. This will cause the prior
record to be shown if there is one.
If(CurrentIndex > 1,Set(CurrentIndex,CurrentIndex-1))

15) Select the Insert tab, click Icons and select Right.

16) Rename the right icon nextIcon.

17) Select the nextIcon, select the Height property to formula below.
htmlText.Height

18) Select the Width property and set it to 50.

19) Select the X property and set it to the formula below.
htmlText.Width + 50

20) Select the Y property and set it to the formula below.

14 © 2020 Microsoft Corporation. All rights reserved.

Reusable Components- Lab Overview

htmlText.Y

21) Select the OnSelect property and set it to the formula below. This will advance to the next
record as long as we don’t exceed the number of records in the Data property.
If(CurrentIndex < CountRows(Parent.Data),Set(CurrentIndex,CurrentIndex+1))

22) Your component should now look like the image below.

23) Select the Insert tab, click Inputs and select Toggle.
You are adding this control to simulate behavior properties, we need a way to run a formula
when the data changes. The data property doesn’t have an OnChange property so we are
asking the hosting app to change the RefreshData property when there is new data. We will
then hookup the RefreshData to the toggle. And finally, our formula will run OnChange of the
toggle. You will hide it later because the user never needs to see it, we are just using it to allow
running our formula on-demand.

24) Move the button to the bottom of the control.

15
Reusable Components- Lab Overview

25) Set the OnChange property of the toggle button to the formula below. When the hosting app
sets the RefeshData property to indicate new data has been set this sets the index variable
back to 1
Set(CurrentIndex,1)

26) Set the Default property of the toggle button to the formula below. This hooks up the
RefreshData property to the hidden toggle control. When the hosting app changes this
property value it will cause the OnChange formula above to execute. We are using the toggle
control simply to allow the hosting app to run a formula on demand because components don’t
have a way to directly have a hosting app run a component formula
Parent.RefreshData

27) Click Inputs again and select Slider. You are adding this control to simulate behavior
properties. You will hide it later.

28) Move the slider control to bottom.

29) Set the slider Default property to the current index. This sets the value of the slider, when the
index changes the slider OnChange behavior will run causing the formula to update the HTML
Text control with a new record.
CurrentIndex

30) Set the slider Min property to 1.

31) Set the slider Max property to the formula below.
CountRows(Parent.Data)

32) Set the slider OnChange property to the formula below. This runs when the CurrentIndex
variable is changed.
If(CountRows(Parent.Data) > 0,ClearCollect(
TemplateData,
{

16 © 2020 Microsoft Corporation. All rights reserved.

Reusable Components- Lab Overview

Name: "HtmlTemplate",
Template: Parent.Template
}
);Set(CurrentRecord,Last(FirstN(Parent.Data, CurrentIndex)));
ForAll(
CurrentRecord.Values,
Patch(
TemplateData,
LookUp(
TemplateData,
Name = "HtmlTemplate"
),
{Template: Substitute(LookUp(TemplateData,Name =
"HtmlTemplate").Template,"{"& Col &"}",Value)}
)
);Set(OutputHtml,LookUp(TemplateData,Name = "HtmlTemplate").Template))

The above formula does the following (Each bullet below represents one of the
forumlas above):
• Creates a copy of the HTML template so we can customize it for this record.
• Sets CurrentRecord varaiable based on the CurrentIndex. CurrentIndex represents the
record number in the set we want to display. You can’t explictly get a record in a Table, so
we are using Last and FirstN to help get the specific record. For example if CurrentIndex is
7 and we had 10 records, FirstN of 7 would return us the first 7 records. Last on that
would give us just the 7th record. Using this technique you can access a specific record in
a set by an index value.
• Loops through all the values that we want to replace in the template, and for each calls
Subsitute to replace the value in the template.
• Sets the OutputHtml property with the results and later we will use this to populate the
Html Text control.

17
Reusable Components- Lab Overview

33) Select the htmlText control.

34) Set the HtmlText property of the htmlText control to the OutputHtml.
OutputHtml

35) Your component will now look like the image below.

36) Click File and save your changes.

37) Go back to the app designer by clicking on the back button.

Task 2: Consume the Component

In this task, you will consume the component in the hosting app.
1) Select the Screens tab.

18 © 2020 Microsoft Corporation. All rights reserved.

Reusable Components- Lab Overview

2) Select the MainScreen, go to the Insert tab, click Custom, and select the Carousel component
you created.

3) Set the Template property to the formula below. This is the HTML that will be used to format
each record. {1} and {2} are replaceable with data from the record being visualized. This is a
very simple template, it could include more styling and layout as needed.
"<H1>{1}</H1><H2>{2}</H2>"

4) Set the Data property to selected contacts.

SelectedContacts

5) Select accountsList and set the OnSelect property to the formula below.
Set(RefreshContacts, false );Clear(SelectedContacts);
ForAll(accountsList.Selected.Contacts,Collect(SelectedContacts,
{Record:contactid,Values:Table({Col:1,Value:fullname},{Col:2,Value:jobtitle})})
);Set(RefreshContacts, true);

This is preparing the data for the component formatting the contact data into the format
expected.

19
Reusable Components- Lab Overview

6) Place the carousel component on the screen like the image below.

7) Click Play.

8) Select an account with more than one contact. Alpine Ski House has two related contacts. The
Carousel should load the first contact.

20 © 2020 Microsoft Corporation. All rights reserved.

Reusable Components- Lab Overview

9) Click on the next button.

10) The second contact should load.

11) Close the preview.

21
Reusable Components- Lab Overview

Task 3: Add Auto Play

In this task, you will add auto play and hide the toggle and slider controls.
1) Select the Components tab and select the Carousel component.

2) Go to the Insert tab, click Inputs, and select Timer.

3) Change the timer Duration to 5 seconds. The unit of measure is milliseconds, so to set to 5
seconds, the value you set is 5000.

4) Set the timer OnTimerEnd property to the formula below. We are using the timer control to
automate rotating the current record being shown by the carousel. Every 5 seconds (based on
how you configure the timer) the formula you configure for OnTimerEnd will run. We are
using that to increment the index if it is less than the # of records in the data collection and if it
reaches the end we are setting it back to the beginning.
If (CurrentIndex <
CountRows(Parent.Data),Set(CurrentIndex,CurrentIndex+1),Set(CurrentIndex,1))

22 © 2020 Microsoft Corporation. All rights reserved.

Reusable Components- Lab Overview

5) Set the Repeat property of the timer to true.

6) Set the Text property of the timer to "Auto Rotate".

7) Set the X property of the timer to the formula below. Next, we are going to adjust the timer
play button so if the hosting app changes the size of our component the size of the button will
adjust.
(Parent.Width / 2) - (Timer1.Width/2)

8) Set the Y property of the timer to the formula below.

Parent.Height - (Timer1.Height + 10)

9) Set the Visible property of the toggle and slider controls to false. Since we are using both
these controls simply to call our formulas, we can hide them from the user.
10) Your component should now look like the image below.

23
Reusable Components- Lab Overview

11) Click File and save your changes.

12) Click on the back arrow to go back to the app designer.
13) Select the Screens tab.
14) Resize Carousel_1 as shown in the image below.

15) Click Play.

16) Select Alpine Ski House again.
17) Click Auto Rotate.

18) The contacts should rotate based on the 5 seconds duration you selected.
19) Close the preview.

Task 4: Add Selected Record

In this task, you will set the selected record of the component to current record and display
information from the component on the consuming screen. This is useful because otherwise the
hosting app doesn’t know what record is selected. This also shows how a component can make data
available to the hosting app using output properties.
1) Select the Components tab and select the Carousel component.
2) Go to the Properties pane and select the Advanced tab.

24 © 2020 Microsoft Corporation. All rights reserved.

Reusable Components- Lab Overview

3) Scroll down and click More Options.

4) Replace the text in Selected (Output) with CurrentRecord.

CurrentRecord

5) Click File and save your changes.

6) Go back to the app designer.
7) Select the Screens tab, select the MainScreen, go to the Insert tab, and click Label.

8) Set the Text property of the label to formula below.

First(Carousel_1.Selected.Values).Value

25
Reusable Components- Lab Overview

9) Resize and reposition the label as shown in the image below.

10) Click Play.

11) Select Alpine Ski House. The label should display the selected contact.
12) Click Auto Rotate.
13) The label should rotate with the selected item in the component.

26 © 2020 Microsoft Corporation. All rights reserved.