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