Upgrading SharePointSSO Copilot SPFx to Botframework-WebChat 4.18

This is a quick post about how to make a few packages work together.

Firstly, we have this SharePoint SSO Copilot Studio Sample.
https://github.com/microsoft/CopilotStudioSamples/tree/master/SharePointSSOComponent

It uses SPFx 1.18, which uses typescript 4.7
It also uses botframework-webchat 4.15.9

There are a few really nice upgrades in Botframework-webchat since 4.15. But they also picked up a dependency on typescript 5.0.

Lots of people have reported issues with this…
https://github.com/microsoft/BotFramework-WebChat/issues/5345
https://github.com/microsoft/CopilotStudioSamples/issues/260

Now if only we can easily upgrade SPFx to typescript 5.0…
Which is exactly what MVP Andrew Connell has written here:
https://www.voitanos.io/blog/sharepoint-framework-typescript-v5/

So the final steps are:

1. Commit everything first

2. npm uninstall @microsoft/rush-stack-compiler-4.7 -DE

3. npm install [email protected] -DE
   npm install [email protected] -DE

4. npm install @microsoft/[email protected] -DE

5. Update ./tsconfig.json (see AC’s blog!)

6. npm install [email protected]

7. I had the build failed because a task (lint) wrote output to stderr.
   So I had to switch off a few rules and suppress the error warning.
   
   

Surprisingly, everything works and deploys fine in SharePoint online.

A debug tip for complex conditions in Power Automate #FlowNinjaHack 126

This is #FlowNinjaHack 126

Sometimes, we have complex Condition blocks in Power Automate.

And when we run the flow, it just shows “false”, which is a bit hard to debug.

One way I’ve started doing, is to write a Compose debug statement that shows the output of each component of my condition.
I show the Code View here as well so you get the idea.

To convert from the Condition block to these expressions can be a bit tricky, since you can’t use Code View easily for Condition. So here’s a second hack.

Paste this to a text editor, something that understands JSON. You’ll get this part.

        "type": "If",
        "expression": {
            "and": [
                {
                    "not": {
                        "equals": [
                            "@outputs('Get_item_-_Bulletins_list')?['body/Status/Value']",
                            "Draft"
                        ]
                    }
                },
                {
                    "not": {
                        "contains": [
                            "@body('Select_page_filename')",
                            "@variables('varTitle')"
                        ]
                    }
                },
                {
                    "contains": [
                        "@body('Select_page_filename')",
                        "@outputs('Compose_-_Old_Title')"
                    ]
                }
            ]
        }

Now this is still not the right format, but you can then go from this to:

not(contains(body('Select_page_filename'), outputs('Compose_-_Old_Title'))

With a lot less pain.
This is the debug message you’ll see when you run now.

Updating AzCopy in Azure Pipeline

You know how the saying goes - if it ain’t broke don’t fix it. Well, something broke in my Azure Pipeline for Flow Studio App a few days ago, and it took a bit of time to figure it out, so it makes sense to write it down. I’m pretty sure I’ll forget again.

The error is related to AzFileCopy

• AADSTS7000222: The provided client secret keys for app '***' are expired. Visit the Azure portal to create new keys for your app: https://aka.ms/NewClientSecret, or consider using certificate credentials for added security: https://aka.ms/certCreds.

• There was an error with the service principal used for the deployment.

I set up my pipelines years ago and don’t remember what was in them. But there were a few issues:

• I want to switch to Workload Identity Federation thing in Azure Pipelines, it looks like that means I won’t have to keep remembering my keys

• I was using AzureFileCopy@3 which is not the latest version, latest version is v6. It also looks like v3 didn’t support the new credentials.

Steps

• Click the convert button in Azure Pipelines

• Fix AzCopy arguments

• Fix a permission issue

Click the convert button

It created this identity. Hmm no secrets.

Fixing AzCopy arguments

I was using these AzCopy arguments: /S /Y /SetContentType

/S is --recursive=true 
/Y is --overwrite=true 
/SetContentType is apparently a default behaviour now so I didn’t have to set that
--as-subdir=false

This is a new one I needed, because otherwise it was creating the “Drop” folder in Azure Pipelines as the rootfolder in Azure Blob.

Fixing Permissions

For a few hours I was struggling with AzCopy not working with the new credentials, and I don’t understand. I think because previously the credentials impersonated a person. Whereas now I need to grant a certain role to this new identity.

Go to Subscription (or Resource Group, or Storage)’s IAM settings.
Add Role Assignment
Find Storage Blob Data Contributor
Add the service accounts created by Azure Pipelines.

It should look something like this at the end.

and success

Flow Studio App v1.2 Updates

February and March was really busy for us here at Flow Studio.

Catherine is now wearing multiple hats and helping on Flow Studio in so many needed areas. You’ll see her a lot from here on.

Learn Flow Studio

First, we launched Learn Flow Studio - this is where we are publishing content, blog and newsletters regarding Flow Studio App. All of our previous documentation is moving here, and we’re not done yet! There are more articles to write.

Flow Studio - what’s changed in v1.2

• Flow Studio App needed a backend cache library update - we took this opportunity to update our IndexedDB library from LocalForage to DexieDB. LocalForage doesn’t seem to be updated for some time, so the change looks necessary. We started this work on December 26, 2023.
  With this change in mind, we reworked the cache layer, giving us much better performance when we have lots of flows and flow runs. This is was quite a big change, the changes stayed in our dev branch for several months.

• We fixed up a lot of labels, help text and links to learn flow studio.

• We fixed Flow Studio migrate - removed operationMetadataId from being detected by the migrate wizard. There’s just too many guids it picked up.

• We combined Flows and Flows (Solutions), so now everyone can see their solution flows in the free tier.

• Made improvements to Full Text Search, when searching flow actions with “Compose This” we will also check for “Compose_This”. We also added RegExp search. Read more about this on learn.

Flow Studio App - roadmap / coming soon

• At a high level, we are looking at moving more scanning to the background, giving users better control over the periodic scanning of the Power Platform, and rely on the IndexedDB cache to provide instant rendering of the Flow Studio App UI.

• We want to start working on improving our user account management, including managing multiple license assignments and delegation.

• We also are looking forward to implementing the Favourites feature.

Check out Flow Studio App

Updates to Flow Studio App in 2023 October

There’s been a series of updates to Flow Studio App on our development build, as I’m preparing to push this next stable build to production, I thought I’d take this time to list down lots of changes we’ve done in this latest series of updates.

View fullsize

Production 1.1.51

View fullsize

Dev 1.1.58

Oh what happened to the red colour!

• Switching UI Control Set towards Fluent 2
  
  We are in the middle of switching the overall look and feel and UX experience from default Telerik component style to the new Telerik + Fluent style, which would be more inline with the experience in Power Platform and also M365.
  

• Switching primary colour from red to a “whale” colour
  
  First is switching away from the red colour - so we can actually use red to indicate serious issues happening elsewhere on the screen that demands your attention, like that "Flow Suspension” notice on the top-right.
  

• On Flows, Flow (Admin) and Flows (solution) screens, we added pagination controls, this greatly helps rendering the grid when you have hundreds of flows.
  Don’t worry, search and sort is applied prior to paging, so it won’t leave you with having to browse through several pages before finding your item.
  

• The grid menu dropdown filter had an bug fix that allows us to select the fields more accurately. Previosuly, the menu often lose focus and we aren’t able to easily select a field to filter.

• Flow Diagram had several fixes

• Approvals tab had more fixes.

• Settings tab is brought back - we will be making lots more user-configurable settings very soon.

• We tidied up the overall page styling and reduce wasted padding around the grid and window (but do give us feedback if we mess something up on your device)

The next lot of updates will begin to drop on dev branch really soon.