Display formatting

[Ashwani Handa]

Can someone please share example on how to do below formatting for display of data

1. By default SharePoint puts commas in numeric field, how to display without commas
2. Ability to sort text field as numeric data. Not required if 1 gets done
3. Highlight records in different color based on recent changes
4. Wrap text fields with large content. SharePoint seems to have fixed width for pages and view becomes difficult to interpret if leave AS-IS
5. Use colors to reflect records with different status, like At-Risk or On-Track

[Alexander Bautz]

Hi,
1: The number format used follows your current locale number format and you cannot change this in SharePoint. If you just want to get rid of the comma when you edit the field in a form (New or Edit) you can use a script like this in your DFFS Custom JS to trim away commas: https://spjsblog.com/forums/topic/number-field-validation-to-use-dot-and-not-comma/

It will still show in the locale default format in the list view.

2: Do you want to sort this in a list view or in some custom code inside a form (DFFS Custom JS)?

3: In a list view or in DispForm / EditForm?

4: If this is in a modern list view you can try using something like this: https://techcommunity.microsoft.com/t5/sharepoint/sharepoint-online-modern-experience-multi-line-field-display/m-p/190968/highlight/true#M17305

5: Again, if this is a modern list view you can use this method: https://wonderlaura.com/2019/01/17/no-code-column-formatting-in-sharepoint-new/

Alexander

[Ashwani Handa]

2: Do you want to sort this in a list view or in some custom code inside a form (DFFS Custom JS)? List View, just for ease of copying and pasting multiple records from Excel. So sort in excel and copy paste to SP. Right now SP is rendering numbers as Text because that attribute is my Unique ID and Title in SP. Using the title for E-Mail alerts. BY default title is text and you can not change it to numeric

3: In a list view or in DispForm / EditForm?
In List View and even in Disp Form. For letting users know what has recently changed and needs attention. May be providing different colors based on time elapsed since action is required

[Alexander Bautz]

2: I see, there is nothing I can do about the number format in a list view, but you might be able to use the view-formatter in the modern list view. Here are some examples (not sure you find exactly what you are looking for): https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/view-formatting

3: I cannot help you with the list view, but I will post a solution for highlighting changed fields in DispForm or EditForm later this week – just check back in a few days to see if I have published it.

Alexander

[Ashwani Handa]

Is there any other Java Script code or solution for 4 and 5? Code I can embed with Web Part. I do not have a modern list as stated in above solutions

[Alexander Bautz]

I made a solution for #4 10 years ago: https://spjsblog.com/2010/02/21/multi-line-text-field-in-list-view-shorten-text-and-add-hovereffect-to-view-full-text/

#5 can be achieved by just searching for the text and highlighting the table cell like this:

setInterval(function(){
    jQuery(".ms-listviewtable td").not(".alreadyProcessed").each(function(i, td){
        if(td.cellIndex === 6){ // Limit to one column - find the index in the "Position from Left" column when you edit the view
            var val = jQuery(this).text();
            switch(val){
                case "Not started":
                    jQuery(td).addClass("alreadyProcessed").css({"background-color": "#c5c5c5", "color": "black"});
                break;
                case "In progress":
                    jQuery(td).addClass("alreadyProcessed").css({"background-color": "orange", "color": "black"});
                break;
                case "Completed":
                    jQuery(td).addClass("alreadyProcessed").css({"background-color": "green", "color": "white"});
                break;
            }
        }
    });
},1000);

Please note that this runs every 1000 milliseconds and it will take some time / resources when it is run like this.

Alexander

[Author]

Posts