Dynamics Code

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.

You can get the source code of the component here.

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