Have you experienced this problem?
- You want to save some data to remove a manual process
- You save the data into a Microsoft 365 List or a SharePoint list (same thing but one looks nicer and is more portable)
- The data you want to capture and store has some parts that are made up of a paragraph or maybe a bit of free text
- When you look at your list, each row is half the size of the screen so you cant scan it quickly and easily
You end up scrolling for ages to find the row you are looking for and some rows take up the whole screen.
One column of text with large rows containing a sea of text is overwhelming your eyes and it stops you using the list as you intended.
It's distracting and make people feel like the list is a mess rather than a well organised set of data that will help streamline a manual process.
There's a really easy solution to this. You don't need to code or be super advanced to exploit it either.
Choose the column in your list where you have lots of text
I've used a list of submissions for our upcoming Intranet Insights 2024 event (register to attend for free). In it, the biography for a session is usually quite a lot of text.
So I can only scan one or 2 submissions time unless I have a large screen or stretch the column width as far as I dare.
The Answer : Apply Custom Formatting to the Column Using JSON
I prefer to scan titles and then if I want to dig deeper, open up the text. Thankfully with help from a Collab365 Academy member (James Williams thank you!), a little guidance from AI and a few clicks, it's super simple.
- Open the Column Formatting Pane for the Column containing your sea of text:
- Click the column heading.
- Select Column settings from the menu.
- Choose Format this column.
- Enter the JSON Format:
- Open Advanced formatting via the link at the bottom
- In the pane, paste your desired column formatting JSON.
- To preview the formatting, click Preview.
- To save your changes, click Save.
Here's how mine looks after adding this formatting
List popout
Below is the JSON I used. You only need to replace the Abstract column with your column name. You can customize this further based on your specific requirements:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"txtContent": "=if([$Abstract] == '', '', 'Read More...')",
"customCardProps": {
"openOnEvent": "click",
"isBeakVisible": true,
"directionalHint": "bottomCenter",
"formatter": {
"elmType": "div",
"style": {
"padding": "10px",
"maxWidth": "200px"
},
"children": [
{
"elmType": "div",
"txtContent": "[$Abstract]",
"style": {
"padding": "10px"
}
}
]
}
},
"attributes": {
"class": "ms-fontColor-themePrimary"
},
"style": {
"cursor": "pointer"
}
}
Pro Tip
If you are new to using JSON or maybe less confident in creating the right syntax like I was, go ask AI.
Here's an example prompt that I used to get to this position. I received not only step by step instructions but also the correct JSON. Feel free to use it for inspiration or maybe when you get answer to a question and need a little more help.
Im looking to change the way my column of text displays where there is a lot of text in a row. I have been looking into JSON but have been given this advice on how to achieve a pop out box on top of a short piece of text. like a read more pop out. Can you give me step by step instructions on how to implement this for a SharePoint list column.
Advice given: You can do this with JSON formatting using customCardProps and openOnEvent"
Hope you find this useful. If you do experiment with it, pop on over to the Academy and let me know how you adapted the JSON. I'm a lifelong learner and enjoy seeing what others to to enhance their SharePoint experience.