1

Hi I added some new columns to a library and added those to content type. When user goes to old item in library and clicks it, on display form it is displaying all the new fields which doesn't contain any data. I would like to check whether these new columns contain data, if they contain data then i would like to display them other wise i would like to hide them . All these new columns are Date columns. I would like to use jquery to do this.

Improve this question

2 Answers 2

Reset to default
2

On a display form, you'll find a lot of extra data if you try to pull the values. An empty value isn't really empty either, sometimes there's a non breaking space holding the TD open. I tend to do something like:

var thisValue= $("h3:contains('THEDISPLAYNAME')").parents('tr:first').find('td').eq(1).text().trim();
// check for non breaking space which is same as being empty.
 if(thisValue.charCodeAt(0) != 160) {
   $("h3:contains('THEDISPLAYNAME')").parents('tr:first').show();
 } else {
  // this is a truly empty value.
  $("h3:contains('THEDISPLAYNAME')").parents('tr:first').hide();
}
Improve this answer
0

No need for a 90 KB jQuery Library and slow jQuery contains selectors.

Since IE9 you can do it with the vanilla JavaScript TreeWalker API
https://msdn.microsoft.com/en-us/library/ff974360(v=vs.85).aspx

The TreeWalker extracts all comments from the form, then loops all comments and sets the background of empty INPUT / TEXTAREA fields (you know how to do display:none)

var formCSI = new function (form) {
    function getComments(element) {
        function acceptNode() {     // IE *requires* this argument where other browsers don't.
            return NodeFilter.FILTER_ACCEPT;
        }
        var safeFilter = acceptNode;// IE *requires* this argument where other browsers don't.
        safeFilter.acceptNode = acceptNode;
        return document.createTreeWalker(element, NodeFilter.SHOW_COMMENT, safeFilter, false);
    }
    var tree = getComments(form);                                       // TreeWalker API is standard since IE9
    var comment;
    while (comment = tree.nextNode()) {                                 // loop all found <!-- comments -->
        eval(comment.nodeValue.replace(/ Field/g, ';var CSI_') + ';');  // convert comment to vars
        //eval created 3 local scoped variables
        console.info(CSI_InternalName, CSI_Type, CSI_Name);

        var TD = comment.parentNode;                                    // column with input field
        var TR = comment;
        while (TR.tagName !== 'TR') TR = TR.parentNode;                 // find parent TR row
        this[CSI_InternalName] = TR;                                    // store as formCSI.[internalName]
        var entry = TD.querySelector("[id*=" + CSI_InternalName + "]"); // find the data element
        var tag = entry.tagName;
        var value = entry.value;
        console.log(tag, value);

        if (tag === 'INPUT' || tag === 'TEXTAREA') {                    // only text entry fieds
            if (value === undefined || value==='') TR.style.background='pink';   // hide if empty
        }
    }
    return this;//return formCSI as object
}(document.querySelector('.ms-formtable'));                             // IIFE execute function immediatly

//formCSI now is an object referencing all Form Row TR elements
formCSI.Title.style.background = 'pink';   // style whole TR row
formCSI.AssignedTo.style.display = 'none'; // set to 'table-row' to show again

console.log(formCSI);

Also used in:

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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