Find and Replace - the story of an Umbraco package

Imagine for one moment that you are a content editor working on quite a large Umbraco website. Just before pushing it live the client sends you a message: "Our PR agency has asked us to change all the content that says 'amazing' to 'sensational' because it converts better."

???

What is your first action? How do you approach it? Using stock Umbraco you would have to go through all the pages, manually read them, replace sentences and at the end you wouldn't be 100 per cent sure that you changed all of them. Tough life you say. Well, not necessarily!

Here at The Cogworks we faced a similar issue and decided to do something about it. What happened? I'll take you through the whole story from when the need transferred to idea right through to the ready to use package. 

Let's begin: Far, Far away... 

Internally at The Cogworks we use Slack to communicate as a company. Right now we have 161 channels in there and one of those is the #packages channel where anyone can post an idea for new functionality.

 

AND THEN CAME June 22nd, 2016

If you're reading our blog you probably know most of the people from discussion. Huan is a Content Project Manager. CallumIsmail and Anthony are knights of the Development Team.


So we have the idea, what's the next step?

We use Trello for task management. It's not the regular version, we have a lot of code behind our processes  to automate things and make it as simple as possible. We will write about that in separate post, so stay tuned!

Our idea was to put it into our "Bucket" list on the Planning Board and wait for free development resources.

As you can see we're quite busy, there were 439 estimation points on that list at some point... There was also a Polish and UK festival to handle ahead of us. With a busy time in general, our package idea had to wait for it's time in the spotlight.

AND THEN BOOM

Then the moment happened and we began to start work on it! The first phase was to decide how it would work and where we should put it. We like to keep things simple and follow this rule...

"less is more"

So, functionality must be super simple. We needed the ability to select a source, form fields for the find & replace phrase and a button to invoke the search action. For the source selector we could use a content node picker and place the whole functionality as a dashboard tab in the Content section. But wait, we want it to be simple and adding a content picker on dashboard tab is not so obvious...

Hmm... 

We can use the current Content tree to select a source and add a new menu item!

 

Ok, so it has it's location. Lets add form fields and the Search button.

In the mean time: "Reinforcements have arrived"

We started working on showing results and marking changes.

results.png

We got it! Some tests were needed so we shared it internally.

internal_release.png

New feature request for Replace All functionality.

replace_all.png

Looks good

but...

 

it wasn't so flawless along the way.

We had some issues with PetaPoco SQL queries - parameters injection was not working properly for the Fetch method.

We fixed it using a LIKE statement instead of CHARINDEX.

We also had to refactor some core logic in JavaScript code to improve updating separately each replace for the same content node.

After fixing all the issues the task was moved to Code Review

and to Internal QA

Find and Replace is fully functional right now. It's simplicity is it's power, we hope it can be part of Umbraco's core functionality one day. For now...

STAY TUNED

We will share the production version with you soon.

PS: Replacing 'amazing' to 'sensational' is fake. It was client related and I had to change it, but you get the idea :)