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***