Use JavaScript to hide/display newform/editform Columns

In the pure Sharepoint client development, considering this requirement, You need to operate a Sharepoint list. You have created many columns, but not all columns want to be seen by the end user. What should we do?

Obviously, you can only use JavaScript.

According to the last practice put forward in this document, you can give yourCodeWrite it to an HTML file and reference your file. As shown in:

Normally, I will put the JS files to be referenced in a separate cewp. The biggest advantage of doing so is that these JS references are only used for initial deployment during deployment, or when there are changes. Because your code is out of these references, you can place it anywhere.

Of course, there are also many other ways to help you do something, such as placing JS references in masterpage, you can even use smarttools jqueryloader for Sharepoint to automatically do these things.

 

 

After completing these preparations, you can start to write your own code.

First, explain the ideas. For example, for a Sharepoint field, it will be interpreted as a TR (red box ). There are two columns (TD, blue box), and controls (Green Box) in TD ).

In general, the label of the control is on the left, which is relatively fixed. On the right, the HTML parsed by the control varies greatly depending on the control.

So I chose the label on the left to hide the entire SharePoint field.

 

Hidden effect:

 

Code:

$ (Document ). ready (function () {Init (); rendercontrols () ;}); function Init () {cachevariables (); // cache variable, here, the list structure lbltitle = getformlabelbyschema (getfieldschema (field_list_schema, "title");} function rendercontrols () {setlistformfieldrowbylabel (lbltitle, "hide "); $ (ctrllistform ). show ();} function cachevariables () {If (field_list_schema = "") {getlist (field_list, false, function (xdata) {field_list_schema = xdata;}, function () {field_list_schema = "" ;}) ;}} function getlist (listname, async, callback, errorhanlder) {$ (). spservices ({operation: "getlist", listname: listname, async: async, completefunc: function (xdata, status) {// alert (xdata. responsetext); If (status = "success") {callback (xdata. responsexml);} else {errorcode =-1; errormessage = $ (xdata. responsexml ). find ("errorstring "). first (). text (); errorhanlder (xdata. responsexml) ;}}}) ;}// this method finds the function getformlabelbyschema (fieldxml) {var Title = fieldxml for each column based on the structure. ATTR ("displayname"); var required = fieldxml. ATTR ("required"); If (required = "true") {Title = title + '*';} else {Title = title + '';} vaR ctrls = $('h3 [innertext = "'+ title +'"] '); If (ctrls. length = 0) {return NULL;} else {return ctrls. first () ;}} // set the full row attribute function setlistformfieldrowbylabel (CTRL, status) {var ctrlrow = ctrl. closest ("TR"); Switch (Status) {Case "hide": ctrlrow. hide (); break; Case "show": ctrlrow. show (); break; Case "disabled": ctrlrow. ATTR ("disabled", "disabled"); break; Case "enabled": ctrlrow. removeattr ("disabled"); break ;}// separates the structure information of a column from the list structure, which can be used to find the display name, function getfieldschema (fields, fname) {return $ (fields ). find ('field [name = "'+ fname +'"] '). first ();}

Finally, JavaScript is used to dynamically display or hide columns. In some cases, it does not need to be dynamic, but is purely static. For example, you need to rate the current record, rather than want the user to edit this information, you can use the following method.

 

Allow content type management,

In this way, you can see the content type and add an option when adding columns. Do not selectAdd to all content types

the mystery is in this option. If the column you added is not in any content type, it will not be displayed in new/edit, if you want to use this value, you need a workflow or custom one.