Tag Archives: JavaScript

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.

Making a better User Experience with PowerApps Component Framework from sketch – Part 3 – The Slow Start

Published / by AK / 1 Comment on Making a better User Experience with PowerApps Component Framework from sketch – Part 3 – The Slow Start

You can read previous episode Part 1 – The Problem and Part 2 – The Sketch.

The Slow Start

I always take time to figure out the suitable frameworks and libraries, try them out and learn them, as the first stage, before building. That makes me a slow start. Sometimes, notoriously slow. It is, to me, worthy as it will give me an extra boost from the mid stage.

List to free you up

Firstly, I listed down main questions/challenges in this problem

  1. Office UI Fabric – How would I use? Where would I learn? How would I test?
  2. Popup dialog – Which dialog should I use; PCF Popup service or Modal from Fabric?
  3. Getting document lists from SharePoint – How would I retrieve document lists from SharePoint?
  4. Getting a file content from SharePoint – How would I read the file content from SharePoint? Using JavaScript or custom WebAPI or Microsoft Flow?

Intelligence == Liability

This is something I learned during my early day with Test Driven Development (TDD). Smart people do not write unit tests on their code, because their code always work. By the time, they write unit tests on their code, it is eventually too late.

The same concept

Writing down a list of things you need to do can be challenging. It can be seen as waste of time, lack of creativity and extra works.

To me, it is the total opposite. With list, you don’t need to memorize what you need to do, thus it frees up your brain. As a result, you can shift your focus to new stuffs for boosting the creativity.

UI Fabric

It is a preferable choice in creating user interface that mimic Microsoft Office products. Besides, it is built with React. No brainer here. But the problem is I had never used UI Fabric before.

I went to UI Fabric and started playing with controls and styles.

The best thing about UI Fabric documentation is you can export the sample code to CodePen and play around with it. It was an ultimate time saver, as I didn’t need to setup UI Fabric in my machine.

I learnt how to use several components like

  • Detail List for showing files from SharePoint
  • Icons for displaying appropriate file icons so it is visually appealing
  • Scrollable Pane for making the popup dialog compact even with a long list of files
  • Search for allowing users to search files so they don’t need to scroll through
  • Button for triggering a logic to attach files from SharePoint to Email attachments in CDS
  • Progress Bar for informing users attaching files is in progress so they know it is doing something

Popup dialog

First, I looked at Popup service in PCF. I felt its implementation is not very friendly plus minimal documentation. It would be perfect for a simple dialog.

I turned into Modal component in UI Fabric. Since I will be using other UI Fabric components, I decided to stick with Modal from Fabric. Plus, I can test it CodePen whereas I have to setup a PCF project for Popup service.

Getting documents from SharePoint

You cannot retrieve documents from Advanced Find although you can see it in the query.

SharePoint Document in Advanced Find
SharePoint Document in Advanced Find

So, what did I do? I used Developer toolbar and inspected the network traffic. It gave me FetchXML I needed and the response I can work with.

Getting a file content from SharePoint

I tested reading SharePoint file using “fetch” library”, I immediately hit into CORS issue.

Therefore, I had to develop a custom WebAPI. I decided to use Microsoft Flow as a HTTP endpoint, since Microsoft Flow already has the out-of-the-box SharePoint connector.

Slow is smooth. Smooth is fast.

United States Navy SEALs

Up to this point, I spent almost 2 days to figure out and play around with most components I needed to use. I hadn’t written a single line of code in the PCF project.

Now, I asked myself the same question.

Am I ready to build? Definitely, YES.

Yes, I am ready to build the component by myself. Besides, I am ready to give a definitive guide to others for build the component I want.

Next, I will share you how long it took me to build a working component (excluding these 2.5 days:0.5 day of sketching and 2 days of learning). Stay tune for the final episode.

Making a better User Experience with PowerApps Component Framework from sketch – Part 2 – The Sketch

Published / by AK / 2 Comments on Making a better User Experience with PowerApps Component Framework from sketch – Part 2 – The Sketch

Part 1 – The Problem can be found here.

Time for Proof of Concept (PoC)

I like building canvas app, for Proof of Concept (PoC) purpose. It is so easy. Drag and drop, a few clicks and formula, and then you can see the result.

I thought of building a canvas app in the first place. However, I quickly discarded the idea as soon as I figured out there was no easy way and it’s going to take much time.

So, I turned into PowerApps Component Framework (PCF).

Sketching the idea

I love using pencils and paper. It is so physical and gives me the first hand experience. After doodling a couple of pages, I came up with the following sketch.

On the paper

I am trying to build a button using PCF that can be placed on the email form.

When users click it, I want to show a list of SharePoint documents from the related record (regarding) as a dialog. I want users to select multiple files and attach them to the email with a single click.

When users click Attach button in the dialog, it will call a WebAPI that will return the file content from SharePoint. Then, the component will create an attachment in CDS email, and hide the dialog.

From Requirements to Build

Sketching the idea is easy. Listing down requirements is straightforward. Saying “I want these” is a piece of cake.

But, the build is a real challenge. It is even more challenging if a builder doesn’t know technologies, frameworks, libraries and their abilities to make his life easier. This is where a leader can make difference.

Guess to solve

For instance, Person A asks you to create a web page, saying “I want a responsive web page on every device. You can probably use CSS and tweak positions, width, and alignment to make them responsive.”

There is a clear requirement which is a responsive design. But the solution to the problem is blur. No definitive. It is more misleading when Person A starts talking about tweaking position, layout and alignment. A builder can easily drift away with tweaking x and y, width and height, and alignment in basic CSS, which works on every single browser and device.

Make a difference

Now, what about this. Person B says “I want a responsive web page on every device. You can check out Bootstrap, especially its layout/grid system. Let me know if you have a challenge. We will figure it out.”

Whom would you love to work with? Person A or Person B?

To me, it is definitely Person B. A leader who gives you a clear direction but makes you learn it yourself. At the same time, he doesn’t mind getting his hand dirty.

Now, back to the sketch I drew. It’s time to ask the important question myself, and I must answer it honestly.

Am I ready to build?

The answer is NO. There are a couple of things I needed to figured out.

In the next post, I will write how to figure out what I needs to learn and try out before building an actual component. Stay tuned for Part 3 – The Slow Start.

Making a better User Experience with PowerApps Component Framework from sketch – Part 1 – The Problem

Published / by AK / 4 Comments on Making a better User Experience with PowerApps Component Framework from sketch – Part 1 – The Problem

Since the public preview of PowerApps Component Framework (PCF), I always want to build a component that enhances the user experience (UX) in model-driven apps in Common Data Service (CDS) or Dynamics 365.

Recently, I had an opportunity to build a component with PowerApps Component Framework (PCF) that will save several mouse clicks from each user.

I literally started building a PCF component using a paper and a pencil. I thought of sharing my experience in this mini-blog series.

Activity and document management in CDS

People uses Customer Relationship Management (CRM) system to keep track of every interaction with customers in one place. If users have to juggle between many applications to see all interactions, it will not be productive.

CDS includes an activity management, tracking emails, tasks, phone calls, letters, and appointments. Users can sync these activities between CDS and Exchange.

Being able to send an email directly from CDS is convenient to users, as they don’t need to switch to Outlook to send an email. If an email is sent from a case, the email will automatically associate with the case, giving a 360 degree view.

Today, users often use SharePoint as a central document management system to store documents related to cases and customers. CDS offers out-of-the-box integration with SharePoint, thus integration is merely a couple of mouse clicks. Everything is perfect.

Attaching documents in Email

When users send an email to the customer in CDS, they often need to attach documents from SharePoint by going through following steps:

  1. Open a case record
  2. Navigate to Documents tab
  3. Click a file to download*
  4. Choose a local folder to save the files* (several clicks to navigate and create a new folder)
  5. Navigate to Activity tab
  6. Add a new Email
  7. Save the email
  8. Click Attach File button from the command bar*
  9. Choose a file from the local folder* (several click to navigate to the correct folder)
  10. Repeat the whole process if the user needs another file from SharePoint

*Repeat if more than one file is needed


A problem?

You can clearly see the user experience (UX) is horrible. Look at followings:

  1. Users have to download each file individually
  2. Users have to store files locally in an organised manner
  3. Users will not know know if local files are outdated
  4. Users have to attach a file individually
  5. The worst part? Users have to go through the whole process if they forget to download a file.

What if users can attach documents from SharePoint to an email directly?

It will be a time saver to users. Imagine users can attach multiple files from SharePoint to an email in CDS.

In the next post, I will show you how I plan to tackle the problem. Stay tuned for Part 2 – The Sketch.

PowerApps Component Framework – Beyond the boundary

Published / by AK / 1 Comment on PowerApps Component Framework – Beyond the boundary

Note: I am going to write some dark magic with PCF. It is not currently supported by Microsoft. These are my personal findings. Views are my own. But if you want to dismantle PCF and want to test the boundary, then read further.

Credit: Andrew Ly for his Number Button Selector control and feedback. Rami Mounla for proofread and correction on the content.

The source code can be downloaded at my github.

Intro

Microsoft has announced public preview of PowerApps Component Framework (PCF) and its Command Line Interface (CLI) in April 2019. Many developers, including me, have been anticipating this new feature. I find the documentation useful. A few people has started building and sharing new controls. No disappointment from this beautiful community.

Absolute need

TypeScript. Although I am not absolutely convinced the preference of TypeScript to JavaScript (by the way, JavaScript is my favorite), it is the only choice we have right now. However, Andrew Ly has pointed out essential areas where TypeScript really shines, such as strong typing, OO concepts thus bringing the gap between JavaScript and OO languages like C#/Java.

Beyond absolute need

There is no doubt you can build any control following Microsoft documentation. But, I don’t want to stop here. I want to push its boundary and limits. So far, I recommend adding 3 more types of knowledge.

2. React for UI components

When the sample from Microsoft documentation shows building the UI using TypeScript, it reminds me of my student days when I had an assignment task asking to build a UI in C++. I could not force myself to create UI in C++ program.

TypeScript for building modern UI? No, please.

I admit I was super lazy during my student life. I only wanted to deliver bare minimum. So, UI in code file is a NO for me. However, as my career began and I collected some experience, I allegedly become a bit wiser. Yet, the wiser me supports the lazy me.

There are many libraries to choose. However, you can find react and react-dom packges under node_modules after executing “npm install” at step 4.. So, React is the choice. You can also use JSX which makes life easier when building DOMs.

2. NPM for packages

The motto of “Why reinvent the wheel?”. NPM hosts thousands of free packages. Most of the well-established libraries are now distributing over NPM. It is like NuGet for JavaScript. Now, you may ask “why not reference the CDN?”. Well, that brings me to next one.

3. Webpack for bundling

A module bundler. It will bundle all your resources, and packages from NPM, as a single package. Referring to CDN will only work when there is connectivity (or it is dependency). If we want to use it offline in mobile devices, we may encounter some issues.

The good news is that you don’t need to worry about NPM and webpack. PCF CLI handles them gracefully in most cases. I did however notice that there are some issues with adding large NPM packages (>500kb). The bundling tends to behave weirdly.

Create a new PCF Project

You use “pac pcf init” command to create a new PCF project. It will pre-create ControlManifest.Input.xml and index.ts.

pac pcf init
pac pcf init

Create a react component

Let’s create DemoComponent.tsx and write some scripts. The sample source can be found at my github repository.

Project structure
Project structure

Run ‘npm run build’ command. You will get an error saying ‘–jsx’ is not set. To resolve this, you need to add “jsx”: “react” in tsconfig.json located under your root folder. After this, you will be able to run ‘npm run build’ command without any issue.

JSX error
JSX error
Update tsconfig.json
Updating tsconfig.json

Now, let’s render DemoControl in index.ts. You will see an error and you will not be able to run ‘npm run build’ command.

Render react component

Now, let’s change index.ts to index.tsx and you will see the error is gone from IDE. You also need to update the code file extension in ControlManifest.Input.xml.

But, when you run ‘npm run build’, you run into another issue saying ‘Code file needs to be a typescript (.ts)’.

Looking at the error, it comes from pcf-scripts module which is located under node_modules folder in your PCF project.

tsx error during build
tsx error

A quick search using the error message brings me to line 84 at controlcontext.js under pcf-scripts module.

Include tsx
Only allow .ts

You simply need to update ‘if’ statement to allow .tsx extension and save it. And Magic happens.

Include tsx
Add .tsx into file type

Now, if you run ‘npm run build’, it will succeed. Next, it’s time to execute ‘npm start’. When the browser is launched, you will see the error ‘React’ is not defined.

React error
React error

To address this error, open index.html under your pcf root folder\node_modules\pcf-start and add following two script tags.

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

As soon as you save your changes, your react component will be rendered.

React control demo

Congratulations! You have created a custom control using PCF and React.

The proceder in this article is experimental only.

Final word

Even though you can deploy React control to model-driven app, this approach is not currently supported by Microsoft. I am sharing this only for experimental purposes and showing how PCF can be extended using modern libraries. I am not a pro-React developer nor a TypeScript developer, therefore, I may have approached this the wrong way. If you have any comments, please share them below.

Microsoft CRM Portal (online) development essentials

Published / by AK / Leave a Comment

After developing a custom portal on Microsoft CRM Portals, I like to share my experience.
This is kind of starter guide to build highly customised web pages on Microsoft CRM portals. It is a high level and very informal guide.

Libraries and frameworks

To customise the portal, a good understanding of followings are essential.

Bootstrap

Microsoft CRM portal uses Bootstrap. Use bootstrap customiser like https://www.bootstrap-live-customizer.com/ for a quick customisation.

Continue reading

Client-side library for CRM Portal – Completion of first draft

Published / by AK / Leave a Comment

Before end of 2016, I started working on Microsoft CRM Portal development. I realised I have to heavily use liquid and JavaScript if I want to customise. It is true that we can use jQuery to manipulate its elements but I never want to manipulate DOMs especially in this type of application whose UI would change over the time. Coming from CRM development, it will be completely understandable. Continue reading