PowerApps Component Framework – Quick Assign Record Control

Its #FriYay! For every click saved in your work is a productive second put into good use!

From what I have seen, users expect to complete a certain operation in and around 2 clicks. For instance, consider assigning a record in CRM to another user/team – this would pretty much take 4 clicks. How can we simplify this to do the assign operation in just one click? How about a PCF control on an entity form which lists down all the users/teams in an autocomplete text box, where users could do a wildcard search from the list, further pick the assignee and just click on the control’s ‘Assign’ button? Sounds cool? See, we could assign a record in just one click 😀

Source code: https://github.com/prasath2k4/QuickAssignRecord

Demo: https://youtu.be/LNssmD1XN1g

Check out other PCF control at https://pcf.gallery

Do leave a comment if you face any issues using this control.

Thank you for your time!

Cheers

PowerApps Component Framework – Animated Progress Control

How can we gamify the progress bar to make it a usable feature? How about an animated circular progress powered by bootstrap which shows percentage of completion of a certain task. How cool is that?

Scenario: An intuitive way to show the progress of courses taken by a student and how close he/she is to completion.

Source code: https://github.com/prasath2k4/AnimatedProgressControl

Demo: https://www.youtube.com/watch?v=xa8kK7bkYEo

Check out other PCF control at https://pcf.gallery

Do leave a comment if you face any issues using this control.

Thank you for your time!

Cheers

PowerApps Component Framework – Singapore Address Data Lookup by Postal Code

Another PCF quickie before I go for lunch today 😛 A simple on-demand address data retrieval using Gothere.Sg API. Folks in Singapore, can make use of this 🙂 Embed the control on to the form and you’re good to go 😀

Source code: https://github.com/prasath2k4/SGAddressDataLookup

Demo: https://www.youtube.com/watch?v=hcg3FUZFf3M

Check out other PCF control at https://pcf.gallery

Do leave a comment if you face any challenge in using this control.

Thank you for your time!

Cheers

PowerApps Component Framework – WhatsApp Widget

Always wondered if we indeed need a WhatsApp widget on customer form such that we can draft the message and send WhatsApp direct message to the customer right from the Customer form itself. Further you may also create a SMS activity for the same customer too.

Here in the demo, I’m making use of the free WhatsApp API to launch WhatsApp web and send the message.

N.B: For some reasons, the WhatsApp font awesome icon isn’t rendering with 500 GET error. But that can be sorted 😉

Source code: https://github.com/prasath2k4/WhatsAppWidget

Demo: https://www.youtube.com/watch?v=ZLwS4NN5MFc

Check out other PCF control at https://pcf.gallery

Do leave a comment if you are able to fix the font rendering issue 😛

Thank you for your time!

Cheers

Getting started with PowerApps Portals

Its been a month since Microsoft announced about this, now it has been released for public preview. Do note that this is a preview feature and not meant to be used for production purpose.

The most commonly asked question after the advent of PowerApps is how do we take it to external users. Well, Microsoft heard you! PowerApps Portals is the answer for you 🙂

PowerApps Portals let you build low-code, responsive websites which lets external users to interact with the data stored in the Common Data Service and Dynamics 365 environments directly from https://make.powerapps.com

The template designs that come along with PowerApps portal are pretty much the liquid templates, thus, a developer with Dynamics Portal working experience will find the PowerApps Portal quite easier to customize.

Here in this blog which I will keep it very light – after setting up the PowerApps Portal, lets try to create a web page which connect to Contact entity (CDS) and lists all contacts. Let’s keep it real simple for now.

Select ‘Portal from blank (preview)’

Proceed to create the portal with a nice name 😛

create new environment message

You can see the progress right up there in the notification pane

It will take a while, it’s not very instant. You’ll get notified when it ready so that you don’t have to worry about refreshing the page to see the status 😛

Alas, the much much awaited portal is here

Yes, it’s responsive too.

Let’s do the customization and configuration of the portal

Clicking on ‘Edit (preview)’ takes you to WYSIWYG portal designer mode.

Let’s create new page by going to ‘New page’ -> ‘Blank Page’

Insert a List component on the page.

The list control is now added to the page.

Set properties to the list control as below:

Save the change and click on ‘Browse Website’. That’s a simple page creation to show list of contact.

You may play around with other properties bounded to the list control.

In addition this, we have Dynamics 365 Portal where in if your environment contains Dynamics 365 for Customer Engagement apps, you can create the portals mentioned in Portal templates.

Select the required portal template. The creation process is same as earlier what we did for PowerApps Portal for CDS.

The supported browsers currently are:

You may also choose to share or delete the portal. For sharing the portal to internal users, it is recommended to have a System Administrator or at least a System Customizer security role in the corresponding Common Data Service database.

Finally, you can create only one portal of each type in an environment per language. If you try to create more than one portal, you’ll see an error message as follows:

Maximum portal created error

To create more portals, you must create a new environment using the create new environment link in the error message.

I hope this blog serves as a starting point to kick start your interest in PowerApps Portals whilst I try to explore more on the PowerApps Portal and keep sharing my knowledge here.

Reference link:
https://docs.microsoft.com/en-us/powerapps/maker/portals/overview

***Lets make CRM Simple Silly***

PowerApps Component Framework – Start-Stop Clock control

While it has been discussed in length in the articles below,

https://powerapps.microsoft.com/en-us/blog/the-powerapps-component-framework-and-the-powerapps-cli-is-now-available-for-public-preview/
https://docs.microsoft.com/en-us/powerapps/developer/component-framework/overview
https://debajmecrm.com/2019/04/26/in-depth-end-end-walkthrough-develop-your-custom-controls-using-power-apps-component-framework-and-use-it-on-your-crm-interface/

Today, I’ll show you a quick demo of how to build a simple Start-Stop Clock customcontrol and further embed it on a D365 entity form

Demo here: https://www.youtube.com/watch?v=JbOTo6oPafM

Below are the pre-requisites:

  1. Install NPMhttps://nodejs.org/en/
  2. Install Power Apps CLI (command line interface) – http://download.microsoft.com/download/D/B/E/DBE69906-B4DA-471C-8960-092AB955C681/powerapps-cli-0.1.51.msi
  3. Developer command prompt of Visual studio 2017 or later

Step 1: Project setup

Open Developer command prompt of Visual studio 2017 or later

Navigate to any local directory

Run the below command:

pac pcf init –namespace <specify your namespace here> –name <put component name here> –template <component type>
(do note there are two hyphens)

For instance: pac pcf init –namespace CaseTimerControl –name CaseTimerControl –template field

“namespace” is the namespace that you want to provide for your controls.

“componentname” is the name of the control. “template” – Being it a pre-release, only two values are supported for this – field and dataset

Project is now successfully created

Run the command “npm install” as advised. It will install all the dependencies

Dependencies are installed successfully

Your project folder will look like below:

Step 2: Setup Manifest file of the custom control

We will just focus on two files under the below folder.

Open the ControlManifest.xml in any suitable xml editor of your choice. I used notepad++

What does a Manifest file mean, it is a file which contains metadata of a control. For example, the files of a computer program may have a manifest describing the name, version number, license and the constituting files of the program.

The ControlManifest.xml file would look like below:

Let’s look at each xml tag in detail.

In the <control> tag:

1. The ‘namespace’ and ‘constructor’ share the same name of the framework project we created earlier.

2. ‘display-name-key’ – the display name which will appear for the control in CRM. I used ‘TimerControl’

3. ‘description-key’ – the description for the control while will appear in CRM. I used ‘TimerControl’ again.

The control tag in the xml file would now now look like:

Next, we need to set the properties for the control to which this control would be associated to:

I will associate the field type ‘SingleLine.Text’ for this control – meaning in CRM, for the field of data type ‘SingleLine Text’  – this custom control can be used.

In the <property> tag, below element signifies:

name – the name of the property

display-name-key – the name of the property which will appear in the CRM when this control is configured

description-key – Description for the property to appear in CRM

usage – three values are allowed: bound, input or output. It is used to determine if the property is meant to represent an entity attribute that the component can change (bound) or read-only values (input)

of-type – denoted data type of each property. If the usage is specified as bound, then for each of the properties you can only bind it to the corresponding field type as specified here, refer – https://docs.microsoft.com/en-us/powerapps/developer/component-framework/manifest-schema-reference/type

Further, if you need the control to be associated to multiple data types, you can include them in the type group tag as below:

Our xml file would finally look like below:

Step 3: Develop the custom control

Here, we will develop the custom control using the file index.ts file. Open it in a suitable editor. I used VS2017.

You will see a skeleton class with some methods already declared. We just need to implement the methods where appropriate.

First of all, we will need to declare the variable of the control like below:

You may download the full source code here: https://github.com/prasath2k4/TimerControl

Step 4: Build, Run and Deploy the PowerApps Custom Control

Run the command ‘npm run build’ – it will build and show the status.

Run the command “npm start” to view the control in local test harness via a browser

To stop execution, press Ctrl + C on the command prompt window and press ‘Y’.

Now we need to put it in CRM. We need to take this control a solution file. For that, lets create a folder named ‘SolMan’ under TimerControl folder.

Navigate to this path in the command prompt:

Run the below command now:
pac solution init –publisherName MyTimerControl –customizationPrefix mytc
(note the double hyphen)

publishername and customization prefix can be anything.

Run the below command now:
pac solution add-reference –path C:\Users\ramprasathramamurthi\Documents\TimerControl
(path refers to the project folder)

To generate the solution file, run the below command
msbuild /t:restore

Ensure you the see the message ‘Build succeeded’. Further run the command,

msbuild

Wait until you see the message ‘Build succeeded’:

When you open the ‘SolMan’ folder and navigate to Debug folder, you can see the solution file here.

Step 4: Embed PowerApps custom control to Dynamics 365 entity form

Import the solution into CRM.

Go to any entity and create a text field named ‘Timer’ on a UCI form designer.

Go the field properties, then to ‘Controls’ tab and add the custom control we created and enabled it for ‘Web’.

Click Ok and publish all customizations.

Now open a case form, you can see the control being rendered there. There you go!

There are plenty of beautiful controls out there: https://pcf.gallery

Do leave a comment if you face any challenge in doing the above operations.

Thank you for your time!

Cheers

***Lets make CRM Simple Silly***

Getting started with CFS using MX Chip – Capturing IoT Alerts from MX Chip

***Azure IoT Central (as defined by Microsoft) is a fully managed SaaS solution that makes it easy to connect, monitor and manage your IoT assets at scale. It simplifies the initial setup of your IoT solution and reduces the management burden, operational costs, and overhead of a typical IoT project.***

Read on further at: https://azure.microsoft.com/en-in/services/iot-central/

From the above words, it is quite evident that anyone with no background of coding can do a simple integration of MXChip – Azure IoT Central with Dynamics 365 Connected Field Service You can have look at http://mxchip.com/az3166 to know what capabilities the device can offer.

This is how a MXChip IoT DevKit – AZ3166 look like:

Integration Scenarios:

  1. Using the MXChip IoT DevKit, monitor the surrounding temperature.
  2. On the MXChip IoT DevKit, when we press button B – it will create a in IoT alert in Dynamics 365 Connected Field Service.

Let’s see how we can achieve this. Follow the steps below:

Step 1: Getting Started with Azure IoT Central

You will need:

  1. Dynamic 365 instance with Field Service Add-on included (if you don’t have, sign up at https://trials.dynamics.com )
  2. <Optional> Azure subscription (if you don’t have a azure subscription, sign up at https://portal.azure.com )

Step 2: Create Application at Azure IoT Central

Navigate to https://apps.azureiotcentral.com and click on ‘New Application’

You can choose either ‘Trial’ or ‘Pay-As-You-Go’. Either plans will have its own capabilities. It’s obvious that ‘Pay-As-You-Go’ will need a valid Azure Subscription. For now, we’ll choose ‘Pay-As-You-Go’. Pay-As-You-Go applications are charged per device, with the first 5 devices free.

Select ‘Sample Devkits’ since we already have a MXChip device with us.

More info on application templates below:

Sample Contoso: Creates an application that includes a device template already created for a Refrigerated Vending Machine. Use this template to get started exploring Azure IoT Central.

Sample Devkits: Creates an application with device templates ready for you to connect an MXChip or Raspberry Pi device. Use this template if you are a device developer experimenting with any of these devices.

Custom application: Creates an empty application for you to populate with your own device templates and devices.

The Application name and URL are automatically generated.

Further, you need to select your Directory, Azure Subscription, and Region:

Directory is the Azure Active Directory (AD) to create your application. It contains user identities, credentials, and other organizational information. If you don’t have an Azure AD, one is created for you when you create an Azure subscription.

An Azure Subscription enables you to create instances of Azure services. IoT Central will provision resources in your subscription. If you don’t have an Azure subscription, you can create one on the Azure sign-up page. After you create the Azure subscription, navigate back to the Create Application page. Your new subscription appears in the Azure Subscription drop-down.

Region is the physical location where you’d like to create your application. Typically, you should choose the region that is physically closest to your devices to get optimal performance. You can see the regions in which Azure IoT Central is available on the Products available by region page. Once you choose a region, you can’t later move your application to a different region.

Once above 3 items are selected, click on ‘Create’

The Dashboard of Azure IoT Central is shown:

Go to ‘Device Explorer’, select ‘MXChip (1.0.0)’ and select ‘Real’

The device page with status as ‘Provisioned’ is shown. Now, click on ‘Connect’

The created device’s connection properties is shown as below. Copy down all the IDs to a notepad, you will need it later.

Step 3: Setting up the MX Chip

We need to load the IoT Central firmware to the MX Chip.

Connect the IoT device to your p.c (windows OS). It will open up in a separate disk drive with the device name AZ3166. Open the drive folder and copy the firmware file here.

The firmware file ‘AZ3166-IoT-Central-2.1.0.bin’ is available for download here: https://we.tl/t-YckLL4kuob

Once copied, the folder will be automatically closed. The IoT device will reboot as well.

You should see a Access Point name on the screen of MX Chip that you can connect to via the p.c Wi-Fi. Go to p.c Wi-Fi connections and look for the connection name ‘AZ3166_SRSDC’. Click on ‘Connect’.

This will help us to connect to the device.

In the browser, open the url: http://192.168.0.1 and click on ‘Here’

The Azure IoT Central Device Config page is shown as below:

Click on the first dropdown item on the page to look for available Wifi connections for the IoT device to connect. For now, I will use my mobile HOTSPOT.

Device Pin Code: 4584 (as shown on the screen of IoT device)

Scope ID, Device ID, Primary/Secondary Key are available in the notepad, which you copied earlier.   You can select ‘SAS Key’ and check ‘Temperature’ alone as we will only monitor temperature

Further, click on ‘Configure Device’.

Device configuration is now completed. It is not needed to press ‘Reset’ button as the page says.

Quickly look at the IoT device, it will be trying to connect to the Wi-Fi network you just configured.

Once connected, it will start to send the temperature data to Azure IoT Central.

To view the data, go to Azure IoT Central, select ‘Device Explorer’ -> MXChip (1.0.0) and select the MXChip with ID we just created.

Go to ‘Measurements’ tab, scroll down until you see ‘temperature’ and click on the eye icon (Visibility) to view the temperature data being streamed into Azure IoT Central from the IoT device. (In the pic below: hover the mouse cursor on the black line, 27.50 degrees is the temperature data being sent from the IoT device)

The device will keep sending the temperature data every 12 seconds to Azure IoT Central.

All good now. This covers scenario 1.

For scenario 2, if you look at the IoT device, there’s button with name ‘B’. When we press this, we create an IoT alert in CRM. To achieve this, IoT central has got its down Out-of-the-Box device templates.

Headover to Azure IOT Central -> Device Templates and select ‘MXChip’

Go to ‘Rules’ tab. Click on ‘New Rule’

Further, click on ‘Sample Rule’

For instance, give rule name as ‘Button B pressed’, make sure ‘Enable rule for all devices of this template’ is enabled. In the Conditions, choose ‘Button B pressed’.

Click on ‘Save’

So, when the button B is pressed, we need to create IoT alert in CRM. We will make use of Microsoft Flow for this purpose.

Under Actions -> Click on “ + “, scroll all the way down until you see ‘Microsoft Flow’

Microsoft Flow page is opened up (Note: If you are not signed-in, it may ask you to sign in, please do so). Click on ‘Explore Templates’.

Look for the flow ‘Create CFS Alerts from IOT Central’ and click on it.

Ensure both Dyanmics 365 and Azure IOT Central are having same account and two green tick marks are there as below.

Further, click on ‘Continue’

The flow configuration page is shown:

Application: Ensure that application is chosen from the dropdown with applicate we created earlier.

Rule: It will be Button B pressed as we created earlier

Organization name: your current org (choose from the dropdown)

Entity name: IoT Alerts (OOB Entity – no need to choose. It is chosen by default)

Description: You can leave it as it is you may customize as per your wish.

Once above details are entered, click on ‘Save’ (You may also use ‘Flow Checker’ to validate your flow).

Click on ‘Done’ The configured rule on the device will now look like below:

Head over to the device, click on Button B.

Now, come to your CRM instance and open ‘Connected Field Service’ app

Go to My Work -> IoT Alerts

There you go! We can see the IoT alert being created! WOW!

At-last, we have our Scenario 2 covered as well.

Well, this is just a tip of the iceberg. The possibilities are endless. You may wish to bring in your own scenarios as per the capability of the device.

Additional links:

https://dev.to/azure/azure-iot-central-and-mxchip-hands-on-lab-328i

https://www.hanselman.com/blog/DidILeaveTheGarageDoorOpenANocodeProjectWithAzureIoTCentralAndTheMXChipDevKit.aspx

Do leave a comment if you face any challenge in doing the above operations.

Also, let me know your feedback on the blog as its my first post.  

Thank you for your time!

Cheers

***Lets make CRM Simple Silly***