SharePoint Buttons that Move Mountains

Well maybe not move mountains, but certainly we can create a button in a SharePoint list that launches a workflow!

Getting started

You can find many posts on how to display an image with a SharePoint calculated field, for example to display red-yellow-green indicators. We’re going to use that technique here to create a button that starts a workflow (or opens any URL). Everything in this article is done using out-of-the-box SharePoint and has been tested with SharePoint 2013 and Office 365 SharePoint Online.

First, we assume you have already published the SharePoint workflow you will launch. Note that your workflow needs to be set to allow manual start.

HTML

We are going to use a bit of HTML to display a clickable button. The HTML is built using a numeric calculated field column in SharePoint, and displayed in whichever views you wish.

I find it useful to use the humble Notepad to help me build the HTML for the calculated field. Start by copying the below HTML and pasting into Notepad. The fields we will change are bolded here.

=”<a href=’WORKFLOW-URL“&[IDcopy]&”‘><img src=’IMAGE-URL‘/></a>”

I have broken down the HTML in the table below to explain the components.

An Annoying Sidebar

You may have noticed we are using the field name [IDcopy] above, rather than just [ID], to refer to SharePoint’s unique index in any list or library. The obvious thing would be just to concatenate the [ID] in the string, like CONCATENATE(“List={bac5-abf-cddc-e46ba}&ID=”,[ID]), but unfortunately that doesn’t work…cue the annoying sidebar.

A calculated field is evaluated when the item is created, but before the ID field is set. When referring to [ID] in a calculated field, the results are inconsistent, but usually null when the record is created. If you try to just use [ID], you will end up with a invalid URL. So a workaround (which is also handy in other situations) is used to:

1. Add a numeric field to the list, which I call IDcopy; and

2. Create a simple workflow to populate that field. Use a list workflow as pictured below, that runs when the record is created or changed.

SharePoint Workflow

Whew! We’re back! That was 10 minutes you’ll never get back…. Now the IDcopy field exists and is being set, and can be used for your calculation.

Next, you need the URL of the workflow you are going to launch – this is the workload of the button we’re creating. Navigate to the workflow initiate page for an item in the list or library (where you see the title Start a New Workflow) and right-click to copy the URL. Paste that into Notepad for your editing pleasure. It will be structured something like: https://server.com/Workflows/Order/Order.aspx?List={bac5-abf-cddc-e46ba}&ID=1234 and may have extra text.

You’ll notice that the ID of the list item is used by the workflow URL (here ID=1234) to indicate which item the workflow is operating on. We can use this URL and some basic knowledge of HTML (or at least knowing how to copy and paste ) to launch the workflow.

Button Image

Go ahead and get an image, or make one, that will be your button. (I build in Visio or download from a site like flaticon.com.) The image size is important in order to display well in your SharePoint list views. You will want a button that is not too “tall” to widen your rows and take up too much real estate. Something around 72 pixels wide by 22 high works well:

Upload the image to your SharePoint site, for example in the Site Assets library. Now copy the URL and paste it into Notepad. It will look something like https://server.com/SiteAssets/order_now.png.

Creating the Formula

Now we are going to create the formula to build the HTML described above. (Remember  <a href=’WORKFLOW-URL’><img src=’IMAGE-URL’/></a>)?

Back in Notepad, go ahead and copy-paste the URLs you copied earlier to replace WORKFLOW-URL and IMAGE-URL placeholders and build the formula. Be very careful to leave single quotes and the rest of the URLs in place, or they will just not work, with no useful error message. Remember the workflow URL must include up to the ID= bit, but no further. (Side note: I recommend converting URLs to relative references, so rather than https://server.com/page.aspx, just use /page.aspx.)

For example, I ended up with (bolded to make it easier to read):

=”<a href=/Workflows/Order/Order.aspx?List={bac5-abf-cddc-e46ba}&ID=“&[IDcopy]&”‘><img src=’/SiteAssets/order_now.png‘/></a>”

Creating the SharePoint Calculated Field

So now, finally, we can create the calculated field. In this example, I called it Order Now. The non-intuitive trick is that the field needs to be NUMBER so the HTML is rendered on the screen, not just displayed as text.

Copy the formula you built in Notepad, and paste into the Formula: box.

Now save your work, add the Order Now field to your view of choice, and test it out!

I hope this helps you impress your friends and get a promotion. Think of me when you’re famous. 🙂

Let me know if you need any help!

Gerry