Good by Live Writer HELLO Word Blog Templates

 

Lately I have been posting a lot of blog posts for my marketing brothers and sisters and unfortunately, they often (try to) give them to me in normal word or email format.

…Of course, pasting that into WordPress makes a mess of the formatting and loses all the images. The answer is really straight forward: the Word Blog Template.

Getting started is as easy as File > New and search for the word blog!

At this point word will take care of the image uploading and does a good job of preserving the formatting

 

This then gives you a striped down version of word that knows how to upload images, format to html etc etc

 

 

PowerApps User Group in Seattle Sept 18th

 

Join us for our 3rd PowerApps user group meeting here in the Seattle area!

These meetings are designed to help those new to the tool as well as those who have been with the tool since day one.

We look to leverage the meetings to engage with each other and the Microsoft team to help everyone along their learning journey.

We encourage you to come with questions and come along on this journey with us.

This month’s Agenda:

  1. How to get started with PowerApps Portals by Dileep Singh
  2. PowerApps & Flow Tips for Admins by our very own UG Leader Mandar Zope
  3. Microsoft Flow best practices with Maricel Medina
  4. Time providing PowerApps MVP, Ted Pattison, to show how to create PowerApps PCF controls

 

When:

September 18th, 2019 4-7pm PST

Where:

Microsoft Advanta C – Conf Room ADVANTA-C/4051
3003 160th Ave SE
Bellevue, WA 98007

Please RSVP as space limited to the first 24 people!!!!!!!!!!!!

https://www.powerplatformug.com/meetings/event-description?CalendarEventKey=65195c26-c408-4643-a2a1-6a35441d90f3&CommunityKey=c06415ce-273d-4ac6-81c2-e82d12587a9e&Home=%2fcommunities%2fcommunity-home%2frecent-community-events

 


Adv Hands On Lab 4: Embedded PowerApps canvas app into a model driven application

Scenario

Contoso has built a model-driven app to challenge their employees to innovate.  The way the app works is Contoso management can submit challenges and then employees can submit ideas. For example, a challenge might be “Reduce factory emissions by 10%.” Employees can submit ideas for challenges and get funded once they get enough votes. 

Contoso would like to announce new challenges in Microsoft Teams by posting some information about the challenge. Contoso’s users would like to be able to create this post from the model-driven Innovation Challenge app they use to manage the challenges.

You will be building an embedded canvas app that will let users start discussions without leaving the Innovation Challenge application.

Environment

The lab requires a PowerApps environment with a Common Data Service database created and the sample apps installed.

 

Requirements

The following have been identified as requirements you must implement to complete the project.

  • R0 – User must be able to start new Teams discussion from the existing Innovation Challenge application.
  • R1 – User must be able to select the Team in which they would like to start the discussion.
  • R2 – User must be able to select the Channel in which they would like to start the discussion.
  • R3 – The Challenge name must be included in the chat message.
  • R4 – User should be able to edit the message before posting it.
  • R5 – The embedded canvas should not be visible if a discussion was already started.

 

Exercise 1 – Canvas App in Model-Driven App

Task 1: Connect to Teams

In this task, you will add a Microsoft Teams trial to your tenant (if needed) and create a couple Teams and channels.

  1. Navigate to https://teams.microsoft.com/
  2. Login with your admin user.
  3. Click Use the Web App Instead.

  1. Click Start and wait for Teams to start. Note: if you already have a Teams licensed user, this step may not be needed.

  1. Select Teams and click Create Team.

  1. Click Build Team from Scratch.

  1. Select Public.
  2. Enter Team One for Team name and click Create.

  1. Click Skip when asked to add members to the team.
  2. Right click on Team One and select Add Channel.

  1. Enter Channel One for Channel Name and click Add.

  1. Right click Team One again and select Add Channel.
  2. Enter Channel Two for Channel Name and click Add.

  1. On the bottom left, click Manage Teams.

  1. Click Create a Team.

  1. Select Build a Team from Scrach.
  2. Select Public.
  3. Enter Team Two for Team Name and click Create.
  4. Click Skip.
  5. Right click on Team Two and select Add Channel.
  6. Enter Channel One for Channel Name and click Add.
  7. Right click on Team Two again and select Add Channel.
  8. Enter Channel Two for Channel Name and click Add.
  9. You should now have two teams with three channels each.

 

Task 2: Create Solution

In this task, you will create a publisher, create a new solution, add an existing entity to the solution, and add new field.

  1. Navigate to https://make.powerapps.com/ and make sure you are in the correct environment.
  2. Select Solutions and click New Solution.

  1. Enter Contoso Embedded for Display Name, click on the Publisher dropdown and click + Publisher.

  1. Enter Contoso for Display Name, contoso for Prefix and click Save and Close.

  1. Select Contoso for Publisher, enter 1.0.0.0 for Version and click Create.

  1. Click to open the solution you just created.

  1. Click Add Existing and select Entity.

  1. Select the Challenge entity and click Next. If you have difficulty locating the Challenge entity, use the search box to find and select it.

  1. Click Select Components.

  1. Select the Forms tab.
  2. Select all three forms and click Add. Note: Ideally we would just select the Main Form that we are going to edit, however due to a current bug that type of form is not showing and all three forms are named Information.

  1. Click Add again.
  2. Click to open the Challenge entity.

  1. Select the Fields tab and click Add Field.

  1. Enter Started Date for Display Name select Date Only for Data Type and click Done.

    Note: Currently Embeded Canvas Apps can only be created as a control for a field or a subgrid, you can’t just put a canvas app unbound to any data.

  1. Click Save Entity.

 

Task 3: Add Field to the Form

In this task, you will add the new field to the main form.

  1. Select the Forms tab.
  2. Hover over the Main form, click on the … More Commands and select Edit Form (Preview).

  1. Select the Contributed Ideas section.

  1. Click Add Control and select 1-Column Section.

  1. Go to the Properties pane, change the Section Label to Start Team Chat, change the Name to start_team_chat_section.

  1. Click Add Field.

  1. Select Started Date.

  1. Click Save.
  2. Click Switch to Classic. Note: Currently, you can only create the embeded canvas app and change the controls for a field from the classic form editor. In the future you will be able to do this without changing to classic.

Do not navigate away from this page

 

Task 4: Add Canvas App

In this task, you will create the canvas application. Since you are working in a solution, the canvas app you create here will also be included in the solution.

  1. Double click the Started Date field. In some browsers you may need to select the item and look for form properties in the header instead.

  1. Uncheck Display Label.

  1. Select the Controls tab and click Add Control.

  1. Select Canvas App and click Add.

  1. Select Web.

  1. Click Customize to create your canvas app in the PowerApps Studio. This will launch an app designer browser tab.

  1. Click File and select Save.
  2. Enter Start Group Discussion for Name and click Save.

  1. Click on Back button in the PowerApps console (not the browser back button).

  1. Right click on Form1 and select Delete.

  1. Rename the Screen teamsScreen.

  1. Select the View tab and click Data Sources.

  1. Go to the Data pane and click Add
    Data Source.

  1. Select Add New Connection.

  1. Search for Teams and select Microsoft Teams.

  1. Click Create.

  1. Click Add Data Source again.

  1. Search for Common Data Service and select it.

  1. Click Create.
  2. Select the Challenges entity and click Connect.

  1. Close the Data pane.
  2. Select the Insert tab, click Controls and select Drop Down.

  1. Right click on Dropdown1 and select Rename.

  1. Rename it teamsDropdown.

  1. Set the Items property to the formula below. If you have difficulty with copy/paste then type the formula manually. This formula will list the available teams in the dropbox

MicrosoftTeams.GetAllTeams().value

  1. Go to the Properties pane and click Advanced.

  1. Scroll down to the Data section and select displayName for Value.

  1. Click Controls and select Dropdown again.
  2. Rename the dropdown channelsDropdown.
  3. Set the Items property to the formula below. This formula will show the channels of the selected team in the second dropdown.

If(!IsBlank(teamsDropdown.Selected),MicrosoftTeams.GetChannelsForGroup(teamsDropdown.Selected.id).value)

  1. Go to the Properties pane and select displayName for Value.

  1. Select the teamsScreen.
  2. Select the Insert tab, click Text and select Rich Text Editor.

  1. Rename the RichTextEditor1 to messageText.
  2. Arrange the controls on the screen as shown below.

  1. Select the messageText control and set the Default value to the formula below. This formula will build the chat message.

Concatenate(“New Challenge available <strong>”, ModelDrivenFormIntegration.Item.sample_name , “</strong>. Go create your new ideas.”)

  1. Select the teamsScreen and click Button.

  1. Set OnSelect to the formula below. This formula will post the message to the selected channel.

MicrosoftTeams.PostMessageToChannel(teamsDropdown.Selected.id,channelsDropdown.Selected.id,{body:{content: messageText.HtmlText,contentType:1}})

  1. Change the Text value to Send.

  1. Rename the button Start Discussion.
  2. Move your Send button and place it below the text box. Resize it to be the same width as the textbox.
  3. Your canvas application will now look like the image below.

  1. Click File and select Save.
  2. Click Publish.

  1. Click Publish this Version.
  2. Click Close.
  3. Close the app designer browser tab.
  4. Click OK.

  1. Click Save.

  1. Click Publish.
  2. Click Save and Close.
  3. Close the form designer browser tab.
  4. Click Done.

  1. Select Solutions and click Publish All Customizations.

Task 5: Test the Application

In this task, you will test the application.

  1. Go to https://web.powerapps.com
  2. Select Apps.
  3. Click to open the Innovation Challenge application.

  1. Select Challenges.

  1. Double click to open one of the challenges.

  1. The Canvas app should load in the Start Group Discussion section and the challenge name will be included in the text.

  1. Start a new browser tab and navigate to https://teams.microsoft.com/
  2. Login if prompted.
  3. Go back to the Innovation Challenge app and select a Team from the first dropdown.
  4. Select Channel from the second dropdown.
  5. Click Send. You may edit the message.

  1. Go back to Teams. A new chat should get started in the team and channel you selected.

 

Bonus: Edit your form to look more like the image below

Exercise 2 – Update and Refresh

In this exercise, you will update the challenge record from the canvas application and show the updated record in the model-driven application.

Task 1: Add Field to the Form

In this task, you will add the Started Date field to the Challenge main form.

  1. Navigate to https://web.powerapps.com/ and make sure you are in the correct environment.
  2. Select Solutions and click to open the solution you created.

  1. Click to open the Challenge entity.

  1. Select Forms and click to open the Main form.

  1. Uncheck the Show Only Unused Fields checkbox.

  1. Select the Start Team Chat section, search for Started Date and click on it.

  1. Drag the new field and place it above the field you added in Exercise 1.

  1. Click Save.
  2. Close the form editor browser tab.
  3. Click Done.
  4. Select Solutions and click Publish All Customizations.

 

Task 2: Update Field and Refresh Form

In this task, you will update the Started Date value and refresh the form from the Canvas application.

  1. Navigate to https://web.powerapps.com/ and make sure you are in the correct environment.
  2. Select Solutions and open the solution you created.
  3. Select Apps, select the Start Group Discussion application, and click Edit.

  1. Select the Start Discussion button.

  1. Select the OnSelect property, place your cursor at the beginning of the existing function and paste the formula below. There are two functions in this formula, the Patch function will update the Started Date of the Challenge records and the ModelDrivenFormIntegration.RefreshForm will refresh the form.

Patch(Challenges, First( Filter(Challenges, Challenge = ModelDrivenFormIntegration.Item.sample_challengeid)), {‘Started Date’: Now()});ModelDrivenFormIntegration.RefreshForm(false);

  1. Click File and Save.
  2. Click Publish.
  3. Click Publish this Version.
  4. Click the app designer browser tab.
  5. Click Done.
  6. Select Apps and click to open the Innovation Challenge application.

  1. Select the Challenges and open one of the records.

  1. Locate the embedded canvas application and make sure the Started Date field is empty.

  1. Click Send.

  1. The Started Date field should now have today’s date.

 

 

Bonus – Hide Embedded Canvas

In this exercise, you will create a business rule that will hide the embedded canvas application if started date field has a value.

Task 1: Create Business Rule

In this task, you will create the business rule.

  1. Navigate to https://web.powerapps.com/ and make sure you are in the correct environment.
  2. Select Solutions and open the solution you created.
  3. Click to open the Challenge entity.
  4. Select the Business Rules tab and click Add Business Rule.

  1. Select the Condition, go to the Properties pane, and enter Check Started Date for Display Name.

  1. Go to Rule 1, select Entity for Source, select Started Date for Field, Contains Data for Operator, and click Apply.

  1. Click Add and select Set Visibility.

  1. Add it to the true side of the condition.

  1. Select the New Action, go to the Properties pane, enter Hide Canvas for Display Name, select Started Date for Field, select No for Visible and click Apply.

  1. Click Add and select Set Visibility again.
  2. Add it to the False side of the condition.
  3. Select the New Action, go to then Properties pane, provide the value shown in the image below and click Apply.

  1. Your Business Rule will look like the image below. Click Save.

  1. Click Activate.

  1. Click Activate again.
  2. Close the Business Rule editor browser tab.
  3. Click Done.

 

Task 2: Test Business Rule

In this task, you will test the business rule you created.

  1. Navigate to https://make.powerapps.com/ and make sure you are in the correct environment.
  2. Select Apps and click to open the Innovation Challenge application.

  1. Select Challenges and open one of the records. Select a record different from the one you used to test the canvas app.

  1. Go to the embedded canvas application and make sure it is visible on the form and the started date is empty.

  1. Click Send.

  1. The form should refresh, and the embedded canvas application will no longer be visible on the form.

 

Bonus – Open Quick Create Form

In this exercise, you will open a quick create form from the canvas application.

Task 1: Open Quick Create Form

In this task, you will add a button to the canvas application, this button will open a quick create form.

  1. Navigate to https://web.powerapps.com/ and make sure you are in the correct environment.
  2. Select Solutions and open the solution you created.
  3. Click on the … More Commands button of the Start Group Discussion application and select Edit.

  1. Select the teamScreen.
  2. Select the Insert tab and click Button.

  1. Rename the button QuickCreateButton.

  1. Place the button below the Send button and resize it.

  1. Change the button text Create Team Project.

  1. Select the OnSelect property of the button and paste the formula below. This formula will open the team project quick create form.

ModelDrivenFormIntegration.OpenQuickCreateForm(“sample_teamproject”)

  1. Click File and Save.
  2. Click Publish.
  3. Click Publish this Version.
  4. Click Close.
  5. Close the app designer browser tab.
  6. Click Done.

 

Task 2: Test Quick Create

In this task, you will test the embedded canvas application and see that the quick create form opens.

  1. Navigate to https://web.powerapps.com/ and make sure you are in the correct.
  2. Select Apps and open the Innovation Challenge application.
  3. Select Challenges and open a record you haven’t used to for testing before.

  1. Go to the embedded canvas application and click on the Create Team Project button.

  1. Quick Create form should open, provide the information below and click Save and Close.

  1. Select Team Projects. The Test Project should be in the list of records.

Adv Hands On Lab 2: Creating PowerApps Reusable Components

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 

 

 

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.

  1. Select Tablet Blank App.

  1. Rename the screen MainScreen.

  1. Select the View tab and click Data Sources.

  1. Click Add Data Source.


  1. Select Common Data Service.

  1. Select Accounts and click Connect.


  1. Close the Data pane.
  2. Select the Insert tab, click Gallery and select Vertical.

  1. Rename the gallery accountsList.

  1. Go to the Properties pane and select Accounts for Items.

  1. Change the Layout to Title and Subtitle.

  1. Go to the Data pane, select Main Phone for Subtitle2 and select Account Name for Title2.


  1. Close the Data pane.
  2. Resize and reposition the accountsList as shown below.

  1. Click File and select Advanced Settings.


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


  1. Select the App Name + icon tab and name the application Carousel Component.

  1. Select the Save tab and click Save.
  2. Click on the back button.

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

 

 

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.

  • 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.

  • Rename the component Carousel.


  • 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

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

 

  • Go to the Properties pane and click New Custom Property.

  • Enter the following information and click Create:
    • Display name:    Data
    • Name: Data
    • Description: Description of your choice
    • Property type: Input
    • Data type: Table


  • Click New Custom Property.
  • Provide the following information and click Create:
    • Display name:    Template
    • Name: Template
    • Description: Description of your choice
    • Property type: Input
    • Data type: Text

  • Add another custom property with the following information and click Create.
    • Display name:    Refresh Data
    • Name: RefreshData
    • Description: Description of your choice
    • Property type: Input
    • Data type: Boolean

  • 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

  • Your component should now have 4 custom properties.


  • 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″}) })

  • Click File and Save.
  • Go back to the app designer by clicking on the back button. Do not navigate away from the app designer.

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.


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


  1. 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.

  1. Select the htmlText control, go to the Home tab, select the Height property and set it to the formula below.

Parent.Height -100

  1. Select the Width property and set it to the formula below.

Parent.Width -100

  1. Select the X property and set it to 50.
  2. The htmlText control layout should now look like the image below.

  1. 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.


  1. Rename the left icon previousIcon.
  2. Select the previousIcon, select the Height property and set it to the formula below.

htmlText.Height

  1. Select the Width property and set it to 50.
  2. Select the X property and set it to 0.
  3. Select the Y property and set it to the formula below.

htmlText.Y

  1. 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))


  1. Select the Insert tab, click Icons and select Right.


  1. Rename the right icon nextIcon.
  2. Select the nextIcon, select the Height property to formula below.

htmlText.Height

  1. Select the Width property and set it to 50.
  2. Select the X property and set it to the formula below.

htmlText.Width + 50

  1. Select the Y property and set it to the formula below.

htmlText.Y

  1. 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))

  1. Your component should now look like the image below.

  1. Select the Insert tab, click Controls, 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.

  1. Move the button to the bottom of the control.
  2. 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)

  1. 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

  1. Click Controls again and select Slider. You are adding this control to simulate behavior properties. You will hide it later.

  1. Move the slider control to bottom.
  2. 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

  1. Set the slider Minimum property to 1.
  2. Set the slider Maximum property to the formula below.

CountRows(Parent.Data)

  1. Set the slider OnChange property to the formula below. This runs when the CurrentIndex variable is changed.

If(CountRows(Parent.Data) > 0,ClearCollect(

TemplateData,

{

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.

  1. Select the htmlText control.
  2. Set the HtmlText property of the htmlText control to the OutputHtml.

OutputHtml

  1. Your component will now look like the image below.

  1. Click File and save your changes.
  2. 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.


  1. Select the MainScreen, go to the Insert tab, click Components, and select the Carousel component you created.

  1. 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>”

  1. Set the Data property to selected contacts.

SelectedContacts

  1. 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.

  1. Place the carousel component on the screen like the image below.

  1. Click Play.

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

  1. Click on the next button.

  1. The second contact should load.
  2. Close the preview.

 

 

 

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.


  1. Go to the Insert tab, click Controls, and select Timer.

  1. 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.

  1. 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))

  1. Set the Repeat property of the timer to true.

  1. Set the Text property of the timer to “Auto Rotate”.

  1. 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)

  1. Set the Y property of the timer to the formula below.

Parent.Height – (Timer1.Height + 10)

  1. 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.
  2. Your component should now look like the image below.

  1. Click File and save your changes.
  2. Click on the back arrow to go back to the app designer.
  3. Select the Screens tab.
  4. Resize Carousel_1 as shown in the image below.

  1. Click Play.
  2. Select Alpine Ski House again.
  3. Click Auto Rotate.

  1. The contacts should rotate based on the 5 seconds duration you selected.
  2. 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.

  1. Scroll down and click More Options.

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

CurrentRecord

  1. Click File and save your changes.
  2. Go back to the app designer.
  3. Select the Screens tab, select the MainScreen, go to the Insert tab, and click Label.

  1. Set the Text property of the label to formula below.

First(Carousel_1.Selected.Values).Value

  1. Resize and reposition the label as shown in the image below.

  1. Click Play.
  2. Select Alpine Ski House. The label should display the selected contact.
  3. Click Auto Rotate.
  4. The label should rotate with the selected item in the component.

 

 

 

 

Adv Hands On Lab1: Package components in development environment and deploy, patch, and upgrade to production

Scenario

Application lifecycle management (ALM) is a vital part of a successful strategy for Power Platform projects. Contoso has provisioned a new development instance and would like to set up a build and deploy process where modifications of any of the components are only performed in the development environment and then deployed as a managed solution to the production environment. Components required to be deployed include a model-driven app and a canvas app. They also would like to take advantage of new tools like Solution Checker to monitor the health of what they are building.

You will be packaging components as a new unmanaged solution in the development environment and deploy, patch, and upgrade this solution in the production environment as managed.

Environment

The lab requires two PowerApps environments with a Common Data Service database created and the sample apps installed.

You are working in a shared tenant. Do not do your exercises in the default environment. You have been assigned a development environment and a production environment for this course.

Note: Specifically, for the labs in this course, it is best always to use a private/incognito browser session.

Provided for students:

  • Unmanaged solution that contains a model-driven app that includes account and contact.
  • Existing sample canvas app that uses a gallery control to display accounts.

Requirements

The following have been identified as requirements you must implement to complete the project.

  • R0 – In the production environment, a user must be able to start a model-driven app that includes access to Accounts and Contacts entities.
  • R1 – User must be able to run the canvas app providing access to accounts using a gallery control.
  • R2 – Maker must be able to run Solution Checker and resolve any issues flagged.
  • R3 – Maker must be able to add and remove components from the managed solution in the production environment by deploying patches and upgrades.

Exercise 1 – Setup the Development Environment

In this exercise, you will be preparing your new environment with some existing assets, so we can then look at how we can package all this into a solution file and deploy.

High-level tasks

Task 1– Install solution checker.

Task 2– Import solution ContosoBase. Publish it and confirm the model-driven Account Project Tracker App and its sitemap have imported.

Task 3– Import canvas app package named Accounts; open the app, and authorize its use.

Task 1: Install Solution Checker

The solution checker feature is a static analysis tool that reviews the solutions you build looking for anything that might impact performance, stability, and reliability of what you build. Currently, it requires a small installation; in the future, it will be pre-installed.

Note: As of the writing of this document, this feature is actively being added to all data centers. If you find no Solution Checker in the ribbon of your environment, don’t worry! That means you already have it and can proceed to the next task.

  1. Navigate to https://make.powerapps.com and log in. Make sure you are in your development environment.
  2. Select Solutions and click Solution Checker
  3. If you only see the install option like the image then click Install otherwise it is already installed, and you can continue to Task 2.


  1. Click Get it Now.


  1. Click Continue.
  2. If you agree, accept the terms and conditions, select your dev environment and click Agree.

  1. You should be automatically redirected to the Manage your solutions page. Locate PowerApps Checker and make sure the installation is pending.


  1. You may close the browser tab. The installation will continue in the background.
  2. Click Done.


Task 2: Import Solution

In this task, you will import an unmanaged solution to your environment. This contains a small PowerApps model-driven app that we will use later.

  1. In a new tab, navigate to https://make.powerapps.com/ and make sure you have your development environment selected.

  1. Select Solutions and click Import.

  1. Click Browse, select the ContosoBase solution located in the lab resources folder and click Open.   You will need to download these samples from here: https://powerusers.microsoft.com/t5/PowerApps-Community-Blog/Adv-Hands-On-Lab1-Package-components-in-development-environment/ba-p/345778

  1. Click Next.
  2. Click Import.
  3. Wait for the import to complete and click Publish All.

  1. Wait for the publishing to complete and click Close.
  2. Click to open the imported solution Contoso Base.

  1. You should have model-driven Customers App, a sitemap for the application, and a web resource.

Task 3: Import Canvas Application

In this task, you will import a canvas application into your environment. We are doing this using the old standalone import capability that doesn’t use solutions so we can bring in a canvas app that isn’t solution aware and then show you how to make it solution aware.

  1. Select Apps and click Import Package.

  1. Click Upload.

  1. Select the Accounts app located in the lab resources folder and click Open.

  1. Click Import.

  1. The app package should import without errors. Click Open App.

  1. You will be asked for permission, click Allow.

  1. The app designer should open, and your accounts list should show data.

  1. Close the app designer browser tab/window.

Exercise 2 – Build Solution

In this exercise, you will start building your new solution. The first step is to create a publisher and the actual solution container.

Each solution is linked to a solution publisher. The solution publisher provides information about how to contact the publisher as well as customization prefix value. When you create things like an entity that prefix is part of the name to keep it unique. For example, Contoso might use a prefix of contoso, and if they created a new entity named Project, the logical name would be contoso_project. This ensures that if another app is installed that also has an entity named Project, it won’t collide with others.

High-level tasks

Task 1: Create a solution and a publisher, both named Account Project Tracker. The publisher prefix should be set to apt. Add the following existing components:

  • Model-driven app Customers App
  • Customers App sitemap
  • Account entity and Account form.

Task 2: Add a new entity with the name Project

  • New fields to the Project entity.

Task 1: Create Solution

In this task, you will create a publisher and a new solution.

  1. Navigate to https://make.powerapps.com/ and make sure you in your development environment.
  2. Select Solutions and click New
    Solution.

  1. Enter Account Project Tracker for Display Name and click on the Publisher dropdown.

  1. Select + Publisher.

  1. Enter Account Project Tracker for Display Name, enter apt for Prefix and click Save and Close.

  1. Click on the Publisher dropdown and select the publisher you created.

  1. Enter 1.0.0.0 for Version and click Create.

  1. Click to open the solution you created.

  1. Next, we are going to add the existing model-driven app into our empty solution. Click Add Existing | App | Model-Driven App. Add Existing is how you bring in assets that already exist and associate them with your current solution container.

  1. Select the Customers App and click Add.

  1. Click Add Existing again and select Other | Site Map. Model-driven apps also use a site map to define navigation, and this is a separate component. We are bringing this also into the solution, so we have all our dependencies of the app. You could also do this by selecting the model-driven app and clicking add required components.

  1. Select Customers App sitemap and click Add.

  1. Click Add Existing | Other | Web resource.

  1. Select Show Name and click Add. If needed, you can search for the web resource in the search bar in the upper right-hand corner of the window.

  1. Click Add Existing and select Entity.

  1. Select Account and click Next.

  1. Click Select Components. By default, when you add existing of an entity any of the fields, forms and views are not referenced. That is a good thing as it means you don’t have dependencies on those items. If you wish to change any of the existing fields, forms, or views, you can use the Select components to associate them along with the entity to your solution. Notice there is also an Include all components. This should not be used when adding existing entities that managed by other solutions like Account. It should only be used for new entities that have been created as unmanaged in this environment.

  1. Select the Forms tab.
  2. Select the Account form and then click Add.

  1. Click Add again.

Task 2: Add new entity to the solution

In this task, you will add new Project entity to the solution.

  1. Click + New and select Entity.

  1. Enter Project for Display Name and click Create.

  1. Make sure the Fields tab is selected and click Add Field.

  1. Enter Start Date for Display Name, select Date Only for Data Type, make the field Required, and click Done.

  1. Click Add Field again.
  2. Provide the information below and click Done.

  1. Click Add Field one more time.
  2. Provide the information shown in the image below and click Done.

  1. Click Save Entity in the lower right corner
  2. Select the Relationships tab.
  3. Click Add Relationship and select Many-to-One.

  1. Select Account for Related Entity and click Done.

  1. Click Save Entity.

  1. Select Account Project Tracker and click Publish All Customizations.

  1. Wait for the publishing to complete.

Exercise 3 – Deploy the solution

In this exercise, you will be exporting your solution from the development environment and importing it into the production environment.

You will export both an unmanaged solution and a managed solution. The unmanaged solution is for if you need to re-create your development environment in the future. The managed solution is the solution you will import into production. You should always have a matching unmanaged solution anytime you export a managed solution.

High-level tasks

Task 1: Run solution checker and correct any issues found.

Task 2: Export solution, both managed and unmanaged. Deploy the managed solution to production.

Task 3: Test your work in the production environment.

Task 1: Verify solution using Solution Checker

  1. Navigate to https://make.powerapps.com and make sure you are in your development environment.
  2. Select the Account Project Tracker solution you created and click Solution Checker | Run.


  1. The Solution Checker should start running.


  1. Wait for the Solution Checker to complete checking your solution.


  1. Select the solution and click Solution Checker | View Results.


  1. You will get issues related to the web resource you created. Expand the issue.


  1. You will get more information on the issues including the severity, category, and statement.

  • The first error is telling us to not ship web resources with debug script like console.log.
  • The second error is caused by the usage of deprecated API xrm.page.
  • The third is telling us to use strict mode.

You will fix these errors next.


  1. Select Solutions and open Account Project Tracker solution.
  2. Click to open the Show Name web resource.


  1. Click Text Editor.


  1. You worked with the developer of the code, and they provided you an update. Replace the function with the snippet below and click OK.

function onload(executionContext)

{

    “use strict”;

var formContext = executionContext.getFormContext();

var name = formContext.getAttribute(“name”).getValue();

}


  1. Click Save.
  2. Click Publish.
  3. Close the solution explorer.
  4. Click Done.
  5. Select Solutions.
  6. Select Account Project Tracker and click Solution Checker | Run.
  7. Wait for the Solution Checker to complete the check.
  8. Click on the … More Commands button and click Solution Checker | View Results.


  1. You should not get any errors.
  2. Select Apps and click to open the Solution Health Hub.


  1. Select Analysis Jobs. You should see the results of the solution checks you ran.


  1. Click to open the result from the first solution check.


  1. The sub-grid will list all the errors. Double click on the Xrm.Page message.


  1. You will get more information about the result.


  1. Close the Solution Health Hub application.

Task 2: Deploy solution

It this task, you will export the solution you created and import it into your “prod” environment.

  1. Make sure you are in your Dev environment and select Solutions.
  2. Select Account Project Tracker solution and click Export.

  1. Click Next.

  1. Make sure Unmanaged is selected and click Export.

  1. Save the solution to your computer.
  2. Export the solution again and this time export as Managed. Notice the solution version has incremented for the second export.

  1. Save the solution on your computer.
  2. Switch to your “Prod” environment (Prod-user00 (orgcc8fibb2)).

  1. Select Solutions and click Import.

  1. Click Browse.
  2. Select the managed solution you exported and click Open.

  1. Click Next.
  2. Click View solution package details.

  1. You can review what is included in the import. Close this window.

  1. Click Import.
  2. Wait for the import to complete and click Close.
  3. Click to open the solution you imported.
  4. Make sure all the components you added are listed.

Task 3: Test Deployed Solution

In this task, you will test the app in the solution.

  1. Navigate to https://make.powerapps.com and make sure you are in your “Prod” environment.
  2. Select Apps and click to open the Customers App.

  1. Change the view to All Accounts. Accounts should load.
  2. Select Contacts, change the view to show All Contacts and the contacts should load.
  3. Click New.

  1. Enter Test for Last Name, enter your personal email for Email and click Save.

  1. Close the model-driven app browser tab.

Exercise 4: Update, Patch, and Upgrade

In this exercise, you will use the patch and upgrade features of Solutions. Patches allow transporting only the changes you make. For example, if you fix the length of a field, you would add the entity and just that field to the patch solution and then that would be all you transport to production. Patches do require the initial release solution to be installed in order to install a patch.

You got the feedback below:

User doesn’t always have the Start and End Date of projects and needs to be able to create projects without these fields.

Note: In the interest of time, we have not included steps about unit testing your work and changes. In real-world implementations it’s always important to test as you go, even for the smallest of changes.

High-level tasks

Task 1: Clone a patch and remove the requirement for Start and End Date fields.

Task 2: Import the patch to production.

Task 3: Clone solution, remove field, add your canvas app, and export solution.

Task 4: Import cloned solution to production.

Task 1: Clone Patch

In this task, you will create a “clone a patch” solution and remove the requirement for Start Date and End Date of the Project entity.

  1. Navigate to https://make.powerapps.com/ and make sure you are in your Dev environment (Dev-user00 (orgcc8fibb2)).
  2. Select Solutions and click to open the Account Project Tracker solution.
  3. Click on the button and select Clone | Clone a Patch. When you do this, your solution is changed to read-only. A new patch solution is created. This patch solution starts out empty, and then you add into it any items you wish to change or create.

  1. The minor version will be incremented for you, change the Display Name to Account Project Tracker Patch and click Save.

  1. You should see a message that will tell you can’t edit the Account Project Tracker solution anymore.

  1. Select Solutions and click to open the patch solution.

  1. Click Add Existing and select Entity.

  1. Select the Project entity and click Next.

  1. Click Select Components.

  1. Select Start Date and End Date fields and click Add.

  1. Click Add again.

  1. Click to open the Project entity.

  1. Open the End Date.

  1. Remove the requirement and click Done.

  1. Open the Start Date.

  1. Remove the requirement and click Done.

  1. Click Save Entity.

  1. Select Solutions and click Publish All Customizations.
  2. Wait for the publishing to complete.
  3. Select the Patch solution and click Export.

  1. You will be prompted to publish and/or run solution checker. You can if you wish.

  1. Click Next.
  2. Select Managed and click Export.

  1. Save the Patch solution on your computer.

Task 2: Import Patch Solution

In this task, you will import the Patch solution into your “Production” environment.

  1. Navigate to https://make.powerapps.com/ and switch to your “Production” environment (Prod-user00 (orgcc8fibb2)).
  2. Select Solution and click Import.

  1. Click Browse.
  2. Select the managed Patch solution you exported and click Open.

  1. Click Next.
  2. Click Import.
  3. Wait for the import to complete and click Close.
  4. Your “Production” environment will now have the initial solution and the patch solutions. Click to open the Patch solution.

  1. You should only have the components you added to Patch solution. Click to open the Project entity.

  1. You should have only the two fields you added to the solution.

Task 3: Clone Solution

When you are ready to create the next version of your solution and are done patching the current version, you clone the solution to create the next version. This combines all patches back into the base solution file and makes the base solution file editable for you to build your next version of the solution. After being combined with the base solution, all patches are removed, and you are left with only the base solution.

You realized the Cost field in no longer needed because it is roll-up field from tasks that will be added in future date.

You also now know that you can include your canvas app in your solution and move it through your ALM process at the same time.

  1. Navigate to https://make.powerapps.com and make sure you have your Dev environment selected.
  2. Select Solutions.
  3. Click on the button of Account Project Tracker solution and click Clone | Clone Solution.

  1. The Version will be incremented for you, click Save.

  1. The two solutions will be combined, and your Dev environment will now have just one Account Project Tracker solution.

  1. You will now delete the Cost field from Project entity. Open the Account project Tracker solution.
  2. Click to open the Project entity.

  1. Locate the Cost field, click on the … button and click Delete. When you delete a field of type currency, you only delete the input field. The reference to base currency will automatically also delete on save.

  1. Click Save Entity. With this type of change a publish of customizations is not required for the changes to take effect.
  2. We will now add our canvas app to the solution to prepare it for transport to the production environment. While still viewing your Account Project Tracker solution, click Add Existing and select App | Canvas App.


  1. Select Outside solutions


  1. Select the Accounts App and click Add. This will take a moment to load. You may want to refresh the hosting browser after a minute to test if is there.
  2. Select Solutions and click Publish All Customizations.
  3. Wait for the publishing to complete.


  1. Select Solution, click on the … button of Account project Tracker and select Export.

  1. Click Next.
  2. Select Managed and click Export.

  1. Save the solution on your machine.
  2. Export the solution again but select Unmanaged this time.
  3. Save the solution on your machine.

Task 4: Import the Clone Solution

  1. Navigate to https://make.powerapps.com/ and make sure you are in your “Production”. Environment.
  2. Select Solutions and click Import.
  3. Click Browse.
  4. Select the managed solution you just exported and click Open.

  1. Click Next.
  2. The import wizard will recognize the solution as an update. Click Next.

  1. Click Import. Notice the Stage for upgrade is checked. This is enabled any time you have patches already installed. It allows the new version to be imported and then when you click apply the old versions of the patches are removed and any destructive changes like removing fields and entities are completed and then finally the old solution is removed, and the new staged one is renamed the same as the original solution file.

  1. Click Apply Solution Upgrade.

  1. Click Close.

  1. The solutions in your “Production” environment will be combined, and you will have just one solution with version 1.1.x.x. Click to open Account Project Tracker.

  1. Click to open the Project entity.

  1. The Cost field should be deleted from the solution.

  1. Navigate to Apps.
  2. Select Apps and click to play the Accounts App.

  1. You will be asked for permission, click Allow.
  2. Accounts list should load, click on one of the accounts.

  1. Details of the account will load.

  1. Close the canvas app browser window.

Adv Hands On Lab 6: Connect PowerApps to Custom API

We will be building (or using) a custom connector to use in our event mobile app we’ve previously created. We will be adding a QR code generator to the attendee screen.

 

Environment

The lab requires a PowerApps environment with a Common Data Service (CDS) database created and the sample apps installed.

You must have completed module three first or import the final solution EventManagementFinal.zip

Note: Exercise 1 is targeted toward developers. If you are not a professional developer, go straight to Exercise 2.

Exercise 1 – Build custom API

In this exercise you will be building custom API that generates QR images based on the text information passed in.

Note: You will need an Azure subscription to complete this exercise. If you are not a developer or don’t have an Azure subscription, it is ok to skip to exercise 2 and use the API that we have pre-built.

Task 1: Create function app

  1. Navigate to https://portal.azure.com/ and click Create a Resource.

  1. Search for Function and select Function App.

  1. Click Create.

  1. Enter ContosoEventsQR (Your Initials) (or any unique name) for App Name, select your subscription, select Create New Resource Group and enter ContosoHR (replace HR with your initials).

  1. Select Consumption Plan for Hosting and click Create.

  1. Wait for the app to be created, you will get a notification when it is ready.

Task 2: Create function

  1. Select All Resources.

  1. Search for the function app you created and click to open.

  1. Click Create New function.

  1. Select In-Portal and click Continue.

  1. Select More Templates and click Finish and View Templates.

  1. Select HTTP Trigger.

  1. Enter qr64gen for Name, select Anonymous for Authorization Level, and click Create. (note: this is for the exercise only, not recommended for production use)

  1. Click View Files.

  1. Click + Add.

  1. Name the new file function.proj

  1. Paste the xml fragment below in into the new file and click Save.

<Project Sdk=”Microsoft.NET.Sdk”>

<PropertyGroup>

<TargetFramework>netstandard2.0</TargetFramework>

</PropertyGroup>

<ItemGroup>

<PackageReference Include=”QRCoder” Version=”1.3.5″ />

</ItemGroup>

</Project>

  1. Select the run.csx file.
  2. Replace the function code with the following.

#r “Newtonsoft.Json”

 

using System.IO;

using System.Net;

using System.Net.Http;

using System.Net.Http.Headers;

using Microsoft.AspNetCore.Mvc;

using QRCoder;

public static async Task<IActionResult> Run(HttpRequest req, ILogger log)

{

log.LogInformation(“C# HTTP trigger function processed a request.”);

string text = req.Query[“text”];

 

if (text != null) {

// Generate QRCode

byte[] qrCodeAsPngByteArr = null;

string output = null;

await Task.Run(() => {

QRCodeGenerator qrGenerator = new QRCodeGenerator();

QRCodeData qrCodeData = qrGenerator.CreateQrCode(text, QRCodeGenerator.ECCLevel.Q);

PngByteQRCode qrCode = new PngByteQRCode(qrCodeData);

qrCodeAsPngByteArr = qrCode.GetGraphic(20);

output = Convert.ToBase64String(qrCodeAsPngByteArr, 0, qrCodeAsPngByteArr.Length,

Base64FormattingOptions.None);

});

 

if(output != null) {

return (ActionResult) new ObjectResult(new {Image = output});

}

}

return new BadRequestObjectResult(“Please pass a text on the query string”);

}

7. Save. Resolve any compilation errors

Task 3: Test the API

  1. Click Get function URL.

  1. Click Copy.

  1. Start a new browser window and paste the URL you copied.
  2. Add ?text=Hello world at the end of the URL and hit the [ENTER] key.

  1. You should get a result like image below, copy the base64string.

  1. Navigate to https://codebeautify.org/base64-to-image-converter (or any other converter of your choice).
  2. Paste the string you copied and click Generate Image.

  1. QR Code image should be generated.

  1. Bonus testing. Open QR reader on your phone (iPhone or Android). You should get

    Hello world.

Exercise 2 – Create custom connector

In this exercise you will be building a custom connector using either the URL for our pre-built function (find it here https://bas2019.azurewebsites.net/api/qr64gen
) or the one you created in Exercise 1 above.

Task 1: Create connector

  1. Navigate to https://make.powerapps.com sign in and make sure you are in the correct environment.
  2. Expand Data and select Custom Connectors.

  1. Click + New Custom Connector and select Create from Blank.

  1. Enter QR Generator for Connector Name and click Continue.

  1. Type your host name:

    If you created the function yourself enter yourfuntionname.azurewebsites.net

    If you are using our function enter bas2019.azurewebsites.net

  2. Type /api for Base URL, and click Security.

  1. Select No Authentication and click Definition. Do not navigate away from this page.

 

Task 2: Add action

  1. Click + New Action.

  1. Enter QRCode for Summary, QR Code base64 for Description, and QRCode64 for Operation.
  2. Go to the Request section and click Import from Sample.

  1. Select GET for the Verb.

    If you are using our function enter https://bas2019.azurewebsites.net/api/qr64gen/?text=Hello

    If you created the function yourself enter https://yourfuntionname.azurewebsites.net/api/qr64gen/?text=Hello

    Click Import.

  1. Scroll down and click on the Response.

  1. Enter 200 for Name and click Import from Sample.

  1. Paste {“image”:”sample”} in the Body and click Import. Do not navigate away from this page. (the box may appear as read-only, but you can paste the needed text using Ctrl+V)

  1. Click Create Connector. Do not leave this screen.

 

 

Task 3: Test

  1. Select Test.


  1. Click Create.


  1. Click + New Connection.


  1. Make sure QR Generator is selected and click Create.


  1. Select Custom Connectors and click Edit on QR Generator.


  1. Select Test again.


  1. Enter Hello Contoso for Text and click Test Operation.


  1. You should get OK (200) for Status and the Body should look similar to the image below.


  1. Click Close.


Note: You can also create Custom Connectors using Open API defintions https://docs.microsoft.com/en-us/connectors/custom-connectors/define-openapi-definition or Postman collections https://docs.microsoft.com/en-us/connectors/custom-connectors/define-postman-collection That can be helpful when the API is more complex.

Exercise 3 – Use the custom connector

Task 1: Add data source

  1. Navigate to https://make.powerapps.com and make sure you are in the environment you used for Module 03.
  2. Select Apps, select Event Day Manager app, and click Edit.

  1. Select the View tab and click Data sources.

  1. Go to the Data pane and click + Add Data Source.

  1. Select QR Generator.

Task 2: Display QR Code

  1. Select the Sessionscreen.
  2. Select the Insert tab, click Media and select Image.

  1. Rename the image imgBarcode.

  1. Set the Image property to the formula below.

“data:image;application/octet-stream;base64,” & QRGenerator.QRCode64({text:txtAttendeeCode}).image

  1. Move the imgBarcode to bottom of the screen.

Task 3: Test

  1. Select the MainScreen and click Preview the App.

  1. Select the Event.

  1. Select one of the Sessions.

  1. Type something on the Attendee field. The QR Code image should change every time you change the test text.

 

Challenge:

You might notice that even if there is no attendee looked up a QR code still is displayed. If you have time, try to update the app to only show the QR code when an attendee is looked up. After you complete this challenge it should look like the following if no code is provided.

Adv Hands On Lab 5: Embedding PowerApps into Power BI

 

Power BI Dashboard

In this lab, you will create a Power BI dashboard with an embedded PowerApp. The final product will look like the image below.

Exercise 1: Build Power BI Report

High level tasks

    Task 1: Connect to PowerBI and enable sample data. Build PowerBI report

    Task 2: Import PowerApp visual for use in report

Task 1: Build Report

In this task, you will build the Power BI Report.

  1. Navigate to https://powerbi.microsoft.com and click Sign in.
  2. At the bottom of the left navigation, click Get Data
  3. Select Samples.

  1. Select the Retail Analysis Sample.

  1. Connect.

  1. Your sample dataset will take a moment to load.

  1. Expand My Workspace and click to on the Retail Analysis Sample under the Datasets. If you have completed the prior steps and do not see this sample, refresh your browser.

  1. Go to the Fields pane, expand the Store table, and select the Territory and Chain fields. Be sure to select the Territory field first or the designer will add table visual to the canvas, instead of map visual. You can also add the map visual to the canvas first and then select the fields in any order.

  1. The map visual will be added for you. Resize and reposition the map as shown below.

  1. Select the canvas and click Slicer visual.

  1. With Slicer selected, go to the Store table and select the Store Type field.

  1. Resize and reposition the Slicer as shown below.

  1. Select the canvas, go to the Store table and select the Name and Open Year fields.

  1. The table will be added for you. Resize and reposition the table as shown below.

  1. Select the canvas and click on the Pie Chart visual.

  1. With the Pie Chart selected, expand the Sales table and drag Last Year Sales filed to Values.

  1. With the Pie Chart still selected, expand the Item table and drag Category field to Legend.

  1. Resize and reposition the Pie Chart visual as shown below.

 

Task 2: Import PowerApps Custom Visual

In this task, you will import PowerApps custom visual.

  1. Go to the Visualization pane and click Import from Marketplace.

  1. Search for PowerApps and click Add.

  1. You should now have the PowerApps visual available for you to use.

 

 

Exercise 2: PowerApps Visual

High level tasks

    Task 1: Create the canvas app you will use as a visual    

Task 1: Create PowerApp Visual

  1. Click on the PowerApps Visual.

  1. With the PowerApps visual selected, expand the Store table and select City and Name.

  1. Click on the environment name and select the environment you want to create the PowerApp in.

  1. Click Create New.
  2. PowerApps studio will open in a new browser tab and Gallery will be added to screen.

  1. Resize Gallery1 it until it looks like the image below.

  1. Click on the Edit button. The gallery will go into edit mode.

  1. Resize the item template of the gallery and make it slightly taller.

  1. With the gallery still in edit mode, select the Insert tab and click Label.

  1. Reorder the labels as shown in the image below.

  1. Double click on Screen1 and rename it MainScreen.

  1. Double click on Gallery1 and rename it storeList.

  1. Select MainScreen and click insert Label.

  1. Rename the new label headerLabel, move to the top of the screen and resize it.

  1. Change the Text for the headerLabel to COMPLIANCE VISIT.
  2. Select the Home tab.
  3. Select the headerLabel, change the font Size to 32,
    Color to White, Fill to Blue, and click Align.

  1. Select Center.
  2. Click File and click Save.

  1. Enter Compliance Visit for Name and click Save.

  1. Click on the PowerApps back button (not the browser back button).

 

 

 

Exercise 3: Connect to Microsoft To-Do

High level tasks

    Task 1: Add connector to Microsoft To-Do

    Task 2: Save and test your work

 

Task 1: Add Microsoft To-Do Connector

  1. While still in the app designer, select the View tab and click Data Sources.
  2. Click Add New Source.

  1. Click New Connection.

  1. Search for Microsoft To-Do and select it.

  1. Click Create.
  2. Close the Data pane.

  1. Select the MainScreen.
  2. Select the Insert tab, click Text and select Text Input.

  1. Rename the new text input todoTitle and place it below the storeList.

  1. Change the Default value to the formula below.

Concatenate(“Visit “, storeList.Selected.Name, ” in “, storeList.Selected.City)

  1. Change the Mode to MultiLine.

  1. Resize todoTile and make sure it looks like the image below.

  1. Select the Insert tab, click Controls and select Date Picker.

  1. Rename the Date Picker dueDate.
  2. Place the dueDate control below the todoTitle control.

  1. Select the Insert tab and click Button.

  1. Rename the button submitButton.

  1. Change the Text of the submitButton to add to list.

  1. Set the OnSelect value of the submitButton to the formula below. This formula will add to-do item to the Tasks folder, set the title of the to-do item to the text in the todoTile input control, and set the due date to the date selected from the dueDate control.

‘MicrosoftTo-Do(Business)’.CreateToDo(todoTitle.Text, {folderId: “Tasks”, DueDateTime:{ DateTime:dueDate.SelectedDate, TimeZone:’UTC’ }})

  1. Move the submitButton below the dueDateControl and resize it.
  2. Your MainScreen should look like the image below.

  1. Click File and click Save.

  1. Click Publish.
  2. Click Publish this Version.

 

Task 2: Test Application.

  1. Go back to Power BI.
  2. Resize and reposition all the visuals until the report looks like the image below.

  1. Click Save.

  1. Enter Compliance Visit for Name and click Save.

  1. Select Pin Live Page.

  1. Select New Dashboard, enter Embedded PowerApp and click Pin Live.

  1. Go to the Dashboards section and select Embedded PowerApps dashboard.

  1. Your dashboard should load.

  1. Go to the map, zoom in, and select Virginia. All the visuals should update including the PowerApp.

  1. Select Colonial Heights Lindseys from the PowerApp list. The input text value should get updated.

  1. Select future date for due date and click add to list.

  1. The item should be added to your to-do list.
  2. Select Tennessee from the map.
  3. Select Cookeville Lindseys from the PowerApp, select future date for due date and click add to list.
  4. Go to https://to-do.office.com and login.
  5. Select the Tasks list. You should see the items you added by the embedded PowerApp.

 

Bonus: Go back and edit the canvas app you have made to give the user a message to confirm submission of the to-do item.