Category Archives: Configuration

Making a better User Experience with PowerApps Component Framework from sketch – Part 4 – The Final Showdown

Published / by AK / Leave a Comment

You can read previous post Part 1, Part 2 and Part 3.

Seeing is believing

It took me 2.5 days to learn and figure out the design and new technologies I need to build the component.

Less than half a day, the mock version of the component was completed. The component was loaded on the form, the dialog was shown with the mock file list, the Flow was triggered to attach a hard-coded SharePoint file to an email as an attachment.

Now, I can prove the team that the PCF control works. I can show it to users how the component can change their life drastically.

When users saw the new UX, it just blew away them. They just forgot the inconvenience with the out-of-the-box user experience. We shot down Top 1 issue from their bounty list.

Keep yourself connected

Though the mock version was smooth, there were a few issues (as expected) I faced. When I tried to use WebAPI in PCF, it always return null. I checked my old PCF which used to be work. It was not working anymore. I looked at other PCF examples from the community. All looked same as mine. Mine was not working. I had no clue.

So, I reached out Natraj (God Mode of PCF). He kindly showed me the direction. It turned out PCF team had introduced <feature-usage> tag in manifest. I had to include WebAPI feature in manifest file to use WebAPI. It was a life saver.

A blocker? Reach out to the community.

You don’t have to be alone solving the issue.

Coming to the end

Just over 1 day of building and trouble shooting, I had a fully working version of the component. In fact, the total build time was less than the initial design and exploration.

If you ask me “Would you spend more time thinking and playing than actual building?”, my answer is “Always”.

I encourage my colleagues to spend more time exploring than completing tasks. Completing the task is the last thing I worry. To me, understanding fundamentals and visualising the process are more important than just completing the task. Once you fully understand it, the rest is a piece of cake. You don’t need to look back. You can keep moving forward.

Limitations or future enhancements

There are many limitations and a few things I couldn’t include in this first version.

  1. Support sub-folder in SharePoint – The component does NOT currently support the navigation of sub-folder in SharePoint. I had the working FetchXml query and will add it in next version.
  2. Support attaching documents from Notes – I want to allow users attaching from Notes of an associated record, similar to SharePoint documents.
  3. Support local file attachment – This will make the component one-stop shop for attachments. You can attach files from SharePoint, Notes and local files.
  4. A managed solution package (with potential AppSource)

Configuration

After I posted the component in LinkedIn, a few people reached out to me how to configure the component and its Flow. I had privately responded to them.

The component accepts 3 properties

  1. Regarding Id – Can be bound to any text field. However, I recommend creating a separate text field as I need to update it’s value to trigger onChange event in Dynamics to refresh the grid. Currently, it is the only supported way to refresh the grid.
  2. SharePoint Site URLs – You can include multiple site collection addresses with comma separated value. For instances, https://mysite.sharepoint.com/site1, https://mysite.sharepoint.com/site2
  3. API/Flow URL – The URL of Flow end point. It will look like this “https://prod-19.australiasoutheast.logic.azure.com:443/workflows/…invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=…&spsite={0}&spfilepath={1} . Get my Flow here. Once you imported the Flow, copy the HTTP URL from the trigger. Then, append the URL with &spsite={0}&spfilepath={1} and set it as property value.

Last step is to hook up JavaScript to refresh the grid. Create a JavaScript web resource or update the existing one with the following script.

function refreshAttachmentGrid(executionContext) { 
var formContext = executionContext.getFormContext();
var attachmentGrid = formContext.getControl("attachmentsGrid");
attachmentGrid.refresh();
}

Then, add the web source to the Email form and add onChange event on the attribute you bound with PCF to call refreshAttachmentGrid function.

That’s all you need to configure to use the component.

I hope you enjoy this mini-series of blog. You can read Part 1, Part 2 and Part 3.

I will be back with another cool PCF that works in both model-driven apps and canvas apps. Stay tuned. Bye for now.

Channel Integration Framework with Twilio – Part 1

Published / by AK / 2 Comments on Channel Integration Framework with Twilio – Part 1

I have posted the video of incoming call using CIF here. It is a live working demo using Twilio trial account. I am going to share my experience of making this so anyone can easily setup the basic features and start exploring more awesomeness.

I have tested the public preview of Microsoft Dynamics 365 Channel Integration Framework. It was before Christmas and New Years holidays. Moving house over the holiday period kept me occupied for weeks.

Last week, I started to look into CIF again. During the public preview, I had issues with incoming and outgoing calls. I was able to connect to Twilio service. Outgoing/incoming calls that return pre-defined messages were successful. However, I couldn’t manage to figure it out to make a call to a real number.

In this post, I am going to cover D365 users responding to incoming calls directly from web interface – without leaving D365 at all.

Preparation

Before we start, please go through followings

Now, we can begin!

Setting up

You will find steps provided in Microsoft documentations are easy to follow. But I find problems with the section to create Twilio functions (https://docs.microsoft.com/en-us/dynamics365/customer-engagement/developer/channel-integration-framework/sample-softphone-integration#create-function-to-use-with-the-app-service).

According to Readme included in the sample code, you have to create functions in Twilio. I followed the instructions and couldn’t manage to make it work. So, I started with creating a basic client and later add a couple of controllers to the sample code to setup a twilio client.

You can follow tutorials from https://www.twilio.com/docs/voice/client/tutorials/how-to-set-up-a-server-for-twilio-client to create a basic client including TokenController and VoiceController. Creating own controllers give us the whole capability of Web, flexibility and fine grain control of call processes, such as limiting the functionality, dynamic routing which could be stored somewhere else.

In Twilio console, it is very easy to get confused and lost in navigation. However, we can get the information we need from
– Twilio account dashboard at https://www.twilio.com/console
– TwiML apps at https://www.twilio.com/console/voice/twiml/apps
– Phone numbers at https://www.twilio.com/console/phone-numbers/incoming

In short, you need to

Once you have deployed the sample code, you need to configure your trial Twilio Phone Number. First, let’s create a TwiML to route and store it in TwiML Bin. You can find TwiML bin under Runtime or at https://www.twilio.com/console/runtime/twiml-bins/. For testing purpose, let’s create following TwiML.

TwiML
TwiML

You may ask “What the heck ‘ak’ is sitting between Client tag?” Well, it directly relates to the client name of token generated from TokenController.cs

TokenController
TokenController

Once TwiML is saved, go to your phone number and configure its A CALL COMES IN setting by choosing TwiML and choosing the newly created TwiML from Bins.

Phone Number Configuration
Phone Number Configuration

That’s all you need to configure to receive and answer the call using CIF. It takes a while to get it right. Reading Twilio documentations will help you a lot.

Enhancements

You would notice that I use a static TwiML to route to the client in Phone Number configuration. In real world, I think Webhook is a better approach where you can return TwiML dynamically according to implementation of business rules. In addition, TokenController.cs could do similar thing which generates dynamic token for each login user. That way, the call could be routed to the correct client.

Need help?

Reach out to me if you need any help and it is confusing.

Passing current login user of Microsoft Dynamics CRM Portal to external web app

Published / by AK / Leave a Comment

You can get the detail of current login user in liquid template va user liquid object. There is another way you can get the current login user via XHR call.

Microsoft CRM Portal has built-in API to generate JWT of current login user. The API is at https://<crm portal url>/_services/auth/token and returns JWT. This JWT is nothing but a JSON object encrypted using RS256 algorithm. So, anyone can decode it. Other words, anyone can encode it also.

You sometimes need to pass the current login user information to external web app. Since it takes very little effort to generate a JWT and pass it to your external website, it is very easy to bypass the security. Therefore, you will definitely want to verify the authenticity of generated token too ensure the token is generated from trusted source (in this case, your CRM portal).

The beauty with JWT is you can verify the signature of token using public key. If you are not familiar with PKI, the process generally involves the source or CRM portal which generates a token using its private key (which is already handled in CRM portal), and the target or your external web app which verifies the authenticity of the token using public key. To do this, get  the public key of your CRM portal at https://<crm portal url>/_services/auth/publickey.

The order of the whole process is

  1. Pass JWT token as a parameter in a web request/link to your external web app
  2. In your external web app, get public key from CRM portal and verify the signature of the JWT contained in web request

That’s easy, simple and neat. Right?

Next time, we will have a look at Azure AD B2C configuration to authenticate users, which requires more configurations and adds a little bit of complexity.

Multiple user roles and entity permissions in Microsoft CRM Portal

Published / by AK / Leave a Comment

Before reading the post, you may would like to read the official document on Microsoft at https://docs.microsoft.com/en-us/dynamics365/customer-engagement/portals/assign-entity-permissions. This will give you a basic understanding of entity permissions in Microsoft CRM Portal.

Your customer wants to build a portal using Microsoft CRM portal. Connection is used for linking their contacts and accounts. Your customer wants to control the permissions of their contacts (who will login to the portal) on their related accounts, based on their connection role. If a contact is assigned as Admin role, he should be able to edit the account record. But, if it is User role, he should have read-only access to Account record.

Using connection to assign role to accounts

Sounds like a familiar request from most customers?

If yes, let’s look at how we can implement this scenario in Microsoft CRM portal.

Continue reading

Default tab (timeline) of Activity Wall in CRM Portal

Published / by AK / Leave a Comment

Configuration and customization of CRM portal is always fun. You need to pay attention to even the smallest thing as there is no one stop place to configure them. Everything is connected among CRM form, portal entity form, metadata, permissions inheritance, scripts. One mis-configuration would render the form incorrectly.

One day, we found that some portal forms are rendering Timeline area like below where it is supposed to be Notes area.

Continue reading