Sunday 23 June 2013

Creating Views and Buttons or Tabs in InfoPath 2010

What I intend to show in this post is how to create some basic views of an InfoPath form and then add buttons to the main form that link to those views,

We can also make those buttons appear only when access to the views are required.

Start with a basic SharePoint list form – I’m using a custom list that I have added a few basic fields to.



The idea is to have a form that is as clean as possible and only shows fields that are essential.


So depending on the choice in my field “Article Type” I will make a different button appear which will take the form filler to a different view that contains the newly required field.











I have three choices for article type (Newspaper Article, Magazine Artilce, Webpage Artcle), and for each type I want a description. 

I want the different descriptions for each article type to be stored in a different field (Newspaper Description, Magazine Description, Webpage Description).


First we need to create a new view for each description type.






On the Page Design tab click ‘New View’.

Name the view.







You now have a new view, and this the view of the form that will open when the button we add is clicked.

I have repeated the last step three times so I have 3 views, one for each description type.







I have added a title and added a large text box field for this description type, If you are creating the field though InfoPath be sure to access the field properties after adding it to the form and name the field appropriately.
 
I have again repeated the above step so I have three views all with a different field added to capture the different descriptions.

 


As you can see I now have three views (top left) and I have the three correlating fields (bottom right) that I have added to those views.

Now I need to modify the default view to add the buttons that will navigate to the views.

Switch back to the default view.





Insert three buttons to the bottom of the form (or wherever you wish your buttons to appear).








 Select one of the buttons and right click, select ‘Button Properties’









I have renamed all of the buttons.






Select one of the buttons and ‘Manage Rules’.






From the new menu select ‘New’






I want to make all of the buttons hidden unless the corresponding ‘Article Type’ is selected so I need to set a formatting rule first to hide the button by default.

If you want your buttons visible at all times you can skip this formatting rule.






Click on the ‘None’ under condition to set a condition for the rule.

I have added a condition that if ‘Article Type’ is not equal to ‘Newspaper Article’

What I will do now is select to make this button hidden if that condition is true.



 





































This means that by default the button will be hidden unless someone selects ‘Newspaper Article’ from the drop down menu.

I have repeated this step and added a formatting rule to hide each button.

If you view the form you will see the buttons do not appear by default.
 





If I select an ‘Article Type’ the corresponding button appears.





Next is to make the button link to the correct view.

Within the rules section for the button again, select new.

This time we need an ‘Action’.






We do not need a condition, by leaving it as none it will take the button click as a trigger for our action.

Set the action to ‘Switch Views’







Select the view that should open when the button is clicked.



















I have repeated this step for all three so that all the buttons now have an action to switch to a new view.







 Click on the button to switch to the view.




You may wish to add a button to your views to switch back to the main form, or even to submit data.

Submit data is another action type in the rules I created in the created steps.
















This is a very simple example of how you can use multiple views to simplify the user experience of a form by breaking the form into multiple views and only directing the form filler to views of fields when they are required to.

Hope this helps!

9 comments:

  1. This is very nice and helpful. The screen shots make it so easy to follow. An extra tip. You could create just one button for description, labeled "Add Article Type Description". Create 3 rules for the single button, one rule each that will switch to the appropriate view based on the selected Article Type.

    ReplyDelete
  2. Super helpful!! Thanks Matt

    ReplyDelete
  3. Thanks Matt. Really helpful to break data into tabs using the buttons and views combination. However, when we click on an item in the SharePoint list in view mode data appears which is only in first tab and other tabs & data doesn't appear while viewing the item. Is there a way to display all the tabs with data in view form for SharePoint List item same as Edit Form? Thanks.

    ReplyDelete
  4. Hi, thanks for your comments glad it helps. It sounds like you have edited the edit form but not the view from. If you want them to both be the same you must replicate your changes on both.

    From the page design tab in the ribbon try changing the view to the edit form and you should see the view you are getting when opening the SharePoint list item. Update that edit form and you should be set. For screenshots of the ribbon try this blog post - https://www.nothingbutsharepoint.com/sites/eusp/Pages/How-to-Design-Different-Display-for-View-Edit-List-Item.aspx

    ReplyDelete
  5. Thanks Matt!! for your response and sharing the link. The link you shared was helpful, I was able create a different display form by setting up the "NEW View" in the InfoPath Designer FORMS Web part (ITEM Display Form). Is there any feasibility to display also the tabs in the Display form same as Edit form? Thanks for your help!

    ReplyDelete
  6. Hi Matt, Is there any feasibility to display the display form in Tabs?

    ReplyDelete
  7. Hi, if I understand your question correctly, you are asking if you can add the tabs to the display form in the same way you have on other views? I see no reason why you can't, just select the display form and edit that partiuclar form in InfoPath. It all depends on the form you are designing and the user experiecne you are trying to achieve.

    ReplyDelete
  8. EXCELLENT information. Your directions are clear and concise, and easy to follow. Thanks for your hard work in posting this info.

    ReplyDelete