SharePoint Hiding fields in newform, dispform, editform

Question

I have a task here when I need help. what I'm trying to do is follow.

• Hide some fields in newform, change form and submit to SharePoint (2013)
• The field I'm trying to hide is ONLY the input / text field, and not the entire column / header associated with it. Basically I have a form with a headline and an associated text box (one line of text) next to it, what I would like to do is hide only the text box.

I used the IE F12 tools to select a text field that displays the following code:

<input title="Travel" class="ms-long ms-spellcheck-true" id="Travel_f6801fb9-c4ff-4109-acb9-f7dd63c1d98a_$TextField" type="text" maxlength="255" value=""> 

(text box linked to my Travel column)

Now, when I use the F12 tools to select this, I added some css (from what I can say) under the heading "inline Style" which was "display = none", and bingo it works!

Now what I cannot do is add this to the forms forever. I tried to do this by adding the Content web part to the form and trying the CSS / Java script, but I just don't have the skills in this area .. does that make sense?

Examples:

any help would be great

Hooray!

Answer 1

Client Side Rendering (aka CSR ) was introduced in SharePoint 2013, which is used to display list views, list forms, and search results. For more information, follow the SharePoint 2013 Client Side Rendering: List of forms .

The following JavaScript template demonstrates how to hide field controls on list form pages:

 SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() { SPClientTemplates.TemplateManager.RegisterTemplateOverrides({ OnPostRender: hideFieldControls }); }); function getFieldControlId(field){ return field.Name + '_' + field.Id + '_$' + field.Type + 'Field'; } function hideFieldControl(field){ var fieldControlId = getFieldControlId(field); var fieldControl = document.getElementById(fieldControlId); fieldControl.style.display = "none"; } function hideFieldControls(ctx){ var fieldNamesToHide = ['JobTitle','WorkPhone']; //<- set field names to hide here if(fieldNamesToHide.indexOf(ctx.ListSchema.Field[0].Name) > -1) { hideFieldControl(ctx.ListSchema.Field[0]); } } 

How to apply changes

• Open the list form page in edit mode
• Add Script Editor web part to page
• Paste the specified JavaScript template by including it using the script tag Note: specify the field names to hide using the fieldNamesToHide variable
• Save Page

results

Pic 1. New New Form Page

Fig. 2 Special new form (field controls for Job Title and Business Phone are hidden)