Creating custom entry forms for task list

This is the first post from a series of posts related to lists in SharePoint and what we can do with them. I will start with creating a simple task list, edit and add columns, create custom view and create custom entry forms for the list.

My task list named Maintenance should have the following columns:

  • Task name (text)
  • Submitted on (date)
  • Module (text)
  • Description (text)
  • Assigned to (AD user)
  • Realized on (date)
  • Hours spent (number)

Open the site where you want to have your task list and from Settings select Add an app.

Image alternative text

Figure 1. Add an app

From the gallery of available apps select Tasks, enter the name of the task list (in my case Maintenance) and click Create.

Image alternative text

Figure 2. Creating a task list

After creating it go to the List tab at the top of the page and choose List Settings.

Image alternative text

Figure 3. Task list

The created task list already comes with columns that we can use but if you need additional ones click Create column link. Enter column name and choose the type of the column and click OK. For my purpose I have created 3 more columns named Submitted on, Realized on and Hours spent.

Image alternative text

Figure 4. Creating task list column

The default view of the task list is called All Tasks and is pretty self-explanatory. To create a new view, go to List tab then List Settings and at the bottom of the page click on Create view link and choose Standard View type. Enter the view name, choose which columns you want to have in your new view and make the column order by your choosing. In the additional options I will choose Basic Table style and will set the Item Limit to 10. If you are pleased with the looks of your view, make it default.

Image alternative text

Figure 5. Create new view

Image alternative text

Figure 6. Finished view

Go to Settings on the page, choose Edit page and then edit the web part that is holding the task list. From the Selected View dropdown choose the view that you have just created and then click OK.

Image alternative text

Figure 7. Select view for the task list

Image alternative text

Figure 8. Final view of my task list

If we click on Add new item link a new page will be opened with the default entry form for adding new items in the task list. I like it more when my forms for adding or updating open as a popup. So let’s change that. Go to List Settings, Advanced Settings and from the Dialogs section at the bottom choose Yes for Launch forms in a dialog. Then click OK.

Image alternative text

Figure 9. Launch forms in a dialog

Most likely the default form for new items won’t show your new columns unless you click on Show more and then there will be all of the columns that we want to get rid of. For creating our custom entry form we need to open SharePoint Designer 2013 and open the site where are task list is. From the Navigation panel choose List and Libraries and you should see here your task list (mine was called Maintenance). Click on it to open additional options.

Image alternative text

Figure 10. SharePoint 2013 Designer

In the Forms section click the New… button. A new popup will show up.

Image alternative text

Figure 11. Create New List Form

Start by entering the name of the form. I will call it AddItem. From the type section choose New item form and click OK. Now in the Forms list click on the created form and wait for the Designer to open the html code. From the Insert tab expand the New Item Form and select your task list.

Sometimes these menus look like disabled so save the changes, go to the List and Libraries link in the Navigation panel, select the task list and then select the new form. Now the New Item Form menu should be available. Our AddItem form is a regular aspx file so we can change the look as we desire. I have removed the table rows that contain the columns I don’t want to have in the New Item Form so my AddItem looks like shown on the printscreen.

Image alternative text

Figure 12. SharePoint Designer editing form

Image alternative text

Figure 13. AddItem form

I did the same procedure for Edit and Display form. At the end I had a New Item form without the columns that are not needed when a new item is added, an Edit Form with only the columns that I wanted to be updated and a Display Form designed as I wanted. If you like to keep track of the changes made in the list, feel free to enable versioning.