Creating Forms With Views

If you have been here before then you will be familiar with the types of InfoPath forms I have created in the past, they normally look similar to this


They work very well but I have always hated the fact that users have to scroll down the form to complete them, wouldn’t it be better in ‘chunks’

Well using views in InfoPath and a little bit of ‘magic’ its quite simple to achieve this

Lets start with our form show above, we are going to break it down into 3 ‘chunks’

  • Get the student details
  • Review Targets
  • Set new target

New View

Start a new form and add the fields you need to get the data for the first view, in this case all the student details


Nothing new here, but how do we then get the next set of data we need

Automatically InfoPath has created the view shown above and called it Edit, so lets change the name; it will make it easier in the long run

On the ribbon click on the Page Design tab


Here you can see the name of the view that you are currently looking at, in this case the default Edit view. Click on Properties and change the name to something logical, in my case StudentDetails

You can see now that the name changes in the ribbon


Now lets create a new view, if you have navigated away, click on the Page Design tab on the ribbon and click the New View option


Give the new view a name and click OK

At this point InfoPath will open up a new form with some very basic details


Switching Views

Switching views is what will make the form more interactive to the user. You could just allow them to switch views using the ribbon at the top of the open form


A much more professional looking way would be to put some nice buttons on the form and hide the form ribbon

In the image below I have expanded the input controls box to show all the controls available to me, the one I am going to use is the Picture Button control, I can use this to add a picture and then use a simple rule to switch views


Find a good place on your form and add the Picture Button control, you should see this appear on your form


Double clicking the button will change the focus of the ribbon to the Control Tools tab


From here you can change the picture of the button and add a hover picture as well

I have two pictures ready


Lets add the black next arrow as the main picture, click on the Picture option on the ribbon and select the picture you want to use, you can adjust the size of the image from the ribbon if you want to

Now lets add the hover picture

Click on the Hover Picture button on the ribbon and select the picture you want to use as the hover picture

And the images below show what it looks like in the browser


At this stage the button doesn’t actually do anything, I need to add a rule to tell it what to do when its clicked

Double click the picture button on the form and select Rules from the ribbon


Now on the right hand side of your screen you should see the Rules workspace


Click on New and select Action


For Run These Actions click on Add and select Switch Views


In the pop up window select the view you want to go to when the button is clicked and click OK

Now when the button is clicked it will change the view and to the user appear to be a very professional form

Hide The Form Ribbon

The last thing to do is hide the ribbon at the top of the form so that the only way views can be changed is by clicking the buttons you add.

Click on the File menu


Click on Form Options and deselect the Show InfoPath commands in Ribbon or toolbar option


Click on OK and publish your form

You form will now be ribbon less


And Finally

Of course you can add buttons for back as well

Next post will show you how to use rules to hide the button until fields in the view have been completed

Alan Richards (MVP)
I am the Information Systems Manager at a School in the UK and SharePoint MVP. I run the SharePoint 2010 farms for our School and the local School consortium with a focus on using non-code solutios to deliver my goal of having a paperless School environment.
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>