0

I work for the gov't and we sometimes have to lower our flag to half-staff (or half-mast for you Navy types). Our HQ wants to be able to normally display an image (jpeg) of the flag at fullstaff (image A) but on those days when it needs to be at halfstaff (image B) they want the graphic to switch automatically based on switching the choice column from FULL to HALF. Both images are the same size and in the same library and all on the same site collection. Is this most easily solved with JavaScript or a customized Webpart?

0

Use Jquery/Javascript to achieve the same. Render the images based on column values i.e.Half/Full

  $('#choicecolumn).click(function(){
    if($(this).attr("title")=="Full")
    {
        if(($(this).attr('checked')) == 'checked')
        {
            //show full image
        }

    }
    else if($(this).attr("title")=="Half")
    {
        if(($(this).attr('checked')) == 'checked'){
            //show half image   
        }
    }
}
    }
  • I'm a bit confused - am I supposed to replace your comments sections (//show full image) with actual reference to the flag image such as this: var fullFlag = "<img src='/sites/home/FlagStatusPicts/Flag-FullMast.jpg'/>" var halfFlag = "<img src='/sites/home/FlagStatusPicts/Flag-HalfMast.jpg'/>" – D. Schmidt Feb 2 '18 at 17:22
0

In case if solution is required in a list view. Suppose the list has two columns Staff (Full, Half) and Flag (Single line of text). A JSLink can display the image in the Flag column. The sample code is below.

(function () {
    var fieldCtx = {};

    fieldCtx.Templates = {};
    fieldCtx.Templates.Fields = {
        "Flag": 
        {
            "View": DisplayFlag 
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldCtx);
})();
var fullFlag = "<img src='/sites/lib/flag1.png'/>"
var halfFlag = "<img src='/sites/lib/flag2.png'/>"

function DisplayFlag(ctx) {
    return ctx.CurrentItem.Staff == 'Full' ? fullFlag : halfFlag;
}

Output:-

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.