Create Custom List Form Pages using SharePoint Designer

to modify content in a list like the one that you're seeing right now the employees list you need to hover over the data point where you can pull down the what's called the ECB menu or the context menu and basically click on edit item and when you do that a form page comes up and the form page will let you change the data simple enough what if you wanted to change this form page or make a new form page and have a logo of your company up above maybe make a couple of these data points so some of these columns make them either hidden invisible or just make them read-only so user cannot change for example their login ID or employee ID I'm going to show you how you can use SharePoint designer to do just that let me cancel out of here and I'm going to go to the employees list in SharePoint designer which I have opened up right here listen library's employees list for this site the form pages the form page that I showed you just a second ago is the edit form aspx page that is what lets you edit an item in a list so what I want to do is create a new form page and that form page is going to be the one that's going to let you edit information but that form page is the one that you're going to design yourself now you can of course go ahead and redesign the edit form that esp X which is the built in form for edit but I would advise that it's better to make your own form page and make that your default edit page and here's how you do it so first I'm going to click on the new button right here to make a new form page and this is going to be the employee info or actually let's make it edit employee info dot aspx it's going to be to edit information so Edit item form and what this does by the way is to take the existing edit form and give you a dad as in starting point so you can take that and then modify the form page from there I'll set this as a default form page and then I'm going to go ahead and click on create link in the list item menu and ribbon and this will be edit employee info so from the drop down the ECB menu that you see the context menu for an item that I showed you earlier you will now see the Edit employee info wording and when you click on that you will see the edit employee info web a web page I'll click on OK here we go the Edit employee info dot aspx page appears I'll click on this to get to the actual page so I can edit it further it shows me that here's the current data source I have all these different columns to work with and then here's here are the columns displayed on the page let me close the data source of details for now I don't need that first thing I want my login ID to not be an editable field I want this to be just be read-only for the user so I'm going to click on login ID click on this Chevron Despero and select format as just text instead of this form field just make it text and just as easy now it has become text label and it's not editable anymore the exact same time going to do to employee ID make a text all right now at the bottom I have lots of these fields some of these fields that I don't want to show to the user at all for example the the salaried flag maybe the vacation hours sick leav hours all these things let me go ahead and select this information and treat this just like any other table in Microsoft Word for example once I have these rows selected I want to delete them so I click on the table tab up above and the data view tools because that's what this is is the data view now I click on table tab here and say delete these rows all gone wonderful now what I want to do is to go to the top of this table and customize this further by adding an image a logo for my company directly in here so when the form page comes up it shows the logo for my company or my department whatever you want to show I'll click on insert insert a picture the picture resides in my My Documents folder here it is adventureworks insert aw is the alternate text and here's my logo adventure works wonderful let me go ahead and save this page it's asking me where do you want to save the picture well by default is always going to save it in the site assets library since I'd assets library is part of every team site automatically and that's definitely recommended that you store your pictures among other things in there so let me click on OK and I'll further format my column here all these headings I'm going to take this highlight it and say let's make it bold and also change the background color a little bit it's got a live preview so it shows me exactly what it's going to look like if I let if I click on any of these let's go and click on this one and save okay so we're all done let's see what this looks like so to navigate now to this in the browser I can just well I can just go to my browser where the employees list is still there and I'm going to go ahead and refresh my page now when I hover over the login ID and bring up the ECB the edit control button menu or context menu bring that up that shows an additional item now edit employee info when I click on this it shows me my modified form so it has the logo it has login ID and employee ID both being read-only and has the highlighted change the background and bold for all my column headings but not only that when I if I had clicked on edit item instead of added employee info the Edit item brings up a dialog box and a dialog box also has the exact same formatting that I've done so that appears in the existing Edit item form because I made it a default form and also the new form to edit employee info form that I customized so you saw how easy it is to create new list of form pages using SharePoint designer and it creates that using the extremely powerful data view web part

Channel: VisualSP

Views: 57,721

Rating: 4.8064518 out of 5

Keywords: SharePoint, SharePoint List

Id: 1UqyOihqavE

Length: 8min 36sec (516 seconds)

Published: Mon Feb 01 2016