SharePoint 2010: Howto start customize list form (New/Edit/View) using InfoPath Designer 2010

By | March 21, 2010

English

In SharePoint 2010 there we have more option to customize list form. For instance, you can use SharePoint Designer 2010 or InfoPath Designer 2010. Since modifying list form using SPD is already exist in previous version. I will just show you how to customize list form using InfoPath Designer 2010.

When customizing list form using InfoPath Designer 2010, you will get all form designer benefit. For example, you can define the field validation rules, parent-child relation etc. And bet what, the process is straight forward. In this very basic how-to, I will demonstrate how to start customize list form using InfoPath Designer 2010. I will create an Book List with “Title” – “Author” – “Status” column. In the New form, I will only show “Title” and “Author” – while in Edit form, “Title” and “Author” will be readonly, but “Status” is editable.

How to customize list form using InfoPath Designer 2010.

  1. Prepare the custom list.

    Prepare custom “Book List” with 3 columns: “Title” – “Author” – “Status”. “Status” field is choice “Available” – “In Used” – “Missing”. After creating the list and preparing columns, we can start to use the list and add a new item in this form.

  2. Start InfoPath Designer

    Start InfoPath Designer and select to design SharePoint List form.

    Type in the SharePoint site URL

    And then select the Book List from the list of available data.

    Finally, click on Finish.

  3. When the form editor open , you can start to edit the New form. I add a title “Book List Entry” and delete the “Status” row.

    And here is the result:

  4. Add “Edit Form” view in the designer, and set Title and Author as readonly.

    Type-in the view title.

    Design the form – add “Status” column in the form.

    Set “Title” and “Author” textbox property to “ReadOnly”

  5. Publish the form to the list.

  6. Configure the “Book List” to use designated form.

    Open the list setting page, and expand context menu for the Forms.

    Since the first view will be the default – our interest is only to the “(Item) Edit Form”. Click on (Item) Edit Form link, and change the Form view.

    You will realize that now you are seeing form services in web part.

    Click on Web Parts Tools tab, and then click on Web Part Properties.

    In the Web Part Properties, select the designated view.

  7. And here we go with the custom “New Form” and “Edit Form” for the list.

    New Form.

    Edit Form.

    Happy design.
    [Update: Follow the InfoPath and SharePoint 2010 Productivity Series]

70 thoughts on “SharePoint 2010: Howto start customize list form (New/Edit/View) using InfoPath Designer 2010

  1. Odis Aanderud

    I was just was doing research and suprised by the article you posted. Just exactly what I searched also. This rocks!

    Reply
  2. Willy

    hi,
    what if i don’t use infopath?
    how can i create different views for the workflow using the custom list?

    Reply
  3. Anon

    Hi riwut

    How can we create Disp form in infopath u have showed, New Form and Edit Form but not View/Disp form.

    Reply
    1. cakriwut Post author

      Hello Mala,

      You can use Customize Form in the List Setting tab.

      Reply
  4. Charles Chen

    There’s an interesting issue here as this approach doesn’t seem to work for the New form on document libraries.

    Any suggestions on an approach to capturing metadata before a user creates an instance of a document content type in a document library?

    Reply
    1. cakriwut Post author

      What do you mean New form on document libraries? I don’t think document library has form. There is document template, and edit property.

      Reply
  5. JRIESEN

    What would be the method to get the form to open in the popup SharePoint 2010 way form anywhere on the site? I have a corporate website I am building and will be linking to this form from everypage, but I would like it to open in the pop-over window that lays over the currently displayed page? Can this be done and if so, what is the way to accomplish this? Thanks!

    Reply
    1. cakriwut Post author

      Hi, its easy ; you can achieve it by adding query parameter IsDlg=1.

      For example, you have Survey list in the rootweb, and trying to open it from subsite as dialog.
      You can create javascript like this,

      <script type="text/javascript">

      function DialogCallback(dialogResult, returnValue)
      {
      }

      function OpenEditDialog()
      {
      var options = {
      url:"/Lists/Survey/NewForm.aspx?IsDlg=1",width:700,
      height:700,
      dialogReturnValueCallback: DialogCallback
      };

      SP.UI.ModalDialog.showModalDialog(options);
      }</script><a onclick="javascript:OpenEditDialog();" href="#" rel="nofollow">Click</a>

      Reply
  6. Dev

    Great post, I really appreciated that you figured out that a field has to be set to a “Text Box” control before it can be set to “Read Only”.

    Now that I have my customized forms, I am trying to find a way to link to them and have them open as a dialog.

    My calendar has several overlays but users can create new events on any of them. I have created links to the “NewForm” of each of the overlay calendars, but the link “/Administration/Lists/Trips/NewForm.aspx?Source=/Administration” opens the form as a full page rather than a dialog.

    Reply
  7. David Tappan

    Regarding document libraries–they don’t have a newform; that is replaced by upload.aspx, which calls editform.aspx after the file is uploaded. Customize that.

    Reply
    1. cakriwut Post author

      Hi,

      You can customize editform.aspx through SharePoint Designer. InfoPath doesn’t support form customization in document library.

      -Riwut-

      Reply
  8. Pingback: SharePoint 2010 and InfoPath forms « amavs

    1. John Taylor

      Well we ended up using PowerForms and are pleased

      Reply
  9. Yash

    by any chance can i edit the default survey form created from a Survey list?
    please reply urgently.

    Reply
    1. cakriwut Post author

      You can not edit default survey form. However, you can embed your own form.

      Reply
  10. josh

    so… does any of this have any bearing on the item forms for mobile view? I’ve looked far and wide and come across zillions of “how to customize your list with Infopath” articles, but none that address mobile. 🙁

    Thanks.
    josh

    Reply
    1. cakriwut Post author

      I never try myself, but I think we need more specific about mobile view.

      Reply
  11. John P.

    Hello, you can also check PowerForms which is a silverlight webpart that fully customizes sharepoint forms. You can easily hide columns, change position and a lot other advanced tasks without coding. Give it a try, i think it will solve a lot of problems.
    http://www.bpc.gr/powerforms

    Reply
  12. hiran

    Can we package this. What if I want to deploy this to another forest (Staging) without saving as a list template?

    Reply
  13. Praveen Pandey

    Is there a way to create a custom newpost.aspx and editpost.aspx for a blog site in sharepoint 2010

    Reply
  14. Isabella Haessler

    Excellent post. I had been checking constantly this web site and I am impressed! Extremely helpful info specifically the final part 🙂 I care for such info a whole lot. I became seeking this certain information for the long time. Thank you and enjoy.

    Reply
  15. Neil Dorval

    I am really pleased to uncover the site. I would like to say thank you regarding this excellent reading. If you can add Reddit button to your internet site, it just might help you to reach far more people on the internet. Cheers

    Reply
  16. Suzanne

    Thank you! I wish I would have found this first as all the other things I found were very complicated.

    Reply
  17. Logan

    Let’s say that on the “new form” view I populate a control via a default value formula. But, when users come back to edit the item I just want the control to display the stored value. How can I accomplish this since different views use the same controls?

    Reply
    1. cakriwut Post author

      Hi,

      Look at step #4. In that step, we are creating Edit Form. The value of field in Edit form are coming from the same data source, however we can choose different type of control.
      For example, in New Form , you can define colum Status as DropDown control; but in Edit Form, you can define it as TextBox showing the value.

      I hope you get the idea.

      Reply
  18. Tamms

    Thanks for your post:

    I have 1 list with approx 30 columns: which contains 3 stages, concept entry, design entry and business case, at each stage they want to add in just the info for part of the list – so i’ve managed to create the 3 edit forms in info path and link them with rules in infopath to each stage, but I’m not able to change in info path the orginal New Item form.

    When I open infopath I can see the 3 forms I’ve created, If i create a new entry form how can i attach with without wiping out my rules for the edit forms?

    thanks Tamms

    Reply
  19. Tamms

    Also, can you advise how to print the forms?

    thanks heaps, Tammy

    Reply
  20. Pandev

    I have a requirement where I have fields A, B, and C. We want to display controls conC and conD where conC coincides with field C and conD does not directly coincide with a field. The form needs to perform validation on the controls’ values and then once validated, calculate the values for fields A and B based off the values of conC and conD. Is this possible?

    For an example, we may have fields A, B, and C. The user may enter values xyz and 123 for conC and conD respectively. Here we would set field A to xyz123; set field B to 123xyz; and set field C to xyz.

    Reply
  21. Richell

    Hello,

    I have a list that I created using SharePoint and InfoPath. I am running into some security issues where an employee is able to view data that only HR is supposed to view, so I was advised that I need to filter the list view so the employee can only view their data by default. How do you create a default view list to be filtered so that the current owner only sees their forms using sharepoint 2010?

    Many Thanks

    Reply
  22. Fran

    Great post helped me with a list moved over form 2007. Wanted the data but did not want anyone to add to it anymore. U should state that this only works on text fields however. Still big help

    Reply
  23. Dinesh

    Hi,

    I want to edit the custom list without using Infopath. Is it possible to do that? If yes can you explain it?

    Thanks
    Dinesh

    Reply
  24. Awilda Brandstetter

    Howdy I am so grateful I found your blog http://blog.libinuko.com/2010/03/21/sharepoint-2010-howto-start-customize-list-form-neweditview-using-infopath-designer-2010, I really found you by chance, while I was looking on Askjeeve for something else, Anyways I am here now and would just like to say thanks for a marvelous post and an all round entertaining blog (I also love the theme/design), I don’t have time to read through it all at the moment but I have saved it and also added your RSS, so when I have time I will be back to read more, Please do keep up the great effort.

    Reply
  25. Joe

    Hello, How do i launch the Dropoff library “editform.aspx” and “upload.aspx” in maximised mode ? I want them to always be maximised when one uploads a record on the records centre. I’m using SharePoint server 2010.
    Thanks,you help will be highly appreciated

    Reply
  26. gleapman

    Javascript to open a dialog works great. By far the simplest approach I’ve found.

    Is there a way to trigger the javascript from a button on an InfoPath form in a web part? (I know how to find the dynamic id of a control.) And is there a way to pass a parameter value to the javascript from the originating InfoPath form to add to the url in the javascript. I need to pass the ID from the record in the originating form to the form in the dialog with a url that looks like this: url:”/Pages/MeasureContributionEdit.aspx?mid=25″ (with the ‘mid’ value provided dynamically). I’ll then use a filter web part in the dialog to grab the mid value.

    Thanks.

    Reply
  27. siva

    Hi,
    Recently my company sharepoint server was migrated from 2007 to 2010. Now I'm unable to edit the forms which were i developed through Sharepoint Designer 2007 in SharePoint Designer 2010. When i open the forms all content are read only aswas Design Forms In InfoPath option is disable only. am i need to install infoPath seperately? can u please guide me to edit these forms.

    Reply
  28. Sharepoint Beginner

    Is there any way we can show different views of same form created via Infopath while hitting different views created in sharepoint.
    For e.g There is a list called Employee.General Info (having emp personal and professional info). I have created 2 different views in Sharepoint – EmpPersoalView and EmpProfessionalView. Each view shows its respective columns but when I click on Edit it shows entire columns (both personal and professional info). So just reying to fix it via infopath but not able to find the options from where I can switch views on the basis of view accessed by end users in sharepoint site. Please Help!!

    Reply
  29. SP pro

    Great post. I have a multipage survey in SharePoint 2010, I am trying to redirect the users once they finish the survey, like after hitting on the 'Finish' or 'Cancel' button in editform.aspx.
    I dont know, how to do this in a multi page survey. Please help, if you have any idea on this.

    Reply
  30. Pingback: Infopath 2010 – How and Where to start? « SharePoint – Simple How To's

  31. Rick

    Thanks for the post.  Can an InfoPath form work with managed metadata and enterprise keyword columns and have a similar user experience as the native SharePoint form?

    Reply
  32. Theresa

    Very helpful post – thank you. I'm hoping you or someone else reading can provide some insight to an issue I'm having when customizing a form in InfoPath. Many of my forms have lookup fields; they pull the values just fine before I customize. However, after I customize the form in InfoPath, the NewForm overlay just shows a checkbox in the lookup field. When I look at the field in InfoPath, it appears that it is defaulting to displaying the value of the field. For a new item, nothing has been selected so the field has no valued. I've gone into the Control Properties and changed the List box choices to "Get choices from external source" and pointed to my source list. This appears to work during the preview, but once I publish the form it reverts the field to a value of "Enter choices manually" for the List box choices field.
    Any help is appreciated.

    Reply
  33. Lauren

    Is it bad practice to edit and republish the form to the SharePoint list while end users are in the list?  I need to make an update to the form (basically move the location of one of the fields on the form) but want to make sure it won't disrupt any current activity (viewing items, adding new items, or changing items) within the list.
    Thanks!

    Reply
    1. cakriwut Post author

      Hello,
      I think working directly in PROD environment is not recomended.
      Basically you have to properly plan for the Delivery Management and Change Management to the platform. A properly planned and documented modification could takes 5-30 minutes to complete (depending on the complexity) ; and I would suggest you make communication before applying such changes from staging environment.

      Best regards,

      Riwut L

      Reply
  34. Ayush

    Is it possible to write JavaScript in Code Editor of InfoPath 2010? I want to add a script 4 d button…

    Reply
  35. San

    Lauren,
    As you are using InfoPath form for list forms, does it requires to have Enterprise license for server, and each user to enterprise CAL for this?

    Reply
  36. Sanjay Dak

    Hi Cakriwut,
    Indeed a great post.
    Can anyone tell me how after saving the changes how can we redirect to a page in normal window not in dialog window.
    I'm using SPUtility.Redirect() function to redirect but by this method the page opens in dialog window not in regular window.
    I have customize new and edit form with code behind file.
    Thanks!
    Sanjay Dak

    Reply
  37. Artem

    Is it possible to make a display form, that we customized in infopath, open not in a webpart but at client's soft? in filler mode. The reason is that I need this form to be nicely printed out which is not really possible in current situation. Thank you.

    Reply
  38. Arunraj

    I created a list using sp2007 list template in sp 2010. I am not able to open the new form in sp designer 2010.

    Reply
  39. Venkat

    Hi
    I have request, I am using SharePoint 2010.
    I have a list with different columns., one of the columns is with choices(drop-down) i.e., standard1, standard 2, standard3, standard4.
    NewForm – When I click on drop-down menu and select one of the choices, a link should appear beside the ddl to view the text ( Actually T&C's applies differently to each standard).
    SO based on ddl selection, link should appear, so when I click on the link, specific T&C's text should appear.
    Please give me an idea.
     
    Workaround: I have added a link using toolbox  in SPD2010, but not sure how to filter and get the text on popup window when clicked on link.
     
    Thanks.
     

    Reply
  40. Aniel

    Hi all,
    Someone already have the same request:
    I need to display in the "New" form questions 1, 2, 3 for Group A and questions 4, 5 for Group B only.
    In Sharepoint 2007 we have SPListDisplaySetting for but nothing on 2010. Do you have an idea ?
    SpListDisplay : http://splistdisplaysetting.codeplex.com/

    Reply
  41. sheraz

    Thanks for a wonderful post. I came across a nice Barcode component that really good for customizing SharePoint lists. I hope it's going to be useful. Here are the details.
    Aspose.BarCode for SharePoint allows developers to <a href="http://www.aspose.com/blogs/aspose-products/aspose-barcode-product-family/archive/2012/05/24/announcing-aspose.barcode-for-sharepoint.html"><strong>insert barcode symbols in Microsoft SharePoint lists</strong></a>. Aspose.BarCode for SharePoint supports more than 40 of the most popular barcode symbologies including linear & 2D like Code128, Code39, Code93, EAN13, UPCA, UPCE, BooklandEAN, Interleaved2of5, MSI, Code11, Codabar, Postnet, Planet, SSCC18, PDF417, QR, DataMatrix & many more.  Aspose.BarCode for SharePoint is designed to work with MS SharePoint Server 2010.
    Many thanks
    sheraz 

    Reply
  42. Pingback: Lists in SharePoint 2010 « SharePoint 2010 For ALL

Leave a Reply