Pt. 1 Fixing Multi-Choice Column
Pt. 2 Changing Grouped By Views

Pt. 1 Fixing Multi-Choice Column

We use jQuery across SharePoint to make a lot of UI and UX corrections. One of our most common UI corrections is for displaying choice column values in lists views that are multi-select. If you have list with a choice column and allow users to multi-select more than one option it will get displayed in the list view as: [choice1],[choice2]:

This is great for parsing data but our end users hate it and I agree that from an end user standpoint you’re expecting to see choice1 and choice 2 horizontally displayed without the “,” delimiter.

There is a simple solution for this:

As I mention this is easy to parse, so knowing the column number of the list view and the delimiter for display, we can iterate through the list view and replace the html with the choices delimited by a <br> tag. This will display the choices horizontally as our users expect and can be abstracted into a global javascript function that can be called across your site collection.

Here, we need to know the column number and in the above the choice is the fourth cell in each row of the table or the fourth column. (The check and ellipsis are cells or columns of their own). The delimiter in this case is a “,” , so we want to find all instances of the “,” in the html. If you include a string “,” here it will only match the first instance. The regular expression /,/g will find all matches. Finally we want to replace with a <br> tag and push each choice to the next line. Knowing that we iterate through each tr and find the column number and get the html. Then we replace all instances of the delimiter with the <br> tag and finally set the html to our new variable to get the below:

This is best abstracted and called as a global function whenever you need it. Also note that other columns types will delimit by other delimiters like “;”.