Revisions to New item entry form: how to hide 2 fields with a code in SP designer NewForm.aspx

replaced http://sharepoint.stackexchange.com/ with https://sharepoint.stackexchange.com/

Source Link

edited Apr 13, 2017 at 12:41

Community Bot

1

jQuery solutions are so 2016... since IE9 everything can be done as easily with JavaScript
When you do not have to support pre IE9 browsers you can use vanilla JavaScript
You have to copy/paste 5 more lines of code compared to the jQuery approach,
but you do not have to worry about loading a 90KB jQuery library.

This only works on Classic Forms where the layout is a TABLE

Once the page is created you execute JavaScript to hide the TR displaying the Field

Find Field by definition in (green) 
'walk up the DOM' to its TR
Hide that TR

The native JavaScript TreeWalker API/class/Object can get the Comments node with one call.
(IE9 was the last Browser to finally support this)

One eval statement can turn that comment into 3 JavaScript variables.

Solution

So the only native JavaScript you have to use
(Paste into the NewForm.aspx or in a Script OR Content Editor WebPart below your Form, so it executes after the Form is displayed)

is:

var formCSI = 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);
  while (node=tree.nextNode()) {//loop all found <!-- comments -->
    eval(node.nodeValue.replace(/ Field/g, ';var CSI_') + ';');//convert comment to vars
    console.info(CSI_InternalName,CSI_Type,CSI_Name);
    var TR=node;while (TR.tagName !== 'TR') TR = TR.parentNode;//find parent TR row
    this[CSI_InternalName]=TR;// store TR as formCSI.[internalName] eg. formCSI.Title
  }
  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';
formCSI.AssignedTo.style.display='none';// 'table-row' to show again

This turns every Field in the Form into a JavaScript formCSI Object which you can use to color, hide, whatever you want to do with the TR rows

Also used in:

How to place "Description" field in List under the field name itself?How to place "Description" field in List under the field name itself?

jQuery solutions are so 2016... since IE9 everything can be done as easily with JavaScript
When you do not have to support pre IE9 browsers you can use vanilla JavaScript
You have to copy/paste 5 more lines of code compared to the jQuery approach,
but you do not have to worry about loading a 90KB jQuery library.

This only works on Classic Forms where the layout is a TABLE

Once the page is created you execute JavaScript to hide the TR displaying the Field

Find Field by definition in (green) 
'walk up the DOM' to its TR
Hide that TR

The native JavaScript TreeWalker API/class/Object can get the Comments node with one call.
(IE9 was the last Browser to finally support this)

One eval statement can turn that comment into 3 JavaScript variables.

Solution

So the only native JavaScript you have to use
(Paste into the NewForm.aspx or in a Script OR Content Editor WebPart below your Form, so it executes after the Form is displayed)

is:

var formCSI = 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);
  while (node=tree.nextNode()) {//loop all found <!-- comments -->
    eval(node.nodeValue.replace(/ Field/g, ';var CSI_') + ';');//convert comment to vars
    console.info(CSI_InternalName,CSI_Type,CSI_Name);
    var TR=node;while (TR.tagName !== 'TR') TR = TR.parentNode;//find parent TR row
    this[CSI_InternalName]=TR;// store TR as formCSI.[internalName] eg. formCSI.Title
  }
  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';
formCSI.AssignedTo.style.display='none';// 'table-row' to show again

This turns every Field in the Form into a JavaScript formCSI Object which you can use to color, hide, whatever you want to do with the TR rows

Also used in:

How to place "Description" field in List under the field name itself?

jQuery solutions are so 2016... since IE9 everything can be done as easily with JavaScript
When you do not have to support pre IE9 browsers you can use vanilla JavaScript
You have to copy/paste 5 more lines of code compared to the jQuery approach,
but you do not have to worry about loading a 90KB jQuery library.

This only works on Classic Forms where the layout is a TABLE

Once the page is created you execute JavaScript to hide the TR displaying the Field

Find Field by definition in (green) 
'walk up the DOM' to its TR
Hide that TR

The native JavaScript TreeWalker API/class/Object can get the Comments node with one call.
(IE9 was the last Browser to finally support this)

One eval statement can turn that comment into 3 JavaScript variables.

Solution

So the only native JavaScript you have to use
(Paste into the NewForm.aspx or in a Script OR Content Editor WebPart below your Form, so it executes after the Form is displayed)

is:

var formCSI = 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);
  while (node=tree.nextNode()) {//loop all found <!-- comments -->
    eval(node.nodeValue.replace(/ Field/g, ';var CSI_') + ';');//convert comment to vars
    console.info(CSI_InternalName,CSI_Type,CSI_Name);
    var TR=node;while (TR.tagName !== 'TR') TR = TR.parentNode;//find parent TR row
    this[CSI_InternalName]=TR;// store TR as formCSI.[internalName] eg. formCSI.Title
  }
  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';
formCSI.AssignedTo.style.display='none';// 'table-row' to show again

This turns every Field in the Form into a JavaScript formCSI Object which you can use to color, hide, whatever you want to do with the TR rows

Also used in:

How to place "Description" field in List under the field name itself?

deleted 26 characters in body

Source Link

edited Apr 1, 2017 at 7:44

Danny '365CSI' Engelman

21.2k
7
36
79

jQuery solutions are so 2016...

Client Side Rendering (CSR) (since SharePoint 2013) is the programmers solution since IE9 everything can be done as easily with JavaScript
When you do not have to support pre IE9 browsers you can use vanilla JavaScript
You have to copy/paste 5 more lines of code compared to the jQuery approach,
but you do not have to worry about loading a 90KB jQuery library.

This only works on Classic Forms where the layout is a TABLE

Once the page is created you execute JavaScript to hide the TR displaying the Field

Find Field by definition in (green) 
'walk up the DOM' to its TR
Hide that TR

The native JavaScript TreeWalker API/class/Object can get the Comments node with one call.
(IE9 was the last Browser to finally support this)

One eval statement can turn that comment into 3 JavaScript variables.

Solution

So the only native JavaScript you have to use
(Paste into the NewForm.aspx or in a Script OR Content Editor WebPart below your Form, so it executes after the Form is displayed)

is:

var formCSI = 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);
  while (node=tree.nextNode()) {//loop all found <!-- comments -->
    eval(node.nodeValue.replace(/ Field/g, ';var CSI_') + ';');//convert comment to vars
    console.info(CSI_InternalName,CSI_Type,CSI_Name);
    var TR=node;while (TR.tagName !== 'TR') TR = TR.parentNode;//find parent TR row
    this[CSI_InternalName]=TR;// store TR as formCSI.[internalName] eg. formCSI.Title
  }
  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';
formCSI.AssignedTo.style.display='none';// 'table-row' to show again

This turns every Field in the Form into a JavaScript formCSI Object which you can use to color, hide, whatever you want to do with the TR rows

Also used in:

How to place "Description" field in List under the field name itself?

jQuery solutions are so 2016...

Client Side Rendering (CSR) (since SharePoint 2013) is the programmers solution
When you do not have to support pre IE9 browsers you can use vanilla JavaScript
You have to copy/paste 5 more lines of code compared to the jQuery approach,
but you do not have to worry about loading a 90KB jQuery library.

This only works on Classic Forms where the layout is a TABLE

Once the page is created you execute JavaScript to hide the TR displaying the Field

Find Field by definition in (green) 
'walk up the DOM' to its TR
Hide that TR

The native JavaScript TreeWalker API/class/Object can get the Comments node with one call.
(IE9 was the last Browser to finally support this)

One eval statement can turn that comment into 3 JavaScript variables.

Solution

So the only native JavaScript you have to use
(Paste into the NewForm.aspx or in a Script OR Content Editor WebPart below your Form, so it executes after the Form is displayed)

is:

var formCSI = 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);
  while (node=tree.nextNode()) {//loop all found <!-- comments -->
    eval(node.nodeValue.replace(/ Field/g, ';var CSI_') + ';');//convert comment to vars
    console.info(CSI_InternalName,CSI_Type,CSI_Name);
    var TR=node;while (TR.tagName !== 'TR') TR = TR.parentNode;//find parent TR row
    this[CSI_InternalName]=TR;// store TR as formCSI.[internalName] eg. formCSI.Title
  }
  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';
formCSI.AssignedTo.style.display='none';// 'table-row' to show again

This turns every Field in the Form into a JavaScript formCSI Object which you can use to color, hide, whatever you want to do with the TR rows

Also used in:

How to place "Description" field in List under the field name itself?

jQuery solutions are so 2016... since IE9 everything can be done as easily with JavaScript
When you do not have to support pre IE9 browsers you can use vanilla JavaScript
You have to copy/paste 5 more lines of code compared to the jQuery approach,
but you do not have to worry about loading a 90KB jQuery library.

This only works on Classic Forms where the layout is a TABLE

Once the page is created you execute JavaScript to hide the TR displaying the Field

Find Field by definition in (green) 
'walk up the DOM' to its TR
Hide that TR

The native JavaScript TreeWalker API/class/Object can get the Comments node with one call.
(IE9 was the last Browser to finally support this)

One eval statement can turn that comment into 3 JavaScript variables.

Solution

So the only native JavaScript you have to use
(Paste into the NewForm.aspx or in a Script OR Content Editor WebPart below your Form, so it executes after the Form is displayed)

is:

var formCSI = 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);
  while (node=tree.nextNode()) {//loop all found <!-- comments -->
    eval(node.nodeValue.replace(/ Field/g, ';var CSI_') + ';');//convert comment to vars
    console.info(CSI_InternalName,CSI_Type,CSI_Name);
    var TR=node;while (TR.tagName !== 'TR') TR = TR.parentNode;//find parent TR row
    this[CSI_InternalName]=TR;// store TR as formCSI.[internalName] eg. formCSI.Title
  }
  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';
formCSI.AssignedTo.style.display='none';// 'table-row' to show again

This turns every Field in the Form into a JavaScript formCSI Object which you can use to color, hide, whatever you want to do with the TR rows

Also used in:

How to place "Description" field in List under the field name itself?

added 382 characters in body

Source Link

edited Mar 29, 2017 at 9:50

Danny '365CSI' Engelman

21.2k
7
36
79

jQuery solutions are so 2016...
Client Side Rendering (CSR) (since SharePoint 2013) is the programmers solution
When you do not have to support pre IE9 browsers you can use vanilla JavaScript
You have to copy/paste 5 more lines of code compared to the jQuery approach,
but you do not have to worry about loading a 90KB jQuery library.

This only works on Classic Forms where the layout is a TABLE

Once the page is created you execute JavaScript to hide the TR displaying the Field

Find Field by definition in (green) 
'walk up the DOM' to its TR
Hide that TR

The native JavaScript TreeWalker API/class/Object can get the Comments node with one call.
(IE9 was the last Browser to finally support this)

One eval statement can turn that comment into 3 JavaScript variables.

Solution

So the only native JavaScript you have to use
(Paste into the NewForm.aspx or in a Script OR Content Editor WebPart below your Form, so it executes after the Form is displayed)

is:

var formCSI = function (form){ 

function getComments(element) {
    function acceptNode() {     // IE *requires* this argument where other browsers don't.
        return NodeFilter.FILTER_ACCEPT;
    }

    var tree=documentsafeFilter = acceptNode;// IE *requires* this argument where other browsers don't.
    safeFilter.acceptNode = acceptNode;
    return document.createTreeWalker(formelement, NodeFilter.SHOW_COMMENT, safeFilter, false);//standard
}

 since IE9var tree=getComments(form);
  while (node=tree.nextNode()) {//loop all found <!-- comments -->
    eval(node.nodeValue.replace(/ Field/g, ';var CSI_') + ';');//convert comment to vars
    console.info(CSI_InternalName,CSI_Type,CSI_Name);
    var TR=node;while (TR.tagName !== 'TR') TR = TR.parentNode;//find parent TR row
    this[CSI_InternalName]=TR;// store TR as formCSI.[internalName] eg. formCSI.Title
  }
  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';
formCSI.AssignedTo.style.display='none';// 'table-row' to show again

This turns every Field in the Form into a JavaScript formCSI Object which you can use to color, hide, whatever you want to do with the TR rows

Also used in:

How to place "Description" field in List under the field name itself?

jQuery solutions are so 2016...
Client Side Rendering (CSR) (since SharePoint 2013) is the programmers solution
When you do not have to support pre IE9 browsers you can use vanilla JavaScript
You have to copy/paste 5 more lines of code compared to the jQuery approach,
but you do not have to worry about loading a 90KB jQuery library.

This only works on Classic Forms where the layout is a TABLE

Once the page is created you execute JavaScript to hide the TR displaying the Field

Find Field by definition in (green) 
'walk up the DOM' to its TR
Hide that TR

The native JavaScript TreeWalker API/class/Object can get the Comments node with one call.
(IE9 was the last Browser to finally support this)

One eval statement can turn that comment into 3 JavaScript variables.

Solution

So the only native JavaScript you have to use
(Paste into the NewForm.aspx or in a Script OR Content Editor WebPart below your Form, so it executes after the Form is displayed)

is:

var formCSI = function (form){
  var tree=document.createTreeWalker(form,NodeFilter.SHOW_COMMENT);//standard since IE9
  while (node=tree.nextNode()) {//loop all found <!-- comments -->
    eval(node.nodeValue.replace(/ Field/g, ';var CSI_') + ';');//convert comment to vars
    console.info(CSI_InternalName,CSI_Type,CSI_Name);
    var TR=node;while (TR.tagName !== 'TR') TR = TR.parentNode;//find parent TR row
    this[CSI_InternalName]=TR;// store TR as formCSI.[internalName] eg. formCSI.Title
  }
  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';
formCSI.AssignedTo.style.display='none';// 'table-row' to show again

This turns every Field in the Form into a JavaScript formCSI Object which you can use to color, hide, whatever you want to do with the TR rows

Also used in:

How to place "Description" field in List under the field name itself?

jQuery solutions are so 2016...
Client Side Rendering (CSR) (since SharePoint 2013) is the programmers solution
When you do not have to support pre IE9 browsers you can use vanilla JavaScript
You have to copy/paste 5 more lines of code compared to the jQuery approach,
but you do not have to worry about loading a 90KB jQuery library.

This only works on Classic Forms where the layout is a TABLE

Once the page is created you execute JavaScript to hide the TR displaying the Field

Find Field by definition in (green) 
'walk up the DOM' to its TR
Hide that TR

The native JavaScript TreeWalker API/class/Object can get the Comments node with one call.
(IE9 was the last Browser to finally support this)

One eval statement can turn that comment into 3 JavaScript variables.

Solution

So the only native JavaScript you have to use
(Paste into the NewForm.aspx or in a Script OR Content Editor WebPart below your Form, so it executes after the Form is displayed)

is:

var formCSI = 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);
  while (node=tree.nextNode()) {//loop all found <!-- comments -->
    eval(node.nodeValue.replace(/ Field/g, ';var CSI_') + ';');//convert comment to vars
    console.info(CSI_InternalName,CSI_Type,CSI_Name);
    var TR=node;while (TR.tagName !== 'TR') TR = TR.parentNode;//find parent TR row
    this[CSI_InternalName]=TR;// store TR as formCSI.[internalName] eg. formCSI.Title
  }
  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';
formCSI.AssignedTo.style.display='none';// 'table-row' to show again

This turns every Field in the Form into a JavaScript formCSI Object which you can use to color, hide, whatever you want to do with the TR rows

Also used in:

How to place "Description" field in List under the field name itself?

added 31 characters in body

Source Link

edited Jan 6, 2017 at 11:58

Danny '365CSI' Engelman

21.2k
7
36
79

Loading

added 144 characters in body

Source Link

edited Jan 6, 2017 at 11:15

Danny '365CSI' Engelman

21.2k
7
36
79

Loading

Source Link

created Jan 6, 2017 at 10:54

Danny '365CSI' Engelman

21.2k
7
36
79

Loading

Stack Exchange Network

Return to Answer

Solution

Solution

Solution

Solution

Solution

Solution

Solution

Solution

Solution