Get a tabular feeling in InfoPath

Hi everyone!

Ok, as the title says I will describe and show you have you could do to give your InfoPath form that little extra that sticks out.

As you already might know we now have the possibility to use pictures as buttons in InfoPath 2010.

The final result will look something like this:

It consists of six pictures altogether, because we have a darker image that will be chosen as hover-button and as the active-button. We also have three views that we can toggle by selecting these tabs.

The tabular area is divided in five cells, a starting and an ending cell and three cells that holds each one of the tabs.

The starting and ending cells both have a background color of RGB: 192, 210, 218 and the cells in the middle have RGB: 205, 219, 225 that will match these pictures. Putting a background color also gives a smoother transition when you hover the buttons.

Start by creating three views named “Requestor”, “Project” and “Financials”.

Then add three picture buttons like this:

For each one of the buttons and cells, set all margins to 0 (zero) so that looks like this.

Now choose the first view, in this case “Requestor” and give the home-button the darker picture and leave the hover button empty.

As you can see InfoPath gives the picture a name of its own.

For the other two buttons in this view, add the brighter picture as its default and the darker as the hover button.

When you have finished all three buttons make a preview to make sure the tabs change when you hover them.

Now we are going to add some rules to the buttons.

On the view “Requestor” leave the first button as is. On the second button add a rule with an action that switches to the view “Project” and on the third button an action that switches to the view “Financials”.

Now do the same thing for the other two views but of course, have their home-buttons dark without a hover button and so on.

Make a preview and make sure you end up in the correct view.