Modify Form Web Part

When viewing or editing the properties of a document in a document library, SharePoint displays these details in a very plain page. Just the facts. Function over form.

These pages can be customized in a few ways.

Default Diosplay FormAdding content to the top of the form

Adding content (like a help video, explanation, or some other web part) to the page on which you view an item or edit an item is easy.

First, navigate to the appropriate library. Under the library tab, click Form Web Parts.  The drop down will give you two options- Default Display Form and Default Edit Form.  This is confusing, so here is an over-explanation:

  1. Edit FormDefault Display Form – This option edits the page you see if you click on the properties of a document.
  2. Default Edit Form- This edits the page you see if you are editing the properties of a document.

Choosing either option will pull up a page that looks something like the screen shot to the right. Click Add a Web Part to add content to the top of the page. Make your changes, and when you’re finished, click on Stop Editing.

I added this lovely duck to the view properties page.

New Form

Using JavaScript and CSS to edit the form page

The form can also be adjusted by adding JavaScript or CSS to the page using the content editor web part.  Instead of inserting an image or video above the form use the content editor web part to insert some custom code.

  1. From the edit screen, click on Add a Web Part and select the Content Editor part under the Media and Content category.
  2. Click on the “Click here to add content” link.
  3. HTML SourceUnder the Format Text tab, click Edit Source so that you can write code.
  4. Add your code and click ok. I added some CSS as a style, referencing the h3 tags for each property’s title.
  5. Save your changes and the code will take effect.

Save formYou can also use this trick for adding jQuery, JSLInk, or just plain Javascript.

If you are editing several forms in the same way, it will probably be much easier to reference a style sheet document as opposed to copying the changes into every single form. That way, changes down the road can be propagated by simply changing that style document.

Editing the Form in SharePoint Designer

Edit LibraryThe aspx files the control the form contents can also be directly edited using SharePoint Designer.  If you’re new to Designer, I’d recommend coming to our SharePoint Designer class and studying a while.  It is a powerful and free program that is essential for any complex or advanced SharePoint design work.

Editing the form also requires some familiarity with code.  There is no WYSIWYG or visual editor in SharePoint 2013 Designer for making these types of changes.

To reiterate, SharePoint Designer should only be used by advanced SharePoint users.

Using SharePoint Designer

After downloading and installing the program, open it by clicking on Edit Library in the Library tab.

Half way down the page on the right is a section called forms with three options: DispForm.aspx, EditForm.aspx, Upload.aspx.

Forms

A mistake with a default file could lead to hours of troubleshooting, so be careful here.  The best practice is to create a new form using the new button at the top of the forms group. Choose the type of form and the content type with which you want to associate the new form and click ok.

Code will fill your screen. You can now reorganize this code to change the appearance or order of fields.  Of course, knowledge of aspx, html, and CSS would be very helpful. If you don’t have this experience, it might be best to leave this type of work to a consultant.

Create New List Form

One thought on “Modify Form Web Part

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s