Sunday, June 5, 2016

CRM and PowerApps

In my last blog, I wrote about CRM and Microsoft Flow. While researching for building and registering a custom API for Microsoft Flow, I came across another preview product named Microsoft PowerApps.

What is Microsoft PowerApps?

Microsoft PowerApps is a preview product that enable the users to build custom business mobile/web apps and share those apps with colleagues in no time. The user does not need coding skills to build PowerApps. If you have basic Microsoft Excel skills then you can build an app. Like Microsoft Flow, PowerApps also allows users to connect to cloud apps like SharePoint, CRM Online, Twitter, Google Drive, OneDrive, Office 365 and Custom APIs etc. Microsoft PowerApps and Microsoft Flow work very well together. Both have the same set of prebuilt connections. You can even use Microsoft Flow within PowerApps.
Check the following link to know more about PowerApps.
https://powerapps.microsoft.com

Creating a sample app using CRM Online connection

PowerApps allow you create an app using:
  • Existing data sources like CRM Online,  Salesforce and Twitter etc.
  • Pre-built templates
  • A start from scratch
For this blog, I am creating a PowerApp using a CRMOnline Connection. Here are the steps.
  1. Signup for PowerApps and install the PowerApps app.
  2. In PowerApps, Select New  >> Create an app from your data” >> Dynamics CRMOnline, as shown in the screenshot below.
    2016-06-01_13-07-41
  3. Create a new connection to your CRM Online organisation. In my case, I already have connections, as shown in the screenshot. Click on HPE (or the dataset for your organisation).2016-06-01_13-08-59
  4. Select Contacts from the dropdown and click Connect, as shown in the screenshot.2016-06-01_13-11-24
  5. PowerApps will create an app. The app will have 3 Screens:
    • BrowseScreen1(Home Page with a list of the contacts and a search box)
    • DetailScreen1 (Displays the details of the selected item on BrowseScreen1)
    • EditScreen1(Opens the selected record/new record in edit mode)
  6. On BrowseScreen1, select the gallery as shown in the screenshot and change the items property to as shown below. It will allow the user to search for a name in Full name in CRM and sort the list based on the last name.

    2016-06-03_16-53-55
  7. Now, select the fields in the first item of the gallery and choose the CRM field you would like to display in that control. Please have a look at the screenshot below.
    2016-06-01_13-19-46
  8. Select DetailScreen1. Select any field on the Details screen. It will display all the fields on the screen in the options pane as shown in the screenshot. Click on the purple eye in the options pane to add or remove the fields on the form.
    2016-06-03_22-52-53
  9. Select EditScreen1. Use the options pane to add and remove the fields on EditScreen1 as explained in step 8 above.
  10. For this app, I wanted to add a camera feature. Click on New Screen. Rename the screen to CameraScreen1.

    2016-06-06_11-24-23
  11. Add the camera control to CameraScreen1, as shown in the screenshot. Add the camera control to the screen, as shown in the screenshot.

    2016-06-06_11-50-02
  12. Rename the camera control to MyCamera.
  13. Set the OnSelect property of MyCamera to Back().

    2016-06-06_11-53-56
  14. Select EditScreen1 and select the entityimage field from the options pane.
    2016-06-06_12-01-08
  15. Select the menu represented by 3 dots to go to the Advanced options.

    2016-06-06_11-08-00
  16. Change the ImageX.Image property to If((photos=true), MyCamera.Photo,Parent.Default), as shown in the screenshot.
    2016-06-06_12-04-28
    This will the set the image property of the control to MyCamera.Photo when the value of the photos variable is true, else leave the value to default.
  17. Also set the visibility property of the entityimage control to If((photos=true),true,false).
    2016-06-06_12-09-55
    It will display the entity image only when the value of photos variable is true.
  18. Now add the camera icon next to the save button on EditScreen1 as shown.
    2016-06-06_12-14-44
  19. Set the OnSelect property of the icon to Navigate(CameraScreen1,ScreenTransition.Cover);UpdateContext({photos:true}). When the user clicks on the camera icon it will take the user to the camera screen and set the value of the photo’s variable to true. The picture will be displayed in the entityimage field added in step 14.
  20. Select DetailScreen1. Change the OnSelect property of the edit button to Navigate(EditScreen1, ScreenTransition.None,{photos:false}). On select of the edit button, the screen will navigate to EditScreen1 and set the value of the photo’s variable to false. This means EditScreen1 will not display the entityimage control unless the camera button is clicked.
  21. Save your app. It will add your app to PowerApps and be available to run on your phone and computer.

Testing the App

  • To test this app on iPhone or android, you will need to install the Powerapps app on your phone.
  • When you start the app, it will display the list of contacts. The user can search for a contact by typing the name in the search box. Click the right arrow to go to the details screen.

    2016-06-06_13-05-04
  • Click on the edit icon to edit the record.
    2016-06-06_13-09-27
  • The user can edit the details by changing the values on the edit screen. Click on the camera to add a picture.
    2016-06-06_13-11-10
  • Click anywhere on the camera to take the picture.

    2016-06-06_13-12-54
  • The app will take you back to the editscreen1 and display the picture as shown in the screenshot.

    2016-06-06_13-15-48
  • The app will save the record in CRM. Open the record in CRM and check if the image is updated.

A few things that did not work for me

I am very new to Powerapps. There are a few things I have noticed that does not work well.
  • For the CRM Online connection, If the record has a lookup field, the record will return the guid and object type, but not the name field of the lookup record.
  • Could not figure out how to display the CRM entity image in the app
  • The Add Picture control does not display the camera roll on iPhone. It will always display the iCloud option to choose a picture.





8 comments:

  1. Nice power pic amreek.

    MR

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. hey Did you try with the different data type of CRM?
    how to bind the optionset, lookup,datetime
    please let me know if you have achieved this.

    ReplyDelete
  4. I also had problems adding new items to CRM. I could edit existing Items, but creating a new item would fail without an error.

    ReplyDelete
  5. Great article.
    I'm new to PowerApps and am having trouble connecting to my CRM Online.
    I can add a connection when I create a new PowerApp but then I don't see any datasets that I can select.
    How did you get the HPE dataset ?
    Regards
    Alfred

    ReplyDelete
  6. With camera I want to use location feature also, What shoud I do?

    ReplyDelete
  7. I can set up my new idea from this post. It gives in depth information. Thanks for this valuable information for all,..
    mobile app templates

    ReplyDelete