Overriding JS for sharepoint - does this look correct?

[Noppy]

Hi,
so i am trying to follow this guide https://www.c5insight.com/Resources/Blog/tabid/88/entryid/653/how-you-make-sharepoint-announcements-grab-attention-easily-using-csr.aspx which is a method of adjusting the look of sharepoint lists using js to override the defaults (seems a stupid idea to me but that’s Microsoft for you).

I copied the JS from the webpage but when i look at it in dreamweaver it shows half of it commented out and highlights a line as having an error which is probably to do with parts being commented out and i also don’t recognise the beginning tags. Does this look correct? i am not very good with JS so it’s a steep learning curve at the moment. any help appreciated

[sourcecode language='javascript' padlinenumbers='true' htmlscript='false' gutter='true'] 
(function () { document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
<\/script>'); 
document.write('<script src="/Style%20Library/CriticalNews/js/homepage_message.js"><\/script>'); 
document.write('<link rel="stylesheet" type="text/css" href="/Style%20Library/CriticalNews/css/homepage_message.css" />');
 // Load our custom CSS
 /*
var cssId = 'myCss'; 
// you could encode the css path itself to generate id.. 
if (!document.getElementById(cssId)) { var head = document.getElementsByTagName('head')[0]; 
var link = document.createElement('link'); 
link.id = cssId; link.rel = 'stylesheet'; link.type = 'text/css'; 
link.href = '/Style Library/CriticalNews/css/homepage_message.css'; 
link.media = 'all'; head.appendChild(link); }*/
 /* * Initialize the variable that store the overrides objects. */ 
var overrideCtx = {}; overrideCtx.Templates = {}; 
// Assign functions or plain html strings to the templateset objects: 
// header, footer and item.
 overrideCtx.Templates.Header = "<div class='center'>";
 overrideCtx.Templates.Footer = "</div>";
 // This template is assigned to the CustomItem function. overrideCtx.Templates.Item = CustomItem; 
//overrideCtx.BaseViewID = 1;
 overrideCtx.ListTemplateType = 104; 
// Register the template overrides. SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx); })();
 /* * This function builds the output for the item template. * Uses the Context object to access announcement data. */ 
function CustomItem(ctx) { // Build a listitem entry for every announcement in the list. 
/* <div class="notification fail canhide"><span>ERROR!</span> This is an error message.</div>
 <div class="notification info canhide"><span>INFORMATION:</span> This is an information.</div> 
<div class="notification warning canhide"><span>WARNING!</span> This is a warning message.</div> */ 
//var ret = "<li>This is a " + ctx.CurrentItem.MoreText + "</li>"; 
if (ctx.CurrentItem["MessageType"] == "Informational (blue)") { 
var ret = "<div class='notification info'>" + ctx.CurrentItem["Body"].replace("<p>","").replace("</p>","") + "</div>";
 } 
else if (ctx.CurrentItem["MessageType"] == "Warning (yellow)") { 
var ret = "<div class='notification warning'>" + ctx.CurrentItem["Body"].replace("<p>","").replace("</p>","") + "</div>"; 
} 
else if (ctx.CurrentItem["MessageType"] == "Critical (red)") { 
var ret = "<div class='notification fail'>" + ctx.CurrentItem["Body"].replace("<p>","").replace("</p>","") + "</div>"; } 
return ret;
 }
 [/source-code] 

[Paul_Wilkins]

Hi there, sorry for the delay. A wall of bad code tends to scare people.

The commended-out scripting can be deleted. That’s an older technique to load CSS, that you’ll find mentioned on sites like https://www.codesd.com/item/how-to-load-css-files-using-javascript.html that also mention the old-school technique.

Here’s what the code should look like:

(function () {
    document.write("<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'>;<\/script>;");
    document.write("<script src='/Style%20Library/CriticalNews/js/homepage_message.js'>;<\/script>;");
    document.write("<link rel='stylesheet' type='text/css' href='/Style%20Library/CriticalNews/css/homepage_message.css' />;");

    // Load our custom CSS
    /*var cssId = "myCss";   // you could encode the css path itself to generate id..
    if (!document.getElementById(cssId))
    {
        var head  = document.getElementsByTagName("head")[0];
        var link  = document.createElement("link");
        link.id   = cssId;
        link.rel  = "stylesheet";
        link.type = "text/css";
        link.href = "/Style Library/CriticalNews/css/homepage_message.css";
        link.media = "all";
        head.appendChild(link);
    }*/

    /*
     * Initialize the variable that store the overrides objects.
     */
    var overrideCtx = {};
    overrideCtx.Templates = {};

    //  Assign functions or plain html strings to the templateset objects:
    //  header, footer and item.
    overrideCtx.Templates.Header = "<div class='center'>;";
    overrideCtx.Templates.Footer = "</div>;";

    //  This template is assigned to the CustomItem function.
    overrideCtx.Templates.Item = CustomItem;
    //overrideCtx.BaseViewID = 1;
    overrideCtx.ListTemplateType = 104;

    //       Register the template overrides.
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

}());

/*
 * This function builds the output for the item template.
 * Uses the Context object to access announcement data.
 */
function CustomItem(ctx) {
    // Build a listitem entry for every announcement in the list.
    /*
    <div class="notification fail canhide">;<span>;ERROR!</span>; This is an error message.</div>;
    <div class="notification info canhide">;<span>;INFORMATION:</span>; This is an information.</div>;
    <div class="notification warning canhide">;<span>;WARNING!</span>; This is a warning message.</div>;
    */
    //var ret = "<li>;This is a " + ctx.CurrentItem.MoreText + "</li>;";
    var ret = "";
    if (ctx.CurrentItem.MessageType === "Informational (blue)") {
        ret = "<div class='notification info'>;" + ctx.CurrentItem.Body.replace("<p>;", "").replace("</p>;", "") + "</div>;";
    } else if (ctx.CurrentItem.MessageType === "Warning (yellow)") {
        ret = "<div class='notification warning'>;" + ctx.CurrentItem.Body.replace("<p>;", "").replace("</p>;", "") + "</div>;";
    } else if (ctx.CurrentItem.MessageType === "Critical (red)") {
        ret = "<div class='notification fail'>;" + ctx.CurrentItem.Body.replace("<p>;", "").replace("</p>;", "") + "</div>;";
    }
    return ret;
}

I’ve taken the liberty of running the code through JsBeautifier, and using JSLint to help me remove the most egregious problems with the code.

[Noppy]

thank you so much for spending the time doing that. I’ll give it a go and see how i get on.

much appreciated.

[Noppy]

ok so i’ve tried implementing that and nothing happened so i checked the links in the code and there is an error message of

<?xml version="1.0" encoding="utf-8"?><Error><Code>BlobNotFound</Code><Message>The specified blob does not exist. RequestId:e0a529b8-001e-002c-1e2c-5d518b000000 Time:2017-11-14T09:36:51.0420864Z</Message></Error>

I’ve tested all 3 links within the code and they all return ok. (my links are absolute in the final code i just removed my domain etc for displaying here). Any ideas what the BlobNotFound would refer to?

thanks

[Paul_Wilkins]

I’m away on holiday until next week, but I’ve found some time via tethering on my phone to help.

The following article says that your firewall might be responsible for that blob error.

The specified blob does not exist

Spaces or special characters in the file name might be responsible too.

SharePoint is something that I haven’t dealt with before, so hopefully that gives a few things to potentially investigate.

[Noppy]

thank you. I’ll investigate. Enjoy your holiday and don’t worry about this problem. Get some screen down time.

I’ve managed to get a rest api bit working so i am one step closer now just have to work out adding in the css.

thanks again