Making a better User Experience with Power Apps 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 Power Automate (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 Power Automate (Microsoft Flow) as a HTTP endpoint, since Power Automate (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.