Overwrite sp.ui.listsearchbox.js to fix the SharePoint 2013 WAG issue

I conducted a WAG testing in SharePoint 2013 site using Google Chrome extension http://wave.webaim.org/extension/. The SharePoint site has some WAG issues and most of them are related to missing "Alt" attribute in the out of box image icon which created by SharePoint itself.

Most of them can be resolved by using jQuery to update the icon's HTML code directly. But I found one issue is exceptional that the inline search box icon within the List view document library WebPart can't be fixed by updating its HTML code directly. 

Bellow is the screenshot and icon's HTML code.



After I research the SharePoint Out Of box JavaScript, and I found out the "sp.ui.listsearchbox.js" composing the HTML code for the List view search box. 

"
  $1C_3: function(c) {
        var a = "<div id='{0}' class='ms-InlineSearch-Outline-Baseline ms-InlineSearch-Outline-Empty'><input id='{1}' title='{2}' class='ms-core-form-helper ms-InlineSearch-SearchBox-Baseline ms-InlineSearch-SearchBox-Empty' type='text' value='{3}' maxlength='2048'/><span id='{4}' class='{5}'><img id='{6}' class='{7}' src='{8}' title='{9}'/></span></div><div id='{10}' class='ms-InlineSearch-SearchProgress'><img src='{11}' title='{12}' style='vertical-align:middle;'/></div>"
          , b = String.format(a, SP.Utilities.HttpUtility.htmlEncode(this.get_$10_3()), SP.Utilities.HttpUtility.htmlEncode(this.get_$11_3()), SP.Utilities.HttpUtility.htmlEncode(this.$N_3), SP.Utilities.HttpUtility.htmlEncode(this.get_$5_3()), SP.Utilities.HttpUtility.htmlEncode(this.get_$15_3()), "ms-inlineSearch-searchImgSpanBase ms-inlineSearch-searchImgSpanStandard", SP.Utilities.HttpUtility.htmlEncode(this.get_$14_3()), "ms-inlineSearch-searchImg", GetThemedImageUrl("spcommon.png"), SP.Utilities.HttpUtility.htmlEncode(this.$R_3), SP.Utilities.HttpUtility.htmlEncode(this.get_$16_3()), SP.Utilities.HttpUtility.htmlEncode(this.$1_3.imagesPath + "loadingcirclests16.gif"), SP.Utilities.HttpUtility.htmlEncode(this.$17_3));
        c.innerHTML = b
    },
 "
At the end, I resolved above issue by overwriting the OOTB JavaScript as below function. It works fine to add "alt" attribute to the image icon's HTML code and the Google WAG extension reported no such error again!
//Overwrite List search box image's alt attribute - for WAG issue
ExecuteOrDelayUntilScriptLoaded(UpdateListSearchBox, 'sp.ui.listsearchbox.js');
function UpdateListSearchBox(){
Microsoft.SharePoint.Portal.ListSearchBox.prototype.$1C_3=function(c) {
   var a = "<div id='{0}' class='ms-InlineSearch-Outline-Baseline ms-InlineSearch-Outline-Empty'><input id='{1}' title='{2}' class='ms-core-form-helper ms-InlineSearch-SearchBox-Baseline ms-InlineSearch-SearchBox-Empty' type='text' value='{3}' maxlength='2048'/><span id='{4}' class='{5}'><img id='{6}' class='{7}' src='{8}' title='{9}' alt='{9}' /></span></div><div id='{10}' class='ms-InlineSearch-SearchProgress'><img src='{11}' title='{12}' style='vertical-align:middle;' alt='{12}' /></div>"
          , b = String.format(a, SP.Utilities.HttpUtility.htmlEncode(this.get_$10_3()), SP.Utilities.HttpUtility.htmlEncode(this.get_$11_3()), SP.Utilities.HttpUtility.htmlEncode(this.$N_3), SP.Utilities.HttpUtility.htmlEncode(this.get_$5_3()), SP.Utilities.HttpUtility.htmlEncode(this.get_$15_3()), "ms-inlineSearch-searchImgSpanBase ms-inlineSearch-searchImgSpanStandard", SP.Utilities.HttpUtility.htmlEncode(this.get_$14_3()), "ms-inlineSearch-searchImg", GetThemedImageUrl("spcommon.png"), SP.Utilities.HttpUtility.htmlEncode(this.$R_3), SP.Utilities.HttpUtility.htmlEncode(this.get_$16_3()), SP.Utilities.HttpUtility.htmlEncode(this.$1_3.imagesPath + "loadingcirclests16.gif"), SP.Utilities.HttpUtility.htmlEncode(this.$17_3));
        c.innerHTML = b
    }
}
This post is part of my project "Implement the Business Intelligence On Premises SharePoint 2013 Portal".
If you want to know more my experiences from the guide of above project, please sign up in here.

Comments

Post a Comment

Popular posts from this blog

Top JavaScript courses helping you develop SPFx webPart with ReactJS and AngularJS

Image
As SharePoint 2016 is launched and the SharePoint Framework was announced on 4th of May,  for a SharePoint developer, these are the technologies that you should learn in the next months in order to be prepared to the new framework. They are AngularJS, ReactJS, Node.js and TypeScript. I shared those best online courses from "Udemy.com" in here. Learn anytime, anywhere, on most devices. Each course comes with a 30-day money-back guarantee. Course : Sharepoint: SPFx Development Model - It's providing clear instructions on this new SPFx framework. It delivers an example of full development workflow using Knockout.js JavaScript framework and PnP helper code. Instructor: OLEG RUMIANCEV is a full-time SharePoint ninja currently living in Biddulph, United Kingdom. His interests range from Microsoft and SharePoint to AI, and inspirational TED talks. ReactJS - React is straight JavaScript and more smaller compare with Angular JS. It's emerging in an ecosystem of...
Read more

Effective LLM Prompting skills

Apply best practices for crafting effective prompts to LLM are key for effective prompting to LLM . Here are the best practices. Role assignment: specifying a role for the LLM lead to a more helpful response. You can even a pply multiple roles to LLM Specificity and context: by providing context about your role and the situation and highlighting your specific concerns, you're guiding the LLM to provide specific and relevant information. Feedback to LLM:  You can effectively analyze your prompt based on the LLM response, and identify weaknesses, and points out the targeted improvements for better prompt. For example, you are a software developer and want LLM to review and debug the code errors. Your prompt can be: You are a senior Python developer and tester, I'm a junior Python developer working on a program to calculate daily interest rates. I'm encountering an error when running my code. Could you help me debug it? Here's a snippet of the code: "..."', a...
Read more

Enable the Microsoft Power BI report file type (.pbix) in SharePoint Search

Image
By default, the Microsoft Power BI report file (.pbix) is not in the list of file type in SharePoint 2013 search configuration in Central Admin, and so you wouldn't open the Power BI file directly by clicking the link from the search result page. However, it's easy to add this file type by following configuration. Open “Central Admin” site, and then go to "Manage service applications”->”Search Service Application XX” (use the actual name of the “Search Service Application” in your site). Click on the “File Type” in left side navigation. Click the New File Type button and type PBIX (no period needed) in the File extension box and click OK. Restart the Search Service: Go to local “services”, stop the SharePoint Server Search service and start it again. Reset Your Index: Back on the Search Administration page within Central Administration you will want to click on the Index Reset link under Crawling on the left side menu. Press the Reset Now button. Rem...
Read more