Guest Blog: Creating a PowerApps Mobile Application with Dynamics CRM in 1 Hour

Cross posting this great blog post by Jim Steger & Brad Bosak from Sonoma Partners where they share about their experience in creating a PowerApps app from Dynamics CRM in 1 hour, when they recently presented at CRMUG Summit.

 

<---- Start Original Blog posted by Jim Steger on October 19, 2016 ---->

Today's blog post was co-written by Brad Bosak, Vice President of Development at Sonoma Partners.

I recently presented at the CRMUG Summit on how to use the new PowerApps Studio to quickly create mobile applications using the Dynamics CRM Online connector. As I prepped for this session, my colleague, Brad, and I discovered that native CRM connector can quickly get you to a working functional application in minutes. However, since the connector is still in early preview, some adjustments need to be made to use these applications in practice.

We are going to provide the steps we went through to create an application that will show active contacts in a list, allow you to drill into the contact record for additional details, and finally update the contact records. All of this will begin by using the default template provided by PowerApps through the Dynamics CRM Online connector. The application you will create is shown below:

IMG_2046IMG_2047IMG_2049

You are also encouraged to download the completed application, but please review the install note after you extract the file.

Before you Begin

Before trying out this application, you will need to have some prerequisites completed.

  • A PowerApps account using your organization email address
  • A valid CRM Online instanced under the same organization
  • Download the Windows PowerApps Studio application & PowerApps mobile clients for the mobile devices you wish to distribute
Contact App Demo Setup
  • Open the PowerApps Studio and create a new connection to CRM Online

image

  • Note that this will take you to the PowerApps web page where you can configure a connection

image

  • Back in the PowerApps Studio, create a new Phone Application using that connection and by selecting the  contacts entity

image


image


image

You will see the application is created and ready for use (in theory at least Smile). The newly created app has a live copy of your contact data and 3 screens (a list screen, contact detail screen, and an edit contact screen). Unfortunately, the default list, detail, and edit screens do not provide the fields or format we desire. To address this, we'll use the rest of this article to simply “clean up” our app. 
image

Add Data Sources

Since we want to also display and edit company information in our application, we will also add the Accounts entity as a data source. This will be necessary as we demonstrate a work around for the lack of lookup support in the current Dynamics CRM Online connector.

image

Important: The current Dynamics CRM Online connector does not support lookup or option set data types. This application will need to use a lookup field (Company), so we'll demonstrate how we worked around the lookup limitation.

  • Add Accounts so we can display names in our lists and lookup fields

 

Change Theme

For variety, let's change the overall app theme. Select the theme of your choice. We went with Light.


image

 

Update Icon & App Name & Save Locally

We want to encourage you to save often as you work on your application. There are two save options, one saves to the cloud and the other locally. We prefer to save locally as we work on our application as it is a bit faster with how often we save. This approach also allows us to put our app file in source control. However, in order to distribute the application, you will eventually need to save to the cloud.

You can also change your application name, icon, icon background color, and screen orientation from the App Settings menu. Select File - App settings and then name your app, change the icon and icon background color. Finally click Save and save locally.

image

 

image

 

Browse Screen

Now that we have saved our progress, we'll update the Browse screen first, using the default screen/list layout provided.

Our first step updates the list filter to only show active contacts and search on the last name field. You accomplish this by selecting the list of records and replacing the Items property with the following line of text:

SortByColumns(Search(Filter(Contacts,statuscode=1), TextSearchBox1.Text, "lastname"), "lastname", If(SortDescending1, Descending, Ascending))

 

The Filter function trims the dataset based on the criteria entered, in this case only showing active contacts.

image

Next, we will remove the fields we don't wish to display.

Note: You need to select the first cell of the list to access the individual elements of the list.

  • Remove all fields by selecting each control and clicking delete, except the entity image. We'll add back the ones we want to display.

image

  • Make the entity image smaller, so it takes up less room in the cell
  • Insert a Text box control to show contact full name
    Note: The CRM connector doesn't return full name in the field list, so we'll need to manually concatenate it
    • Text = ThisItem.firstname & " " & ThisItem.lastname
    • Vertical align to top of image

image

  • Copy and paste the previous Text box control to to show the contact's job title
    • Text = ThisItem.jobtitle
  • Repeat this process for the Parent Customer (company) field.
    • Text = LookUp(Accounts,accountid = ThisItem._parentcustomerid_value).name
    • Note that lookup fields display the id (GUID), not the label. We'll fix that by using the LookUp function. The LookUp function takes our newly added Accounts collection and matches the parentcustomerid with the accountid. We then use the result to return the name field from the account.
  • Tighten up row height by selecting the bottom of the first cell and dragging to the desired height
  • Change font size as desired by updating the Size property to whatever value you wish

image

  • SAVE!

Detail Screen

Next, select the DetailScreen1 page from the screen list. We'll also make this screen more presentable to the user. Similar to the Browse screen, we'll remove the fields we don't wish to display and add the ones we do. But for this screen, we'll also take advantage of PowerApps custom card option.

image

  • Remove all fields but Company Name card
  • Add Custom card and move the card to top of screen by dragging the card to the top

image

  • Make sure you keep the the custom card cell selected and insert Image
    • Set Image property to ThisItem.entityimage
    • Drag the size to something that fits in the left corner
  • Insert Text box
    • Set Text property to ThisItem.firstname & " " & ThisItem.lastname
  • Insert Text box
    • Set Text property to ThisItem.jobtitle
    • Change font size. Select Size in the dropdown and set it to 16
  • Select the custom card and change card fill to a different color
    • Set Fill to RGBA(227, 233, 241, 1)
    • Note you can use a web converter tool such as http://www.hexcolortool.com/ to help with the correct RGB color

image

  • Select Company Name card and then select the Advanced Properties

image

    • Unlock the card, so we can edit the individual properties

image

    • Update Company Name to display name to LookUp(Accounts,accountid = ThisItem._parentcustomerid_value).name

image

    • Close the Advanced Properties dialog
  • Add EmailAddress1 and Telephone1 fields by simply enabling eyeball indicator
  • Select the EmailAddress1 field and change the display to launch the native email client with the email address prepopulated.

image

  • Similarly update the telephone1 field to display as a phone number. This will launch the native phone client when the application is used.

image

  • SAVE!

Account Lookup View

In order to work around the lookup field limitation on the edit form, we will create our own lookup dialog for Accounts. We'll create a new screen (page) and populate it with the active account list. This will allow us to call this page from our custom lookup field on the edit page.

  • Click the New Screen button in the upper left of the designer
  • Name this new screen Account Lookup

image

  • Click Layout in the right pane and select the 'Browse items, one line description' template

image

  • Rename header textbox to "AccountLookupTitle"
  • Select the text label control and change the text to "Accounts"

image

  • Update the Items property of the list by replacing the sample gallery text with the Accounts data source and change the search property
SortByColumns(Search(Filter(Accounts,statuscode=1), TextSearchBox2.Text, "name"), "name", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))
 

image

  • Click the first cell in the list. Select the text box control and update the Text property to show the account name.

image

  • Rename the list to "AccountList"

image

  • Update the Arrow icon's OnSelect property to  ClearCollect( SelectedAccount, { Account: AccountList.Selected } ); Back()
    • This clears previous values and creates (if not already created) an in-memory collection that we can reference from the other views, I haven't found another good way to have a 'global variable' in PowerApps

image

  • Let's hide the new accounts button, as we don't want to create new accounts. For simplicity, we'll just hide the field, by setting the Visible property to false.

image

  • SAVE!

Edit Screen

Finally, select the EditScreen1 page from the screen list. Using the native CRM connector for PowerApps, automatically wires up the edit page. We don't want to interrupt this process, but we'll need to use a workaround for the lack of lookup support. For the other fields, it is as simple as adding the fields to the form.

  • Remove all fields except the Company fields and Last Name

image

  • Add emailaddress1, firstname, jobtitle, telephone1 and order them as shown in the image below.

image

We will now show you our workaround for managing lookup fields. We are going to relabel and hide the existing type and id fields. Then we'll create our own lookup field that will talk to the Account list we previously created.

Update the parent customer field to show our lookup control instead of the GUID

  • Click the ellipsis on _parentcustomerid_type field in the right pane and select Advanced Options
  • Unlock the card to change properties 
    • Click more options in the Data section and change Default field to "accounts"

image

    • Click more options in the Design section and change Visibility field to false

image

  • Click the _parentcustomerid_value field and should see the Advanced pane change
  • Unlock the field by clicking the lock at the top of the options pane
    • Select the Text box in the parent customer card on the form
      • Rename the Text box to AccountGuid
      • Set the Visible property to false

image

    • Change Company Name card Default value
      • This is saying the if we have a selected account in our custom collection, use that value.  If nothing is in our custom collection, use whatever is currently set on the record from CRM

 

If( IsBlank( First( SelectedAccount ).Account.accountid ), ThisItem._parentcustomerid_value, First( SelectedAccount ).Account.accountid ) 
image
    • So we have now setup the card and original field bindings for the form to use. What is left is for us to create a field to select the account.

      • Insert a TextBox control to the card
        • Rename the TextBox to "AccountName"
        • Update the BorderStyle property to Solid
        • Update the BorderThickness property to 2
        • Update the X property to 30
        • Update the Y property to AccountGuid.Y
        • Update the Width property to Parent.Width - 60  (to match the other input fields)
        • Update the Height property to 52
        • Update the Text property to LookUp( Accounts, accountid = Parent.Default ).name

image

      • Insert a magnifying glass icon control to the card

image

  • Update the X property to Parent.Width - 82  (Note: 82 is the right padding of 30 between the textbox and the edge of the screen plus the width of the icon)
  • Update the Y property to AccountName.Y
  • Update the Height and Width properties of the icon to 52
  • Update the OnSelect property to Navigate('Account Lookup', ScreenTransition.None)

image

    • Select the form and update the OnSuccess property to Clear( SelectedAccount );Back()

image

    • Select the Cancel button and update its OnSelect property to Clear(SelectedAccount);ResetForm(EditForm1);Back()

image

That's it! Click the Play icon in the top right menu and test your application. If everything is working as it should, save to the cloud to test on your mobile phone.

 

<----- End of Original Blog ---- >