Customizing a SharePoint list form giving it some nice and sleek design was a tough task and required lot of efforts until 2013. In my work i have faces many situations where i have to depend on page CSS or Master Page CSS to customize a SharePoint list forms like Newform.aspx, Editform.aspx or Displayform.aspx.
This article is the first step to customize a SharePoint list form with colors and layouts.
- Let us create a simple custom list ( Remember we can customize any list forms with the same approach)
- We created a simple out of the box custom list. Out of the box it is going to take the master page CSS or the SharePoint default CSS.
- Let’s customize this page without touching the master page or affecting anything other than this particular page
- From the list ribbon on top click on List tab which will open a list ribbon with bunch of buttons and commands as displayed in picture.
- As shown in above picture every list has this button called customize form. whenever you click the button it opens the form in Info-path Designer.
- In SharePoint 2013 every list forms( library,lists) can all be customized using info-path.
- As shown in picture above SharePoint list form is now opened in Info-path designer. Info-path provides lot of tools and capabilities that we can use to customize SharePoint forms without using any programming codes. The list now is like a simple HTML form and the right hand side shows all the columns that are added in the list.
- we can move the rows add some colors to the table insert some pictures and lot of customization in terms of looks and feel be done here.
- lets us try to re arrange the data fields in different order than what it is now.
- using that i reordered the form input fields to the order i wanted
- As shown in the picture we moved the rows and reordered the input fields. we added new rows and moved the input fields just copying from one place to another. so simple wow.
- Now my current form looks much better in term of order of information that represents an Employee information input form.
- let’s add some colors and borders to the form
- Now you can use the tools available in Info-path forms
- After adding some colors and borders to the form now my form looks like this
As shown in above picture i have customized a simple SharePoint list form with some colors pictures. we can brand any list forms like this in SharePoint 2013 using Info path designer which was a difficult task in earlier version.
Now we have to save this as a template and publish it from the info-path form make sure it has the list links correctly displayed.
once the form is published this is how the new list form looks in the SharePoint list.
Thanks to Info-path now this can be done without a single CSS or HTML knowledge. This is the very basic feature that info-path has but we can do much more using info-path. I will discuss few functionalities used at my work in future stay tuned.