none
Why highlighted items not showing in search? [Javascript] RRS feed

  • Question

  • Hello Everyone !

           

    I have a Javascript code that highlights my results on a specific status. The script works fine, but the problem when i search for an invoice id the color of the highlighted item disappear in search view.

    So what should i add to the code to enable it in search view ?

    This is my code:

     <script type="text/javascript">
         SPClientTemplates.TemplateManager.RegisterTemplateOverrides({   
          OnPostRender: function statusFieldContext(ctx) {
            var rows = ctx.ListData.Row;
    var color= 
    "#FFFFFF";
            for (var i=0;i<rows.length;i++)
            {
              var isApproved = rows[i]["Status"] == "Approved";
              var isPending = rows[i]["Status"] == "Pending";
              var isRejected = rows[i]["Status"] == "Rejected";
              var isOpen = rows[i]["Status"] == "Open";
              if (isApproved)
              {
                color = "#ada";
              }
    else if (isPending){
    color = "DarkOrange";
              }
              else if (isRejected){
                  color = "#FF7474";
              }
              else if (isOpen){
                    color = "#AEF9F8";
              }
    
              var rowElementId = GenerateIIDForListItem(ctx, rows[i]);
              var tr = document.getElementById(rowElementId);
       if(tr != null){
    tr.style.backgroundColor = color;
      }   
            }
          }
         });
        </script>


    Take a look on these 2 pictures:

      [1]: https://i.stack.imgur.com/YPCzp.png  -- Before searching
      [2]: https://i.stack.imgur.com/HIxmg.png -- After searching

    Thank you !

                               
    • Edited by SynthBZ Sunday, September 15, 2019 12:01 PM
    Sunday, September 15, 2019 12:00 PM

Answers

  • Hi,

    Please modify the code as below, and you can also check if the code by your first post works.

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
    (function () {
       var overrideCtx = {};
       overrideCtx.OnPostRender = dataTableOnPostRender;
       SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
    })();
    function dataTableOnPostRender(){
    	$(document).ready(function () {
    		var fieldIndex=0;		 
    		$(".ms-listviewtable tr th").each(function(i){ 
    			if($(this).find("a").text()=="Status"){
    				fieldIndex=i;
    			}		
    		});
    		$("table.ms-listviewtable>tbody>tr").each(function(){
    			var status=$(this).children("td").eq(fieldIndex).text();
    			if(status=="Approved"){
    				$(this).css("background","#ada");
    			}
    			if(status=="Pending"){
    				$(this).css("background","DarkOrange");
    			}
    			if(status=="Rejected"){
    				$(this).css("background","#FF7474");
    			}
    			if(status=="Open"){
    				$(this).css("background","#AEF9F8");
    			}			
    	    });
        });
    }
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by SynthBZ Friday, September 20, 2019 9:08 AM
    Friday, September 20, 2019 8:40 AM
    Moderator

All replies

  • I have tried your code and it works fine on my list even before and after searching. If you have applied jslink BEFORE adding search box (enabling search box on list view), then I would advice you to remove jslink and save, refresh (ctrl+r) the page and the edit and add jslink again (search box should be present). Also, just remove the script tags. Not needed in a js file.

    If that does not help then try the code in jslnk file as given in this article.

    Thanks,

    Harshal


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.


    • Edited by HarshalGite Monday, September 16, 2019 6:43 AM
    Sunday, September 15, 2019 6:32 PM
  • Hi,

    Please add the code above into a script editor web part in list view page.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, September 16, 2019 6:32 AM
    Moderator
  • I already tried two different steps adding the code into a script editor and JSLink. But after searching for the item the color disappear, i have another script keep showing the color before and after search but it only highlight the column not the row.

    Inside the other script there is 2 different functions this one is the first before using the other:
    (function () {
        var statusFieldContext = {}; 
        statusFieldContext.Templates = {}; 
        statusFieldContext.Templates.Fields = { 
            // Apply the new rendering for Priority field on List View 
            "Status": { "View": statusFieldTemplate } 
        }; 
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFieldContext); 
    })(); 
    
    // This function provides the rendering logic for list view 
    function statusFieldTemplate(ctx) {
        var status = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; 

    Tuesday, September 17, 2019 10:13 AM
  • Hi,

    Please add the code below into script editor web part in list view page to check if it works.

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
    (function () {
       var overrideCtx = {};
       overrideCtx.OnPostRender = dataTableOnPostRender;
       SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
    })();
    function dataTableOnPostRender(){
    	$(document).ready(function () {  
                $("table.ms-listviewtable>tbody>tr").each(function(){
    			if($(this).text().indexOf("Approved")!=-1){
    				$(this).css("background","#ada");
    			}
    			if($(this).text().indexOf("Pending")!=-1){
    				$(this).css("background","DarkOrange");
    			}
    			if($(this).text().indexOf("Rejected")!=-1){
    				$(this).css("background","#FF7474");
    			}
    			if($(this).text().indexOf("Open")!=-1){
    				$(this).css("background","#AEF9F8");
    			}			
    	    });
        });
    }
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.


    Wednesday, September 18, 2019 10:04 AM
    Moderator
  • Hello Dennis !

    I tried to add this code into script editor but nothing happens all items remain with white color, and i check my console i didn't find any error. Maybe we should include my Status column in the code.

    Thursday, September 19, 2019 7:09 AM
  • Hi,

    Please go to site features and check if the Minimal Download Strategy feature is active. If this feature active, please deactivate this feature and run the code again to check if it works.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Thursday, September 19, 2019 7:19 AM
    Moderator
  • Hello Dennis,

    I deactivate this feature and i paste your script into editor and it works but the color always remain "CYAN" even if my status is approved maybe because i have different columns that contain different status values ? so i think we should specify which column to take the right action. Also if i find an item by id no results in the search if i find it by name i get the result with the color.

    Thank you!

    Friday, September 20, 2019 8:13 AM
  • Please update the question with the code you have uploaded. Will test it on my end.

    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    Friday, September 20, 2019 8:40 AM
  • Hi,

    Please modify the code as below, and you can also check if the code by your first post works.

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
    (function () {
       var overrideCtx = {};
       overrideCtx.OnPostRender = dataTableOnPostRender;
       SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
    })();
    function dataTableOnPostRender(){
    	$(document).ready(function () {
    		var fieldIndex=0;		 
    		$(".ms-listviewtable tr th").each(function(i){ 
    			if($(this).find("a").text()=="Status"){
    				fieldIndex=i;
    			}		
    		});
    		$("table.ms-listviewtable>tbody>tr").each(function(){
    			var status=$(this).children("td").eq(fieldIndex).text();
    			if(status=="Approved"){
    				$(this).css("background","#ada");
    			}
    			if(status=="Pending"){
    				$(this).css("background","DarkOrange");
    			}
    			if(status=="Rejected"){
    				$(this).css("background","#FF7474");
    			}
    			if(status=="Open"){
    				$(this).css("background","#AEF9F8");
    			}			
    	    });
        });
    }
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by SynthBZ Friday, September 20, 2019 9:08 AM
    Friday, September 20, 2019 8:40 AM
    Moderator
  • Thank you very much Dennis now it works !!
    Friday, September 20, 2019 9:08 AM