Conditionally Display Microsoft Flow Activating Buttons in Sharepoint Libraries Using Column Formatting

Before Column Formatting:

Image from support.microsoft.com

After Column Formatting:

Image from support.microsoft.com

Introduction

This post goes over how I used Sharepoint’s Column Formatting to solve some points of friction I experienced when executing a specific automated workflow. If you have not read my post on creating an automated file sharing workflow, you can read it here: blog post. This post is a continuation of sorts, but can also be a stand-alone read where you can learn how to use column formatting to solve some of your specific problems.

Column Formatting allows you to customize the look and feel of your Sharepoint library or list. Column Formatting lets you do whatever you want, as long as you follow it’s schema. People have used Column Formatting to make document lists visually meaningful and incorporating useful features such as buttons that simplify activating automated workflows. I will go over how I incorporated a flow activating button to solve some pain points I had in my automated flow.

Problem

Activating flows for selected files is a three click process. You click the three dots to bring out a menu where you can navigate through the Automate dropdown to find the flow you want to run.

This is straightforward for experienced users and for document libraries with a few flows. It may get complicated down the line when there are a large number of flows, which may confuse the user into clicking the wrong flow. Another problem is activating flows on files that are not supported. In my example, my company does not send specific file extension to customers. Having the option to run the flow on unsupported files wastes time and effort.

Solution

The implemented solution can be seen on the right. I created a new column called ‘Create Shareable Link’ where buttons are conditionally displayed on specific file extensions to activate a flow on click.

Notice how the button does not render on folders or certain extensions like .vsdx. This prevents the user from even starting a flow on unsupported files. The button column serves as a fast visible cue on what is supported versus what is not supported, greatly increasing the user’s experience from a multiple click step that may result in a failed flow, to a quick one click solution.

You can start formatting Sharepoint columns by clicking on your column header, going into Column settings, then clicking Format this column. If a column does not exist, you can create one in your list or library settings.

Formatting columns follows a JSON schema. You can find the general format on the official Microsoft Sharepoints page, but you can copy the code below and edit it as a starter. This JSON renders a button that activates a specific flow. The flow is set in the customRowAction field. You will have to replace the id with the id of your own flow. You can see how you can get your flow ID below.

Styles for your button and how it is rendered can be written in the style field. I have added a display and visibility property to filter which files the button will be displayed with. The JSON uses excel like code for conditional statements.

I used a nested if-statement to check file names ($FileLeafRef) for extensions we do not support. If it passes, the button will not be rendered.

The visibility field checks for folders and hides the button if it passes.

You can copy the Schema below:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "Create Link",
  "customRowAction": {
    "action": "executeFlow",
    "actionParams": "{\"id\": \"<ID_OF_FLOW_HERE>"}"
  },
  "style": {
    "border": "none",
    "cursor": "pointer",
    "background-color": "#2980b9",
    "color": "#FFF",
    "padding": "4px 4px 4px 4px",
    "border-radius": "5px",
    "display": "=if(indexOf('[$FileLeafRef]', '.vsd') != -1, 'none', if(indexOf('[$FileLeafRef]', '.pro') != -1, 'none', if(indexOf('[$FileLeafRef]', '.msi') != -1, 'none', if(indexOf('[$FileLeafRef]', '.pcm') != -1, 'none', if(indexOf('[$FileLeafRef]', '.pcc') != -1, 'none', if(indexOf('[$FileLeafRef]', '.iso') != -1, 'none', if(indexOf('[$FileLeafRef]', '.cs') != -1, 'none', if(indexOf('[$FileLeafRef]', '.mac') != -1, 'none', if(indexOf('[$FileLeafRef]', '.prt') != -1, 'none', if(indexOf('[$FileLeafRef]', '.csv') != -1, 'none', if(indexOf('[$FileLeafRef]', '.xps') != -1, 'none', 'block')))))))))))",
    "visibility": "=if(((indexOf([$ContentTypeId],'0x0120')) == 0),'hidden', 'visible')"
  }
}

To find the ID of your flow, go to your flow in Microsoft Flow / Power Automate. In the URL, you can find the ID in between Shared and Details. Insert this flow ID into the column formatting JSON.

Conclusion

Document libraries do not have to be boring. With Sharepoint Column Formatting, the applications are endless. From adding character and visual cues to libraries, to implementing buttons, column formatting is an easy tool to add into your workflow that can make document libraries or lists a little more fun and intuitive. In my case, I was able to implement a one click solution to reduce friction in our automated workflow by adding a flow activating button that renders only for supported files. This has greatly increased the user experience for the workflow by preventing wasted time trying to activate flows on unsupported files, only to get a failed flow. Thanks for reading!

For more information on column formatting, here is a link to some documentation from Microsoft: https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting