Sonoma Partners Microsoft CRM and Salesforce Blog

Creating a PowerApps Mobile Application with Dynamics 365 in 1 Hour

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

Note: This article was updated on January 23, 2017 to reflect the latest update to the Dynamics 365 connector. Specifically with the lookup approach.

Note: This article was updated on December 14, 2016 to reflect the latest updates to Dynamics 365 and PowerApps.

I recently presented at the CRMUG Summit on how to use the new PowerApps Studio to quickly create mobile applications using the Dynamics 365 connector. As I prepped for this session, my colleague, Brad, and I discovered that native Dynamics 365 connector can quickly get you to a working functional application in minutes. However, since the connector is still in 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 365 connector. The application you will create is shown below:

imageimageimage

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 Dynamics 365 (Online) instance which must reside in the same organization
  • Download the latest 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 Dynamics 365 
    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. Note, you can search to filter the table list.

    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 365 connector.

image

Important: The current Dynamics 365 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. You find the theme selection in the main Home tab. It will be the down arrow if your screen size of the application is small. Otherwise, it will be listed as "Theme" in the ribbon. 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, app description, and screen orientation from the App Settings menu. Select File - App settings and then name your app, change the icon, icon background color, and provide a short description. 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 Dynamics 365 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
    • Change font Size to 16
      image
  • Repeat this process for the Parent Customer (company) field.
    • Text = LookUp(Accounts, Text(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.

  • Remove all fields but Company Name card
    image
  • 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 from the Media button
    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, Text(accountid) = ThisItem._parentcustomerid_value).name 
      image
    • Close the Advanced Properties dialog
  • Add EmailAddress1 and Telephone1 fields by simply enabling eyeball indicator from the Options tab.
  • 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. 
  • 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. Remember, we have already created (and used) the Accounts data source. 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 and change the font Size to 20.
    image
  • Rename the list to "AccountList"
  • 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. You can do this from the Icon tab and unselecting the Visible button.
    image
  • SAVE!

Edit Screen

Finally, select the EditScreen1 page from the screen list. Using the native Dynamics 365 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. First, we 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 and populate the fields we just hid, which will allow the native wiring to work as expected.

    • 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
    • We have completed the setup for 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 - Make sure you are focused in the Company Name 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, Text(accountid) = Parent.Default ).name
          image
      • Insert a magnifying glass icon control to the card to have the input better resemble a lookup control
         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 four Padding properties to 5. This will shrink the icon a little and make it look better
        • 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 and then share with your team.

Topics: Enterprise Mobility Microsoft Dynamics 365 Microsoft Dynamics CRM 2016 Microsoft Dynamics CRM Online