How to split a field value in SharePoint All Items list view

Question

I have a SharePoint 2013 list that has a field named ProjectCode which contains multiple values separated by ; . Now in the all items list view , I want to split the value at ; and add a break line instead of ;.

As of now I have the values as ProjectCode1 ; ProjectCode2

But I need to display it as :

ProjectCode1
ProjectCode2

Can somebody help?

Answer 1

I have tested it out and was able to do it using CSR and JS Link. Save the below code to say:projectCode.js and upload it to site assets and then refer it in the JS Link of the list view :

  (function () {
var overrideCurrentContext = {};
overrideCurrentContext.Templates = {};
overrideCurrentContext.Templates.Fields = {
    'ProjectCode': { 'View': ProjectCode }
};
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCurrentContext);

function ProjectCode(ctx) { 
  var modifiedProjectCode =ctx.CurrentItem.ProjectCode.replace(";", "<br/>");
  return   modifiedProjectCode
} 
})();

You can remove the alert and debugger after testing it out. See the below output Before :

Steps to add JS Link :

• Save the below code to projectCode.js and upload to site assets of site collection/subsite

• Go to the list view and go to the edit page by appending "toolpaneview=2". Edit the webpart and open the 'miscellaneous' section.

• In the JSLink text box refer the JS file. If you have uploaded to the site collection's site assets, use ~sitecollection/siteassets/projectcode.js . If you have uploaded it to subsite's site assets use ~site/siteassets/projectcode.js

Answer 2

You can do it using CSR as well as using javascript. Here i'm giving simple and easy javascript solution.

Working Javascript solution:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
    $("table[summary='YourListTitle'] td:nth-child(4)").each(function () {
        var choices = $(this).html();
        choices = choices.replace(/,/g, "<br/>");
        $(this).html(choices);
    });
});

</script>

1. Add script/content editor webpart on page and add above script.
2. Change summary attribute with your list title & change child number with TD number which contains your column. (Specify list title same as showing on list view page)

Identify exact TD of your column:

In your list, if check-boxes and title(with edit menu) are coming before your choice column then add two in your column position number. For example If your column position is 2 then its TD number will be 4. see below screenshot. There are only 2 fields in my list view but my "choices" field contains in 4th TD. So check exact TD position and mention it in script. below is working example on my test site.

Note: This solution depends upon position of TD contains column in list view. if you change column position in view then you have to changes TD position in script.

Answer 3

You can try CSR concept. It will be applied to the List View Web Part, so you need to following script in all the places where you are using List View Web Part (if you are) otherwise, just follow the below steps.

1. Open the List All Items view or the desired view.
2. Now click on gear icon and select Edit Page.
3. Now the page will be on edit mode, so you can select the list view web part and bring it to edit mode as well by using Edit Web Part.
4. Now expand the Miscellaneous section and scroll to bottom of that section.
5. The last property will be JS Link. Put the reference to JS file (will generate in a moment) in this property. Kindly note, you cannot put relative site collection/sub site url here. If you host JS file in root web then ~siteCollection/doc_Lib_name/path_to_js_file.js if it is a sub site use ~site/doc_lib_name/path_to_js_file.js.
6. Save the web part property, and finally save the page. That's it, you are done here.

Code for JS File

Following will be code you need to put in JS file and save it to document library before performing above steps. I'll recommend you to use Site Assets library but its completely your choice which document library you pick.

    var FillCtx = {};
    FillCtx.Templates = {};
    FillCtx.Templates.Fields = {'ProjectCode':{'View': fillStatus}}

    function fillStatus(ctx){
        var html ="";
        var fieldVal = ctx.CurrentItem['ProjectCode'];
        var projectCodes =[];

        if(fieldVal.indexOf(';') > 0){
            projectCodes = fieldVal.split(';');
        }else{
            projectCodes.push(fieldVal);
        }

        for(var i = 0; i < projectCodes.length; i++){
            html += projectCodes[i] + "<br/>";
        }

        return html;
    }

    ExecuteOrDelayUntilScriptLoaded(SPClientTemplates.TemplateManager.RegisterTemplateOverrides(FillCtx), 'clienttemplates.js');

Note: Incase if your field internal name is not ProjectCode, replace the ProjectCode keyword used in two places with the internal name.

Answer 4

Interesting. I had to use both the answers in 1 and 2 above for it to work with SP Online. Possibly because some js files I've used for altering formats must be posted in [master site]/_catalogs/masterpage/Forms/AllItems.aspx and uploaded as a Javascript Display Template with a specified Target Type (view, form, etc.); Standalone (Override); and Target Scope (form, View/List url) in order to work correctly (see: https://code.msdn.microsoft.com/office/Client-side-rendering-code-b2eedf92/view/Discussions/3 peterstilgoe's comments). Also had to change from "," to ";" in answer 2 - and add additional functions for 6th, 7th, and 8th nth-child. But very helpful: searched high and low for a way to split multi values in a List/View and this seemed to be the only answer for SPO. A shame that MS doesn't address this natively somehow.