SharePoint 2010: Howto start customize list form (New/Edit/View) using InfoPath Designer 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. 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?

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

  2. 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!

    • 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>

  3. 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.

  4. 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.

    • Hi,

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

      -Riwut-

  5. Pingback: SharePoint 2010 and InfoPath forms « amavs

  6. 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

  7. 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

  8. 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.

  9. 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

  10. 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?

    • 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.

  11. 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

  12. 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.

  13. 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

  14. 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

  15. 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

  16. 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.

  17. 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

  18. 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.

  19. 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.

  20. 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!!

  21. 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.

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

  23. 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?

  24. 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.

  25. 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!

    • 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

  26. 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?

  27. 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

  28. 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.

  29. 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.
     

  30. 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 

  31. Pingback: Lists in SharePoint 2010 « SharePoint 2010 For ALL

Leave a Reply