SharePoint List Formatting Tabs

I’m a huge fan of the SharePoint List Formatting capabilities. It allows non-developers to easily transform their SharePoint lists to make them more useful and visually appealing. To get an idea of some of the things you can do with SharePoint List Formatting check out my other blog posts: Planner-Inspired Task Cards and Twitter Style Formatting. You can also check out the SharePoint List Formatting GitHub repo for even more ideas: https://github.com/SharePoint/sp-dev-list-formatting

Limits

While there is a lot that you can do with list formatting, it does have it’s limitations. You can have clickable actions in list formatting, however, you are only allowed to open a hyperlink, open the edit item panel or execute a Flow.

Currently, there’s no way to execute a JavaScript OnClick event natively with list formatting. Being able to use JavaScript with SharePoint List Formatting would really open up some doors and allow you to have a truly interactive list. Which got me to thinking…

Using JavaScript with List Formatting

I wanted to do a very simple test to see if I could make JavaScript work with SharePoint List Formatting. The easiest example I could think of was an interactive tabbed layout. This could be useful in SharePoint for lists with a lot of data points.

The first problem to solve is how to get the JavaScript on there. One idea would be to create a SharePoint Framework extension to add the JavaScript. Hugo Bernier has a great blog post where he describes how to create an SPFX extension to inject CSS: https://tahoeninjas.blog/2018/05/08/inject-custom-css-on-sharepoint-modern-pages-using-spfx-extensions/ . This method could be revised to inject JavaScript into the page as well. However, in this initial testing phase that seemed like overkill.

Modern Script Editor to the Rescue

As I thought about it more, I remembered that Mikael Svenson had created a Modern SharePoint friendly Script Editor Web Part: https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-script-editor

This is the modern equivalent of the old Script Editor which allows you to inject scripts into your modern SharePoint pages. The code is already out there so I could simply download it and install in my environment to start injecting JavaScript! The only down-side with this approach is I will have to surface up the list in a page instead of directly in the list itself. But for now, that is fine with me. If you do want this to work directly in your SharePoint list then the SPFX extension approach is the way to go.

The JavaScript

So the first problem is solved, I have a way to inject JavaScript in a Modern SharePoint Page. The next piece of the puzzle is to write the JavaScript for the clickable tabs. The first problem you’ll run into is most jQuery tabs examples are dependent on binding to an ID. This doesn’t mesh with SharePoint List Formatting because you cannot use ID’s, only classes. That means I had to get creative with the JavaScript.

I won’t bore you with the details of the JavaScript. It’s actually very simple. For this first version, it hardcoded to accommodate for 3 tabs. You don’t have to know JavaScript to get this working because I have provided the script for you here: https://github.com/aprildunnam/SPJS/blob/master/listFormattingTabs/tabs.js

The List Formatting

Now that the JavaScript is squared away, all you have to do is create the list formatting. Again, I’ve made this easy on your by providing a link to download a sample of the JSON. If you don’t care about the details about the formatting just skip the next couple paragraphs and download the code here: https://github.com/aprildunnam/SPJS/blob/master/listFormattingTabs/tabbedLayout.json

This JSON is meant to be a template that you can modify. You’ll see two “a” tags at the beginning of the JSON with the classes “tablinks1 active” and “tablinks2”. These are the tabs that will appear. You can modify the txtContent attribute of these two elements with the text that you want to display for you tabs:

  "elmType": "a",
            "attributes": {
              "class": "tablinks1 active"
            },
            "style": {
              "line-height": "1.5em",
              "margin": "8px 0",
              "font-size": "1.2em",
              "font-weigth": "bold",
              "padding-left": "18px",
              "padding-right": "10px"
            },
            "txtContent": "Product Details"
        },
        {
            "elmType": "a",
            "attributes": {
              "class": "tablinks2"
            },
            "style": {
              "line-height": "1.5em",
              "margin": "8px 0",
              "font-size": "1.2em",
              "font-weigth": "bold",
              "padding-left": "18px",
              "padding-right": "10px"
            },
            "txtContent": "Approval Details"
        }

Below that is where you’ll put the content you want to show in the individual tabs. You’ll see in the code that there is two parent “DIVs” with the classes “tabcontent1” and “tabcontent2”. These are the divs which visibility will be toggled when you click the associated tabs. Inside each of these divs is a Child element that contains several different DIVS which pull in content from the list. Just replace that with whatever fields you want to show.

Putting it all Together

Now that the JavaScript and Formatting are ready it’s time to put it all together. The first step is to add a new Modern SharePoint Page. Click the + Button and add in the Modern Script Editor Web Part and the List Web Part pointing to your list with the formatting in it.

On the Script Editor Web Part, click “Edit Script” and paste in the JavaScript code you copied above. Save your page and you now have clickable tabs!

Here’s the formatting in action:

I hope this gets the gears going in your mind on ways that you can combine JavaScript with SharePoint List Formatting!