Power Automate replace() generator

plz make a replaceAll() function Microsoft

I spent the last couple of nights getting my feet wet with Vue.js and have been having a lot of fun. Since I hate making todo apps, I decided to make something useful for myself.

Use it

Direct link

How it works

0. Check out Microsoft's documentation for the replace() function
1. Enter something in the "source" field, e.g. @{body('Get_file_content_using_path')}. This is the text that contains the text to be replaced.
2. Enter things in the "find" fields, e.g. ${FIRST_NAME}.
3. Enter things in the "replace" fields, e.g. variables('FirstName')
4. The resulting replace function will appear below, next to the 📄 emoji.
5. Add more things to find and replace by pressing the ➕ button.
6. Click the ❛❜ next to each field to denote that the output should be enclosed in quotes.
7. By default, the generator will ignore @{} on all input fields as Power Automate adds this when copy-pasting. You can change this under the options if your text just so happens to be encapsulated in @{}.
8. By default, the generator will add @{} on the result, so it can be easily copy-pasted into actions. You can change this under the options if you are copy-pasting into an expression field.

Why make an app?

I have a love-hate relationship with Power Automate: I love how easily it is to deploy a workflow that will save hours of tedious, manual work while having a sense of confidence that it won't fall apart (provided users follow the process), but I hate some of it's limitations and interfaces.

One of the things I hate is the lack of a replaceAll() function. This leads to nested replace() calls, which gets messy to build and debug.

The primary reason I use these nested calls is for email templates:

1. Get the file contents of something on Sharepoint, full of strings like ${FIRST_NAME}, ${OUTPUT_TABLE} and ${DATE}.
2. Replace these template strings with outputs from Sharepoint lists, variables and/or compose actions
3. Email the replaced text

This allows non-technical users to modify the content of an email without having to edit the flow (or more realistically, wait for me to edit the flow).

It's extremely tedious to build these nested calls manually because you have to be mindful of parentheses, quotation marks and removing @{} from anything you have copy-pasted. Not to mention that the cycle between making changes and testing them is not rapid as you have to save the flow then trigger it somehow.

I had hacked together a PHP script to do this but it was clunky and not very nice to use, so let's make things better.

How it was made

Since I was new to Vue.js, I didn't know exactly where to start so I did what a lot of people do now in 2023, I prompted ChatGPT. Surprisingly, it gave me a working solution that I could use as a scaffold. Unfortunately, the code is Vue v2, and I wanted to use the new shiny v3. With some minor adjustments it was up and running. The Vue.js tutorial was very good at explaining some of the basic concepts on how things functioned and I recommend anyone who is interested in learning Vue.js to check it out.

The basic functionality only took me a couple of hours to implement. At it's base form, there is an updateRender method that is called anytime an input is changed inside the app. This method creates the replace string for each table row; The first row uses the source text as the "find" parameter and subsequent rows use the previously created string as the "find" parameter. I assumed that the "find" parameter was a literal string, and the "replace" parameter is the output from a Power Automate action.

While it basically did what I wanted it to do, I started thinking about how it could be better:

• What if the source value, and replace values were also literal strings?
• What if I want to copy the result string directly into a compose action instead of inside the expression prompt?
• How do I deal with the @{} that surrounds text copied directly from the Power Automate interface?

So I implemented those features the next evening. Vue.js made it super simple to make this a reality. Hopefully this makes it a more robust tool that can be used for more use-cases around the replace function in Power Automate.

Lastly it was a matter to make it look half-way decent. I'm not a designer by any stretch of the imagination (this website is testamount to that fact) but I think it looks relatively decent for what it is.

Where you can get it

Feel free to use it on this page, or grab it from it's Github repository

What next?

This would be the perfect thing to turn into a Greasemonkey/Tampermonkey script so that it could be run from directly within the Power Automate interface. When I feel motivated I will come back and update this page with the results of that effort.