Diff Mode in Flow Studio

We are happy to introduce a new feature update in Flow Studio app. “Diff Mode”

• Navigate to Diff on the left hand side.

• Use the top dropdowns to select your environment, flow and (optionally) version. Hit “Load”

• You can use Monaco (VS Code) editor to copy Flow definition differences to the right hand side.

• The left hand side is always read-only.

• Clicking “Save” will save the right hand side flow definition.

This is a feature previously hidden in “Snapshots” and “Diff” flow. But that experience only lets you compare between the flow and its previous versions. The new experience also let you compare a flow between two different environments. So if you have Dev, Test and Prod environments with unmanaged solutions - you may need this to keep your flows in sync.

Do test this out in https://dev.flowstudio.app v1.3.58 for now and give us your feedback. We’ll aim to push this to production build within 1 week.

Thank you for supporting Flow Studio App

Mathematically Elegant way to Flatten an Array of Arrays in Power Automate

When working with data in Power Automate, you may encounter nested arrays (arrays within arrays)—especially when dealing with JSON responses, SharePoint lists, or API results. However, many Power Automate actions require a flat array to work properly.

In this post, I'll show you a mathematically elegant way to flatten an array of arrays into a single-level array using Power Automate expressions.

Understanding the Problem

Let's say you have the following array:

[
    ["Ford", "Toyota"],
    ["BMW", "Audi"],
    ["Honda", "Nissan"]
]

Instead of dealing with nested arrays, you want to flatten it into a single array:

["Ford", "Toyota", "BMW", "Audi", "Honda", "Nissan"]

The slow way - Array variable

The slow way is to use an array variable, then while looping through the top level array, append or union the results into the array variable.

Variables are so slow I don’t even want to make them and add a picture.

The faster way - String manipulation

Convert the array into JSON string, remove the extra array [ and ] characters, re-construct the array in string, and convert back to JSON.

This is a method I was using, it’s much quicker, but has a risk of needing to be careful when removing bracket characters. If you have nested JSON objects this needs more care.

The new fastest way - div and mod flattening

To understand this - you need two numbers: m and n
m = number of elements in the top array
n = number of elements in the child array

Create a range of the total result size of the array (m) * (n)

Use select - loop through this range of numbers, then for each, select the nested result using:
outputs(‘nested-items’)?[ div( item(), outputs(‘n’)) ]?[mod( item(), outputs(‘n’)) ]

do you see how elegant this is 🤔

View fullsize

From:
range(
  0, 
  mul( 
    length(outputs('Nested_Array')),
    outputs('Compose_-_child_size')
  )
)

Map:
body('Nested_Array')
?[div(item(),outputs('Compose_-_child_size'))]
?[mod(item(),outputs('Compose_-_child_size'))]

what’s going on here?
let’s picture for each of the 6 elements above.

0 = array[0][0] div(0, 2) = 0, mod(0,2) = 0
1 = array[0][1] div(1, 2) = 0, mod(1,2) = 1
2 = array[1][0]
3 = array[1][1]
4 = array[2][0] div(4, 2) = 2, mod(4,2) = 0
5 = array[2][1]

so in one select, we can flatten an (m * n) -sized array.

What if my child array is irregularly sized?
That’s OK. By using ?[n] Select will return null for that element, so we can follow the select with a filter-array to remove the nulls.

View fullsize

View fullsize

Bonus

This works wonderfully with Pieter’s Method, which returns array of Body jsons.

Bonus

This works well for cross-join of two arrays, and then flattening them into one.
(These bonus ideas are massive additional blog posts let me know if want to read them…)

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.

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.

Updating Flow Studio's Flow Diagram feature

A customer reached out regarding Flow Diagram in Flow Studio - there was a bug preventing it from being generated. This was probably an issue that had been going on for some time - Flow Diagram was a feature last updated since June 2020. I’m very grateful when customers reach out with an email to ask me to look into something - thank you for bringing this to my attention.

In this case, we had a simple syntax bug, and then an evening of playing with Flow definitions and Mermaid JS graph syntax to give it some overdue love.

In Flow Studio’s drawing, we draw a subgraph whenever we see a scoped action: Scope, If, While, For Each loops. But in Mermaid the arrows must be linked to a node. So Flow Studio draws an imaginary “/End Scope” action, for lines to connect to at the bottom of the graph.

Previous versions don’t attach the line from the end of a scope correctly to the parent, leaving the crazy picture we see on the left.

After this update, we now get the cleaned logical version on the right.

When following “Non Succeeded” run-after path in a flow definition, we now draw a dotted arrow instead of the traditional solid line.
You can try our latest test build on https://dev.flowstudio.app/

Flow Diagrams are designed mainly for makers to document their flows with a diagram. Both Mermaid JS markdown is available, as well as generated image.

Let me know if you have any feedback.