You Can’t Do That In InfoPath!
InfoPath makes it easy to design complex, high-quality user interfaces, but unfortunately one if its limitations is that it does not support overlay windows. Anyone who has used a web browser is probably familiar with overlays, small windows usually programmed with jQuery that look like pop-ups but are embedded directly into the main web page. The background shading effect used with overlays could add a nice touch to a user interface, creating a sleek and modern-looking InfoPath form…that is if you were allowed to create overlays in InfoPath!
Figure 1: jQuery Overlay Example
Never fear: in today’s blog, we’re going to look at one way to create a browser form that uses multiple views to mimic the look and feel of an overlay.
Creating the Main View
This technique works best on forms with a fixed tabular or grid-based layout. Create the main view using your desired content and color scheme, making sure to put all of the content inside a single unbound section. Here is a screenshot of the Main View in a sample form I created as a demo (scroll down to the end of the post for the link to download the template file):
Figure 2: Main View of Sample Form
In my sample form there are two sections:
- Personal Information – a non-repeating collection of fields
- Job History – a repeating group with multiple fields
Here is the schema for these sections:
Figure 3: Schema fields for Main View
Creating the Overlay View
For my sample form, I’ve decided that the overlay should appear when I want to add new entry into the Job History repeating group. I’m going to show the overlay when the user clicks the bright blue plus sign picture button at the top right of the Job History section.
Now when I say “show the overlay” I really mean add a rule to the plus sign button that will switch to a new view I have created called the Overlay View.
Figure 4: Adding a rule to switch to the Overlay View
Next, choose the area that you want the overlay to appear in. Choose wisely because it will always show in the exact same area relative to the position of the other sections, so if you scroll too far it will move off the screen. Pick a location that will be on-screen and not too far away from the button that the user will click to display the overlay.
Once you have chosen your location, copy & paste the entire contents of the Main View into the new Overlay View. Below I have circled in red the area that I want the overlay to appear in:
Figure 5: Main View with targeted overlay area circled in red
Ok, now we’ve set up the rule to switch views, so let’s work on building the overlay inside the Overlay View.
The first step is to change the color scheme for everything OUTSIDE of the targeted overlay area to be a darker, greyer shade. You’ll need to play around with a few colors before you settle on the ones you feel are best for your particular form. Change the background color by right-clicking outside of the form sections, selecting “View Properties”, checking the “Use a background color” checkbox, and then selecting a color from the adjacent dropdown color menu.
Figure 6: Changing the background color for the Overlay View
Next, highlight the table cells OUTSIDE of the targeted overlay area and change their color by right-clicking, selecting “Table Properties”, clicking the down arrow next to the fill icon and selecting the desired color from the color menu.
Figure 7: Changing the colors for the rest of the sections in the Overlay View
Change any light colored fonts to a darker grey shade and any dark colored fonts to a slightly lighter grey shade. The goal here is to mute things so that the overlay will pop out at the user.
You may have noticed that the sections in my sample form have rounded corners. These are achieved by inserting image files into the table cells that mark the corners of the sections. If you use similar image files in your own forms, you will need to edit their color outside of InfoPath in your desired image editing software. Likewise, edit any banners or header/footer images outside of InfoPath as well.
Finally, change all controls outside the targeted overlay area to read-only text boxes so that the data is still visible but the user can’t edit them.
Here’s the Overlay View in my sample form after making all the changes described above. You can’t tell from the screenshot, but the plus sign button in the Job History section has been changed to a simple image, because we don’t want it to be an active in this view. (Alternatively you could disable the rules on the picture button, but the user would still be able to click the button and might wonder why it wasn’t doing anything.)
Figure 8: Overlay View with colors outside the targeted area changed & all fields changed to read-only text boxes.
Creating the Overlay Section
Now it’s time to create the overlay itself. Recall that the function of the overlay in my sample form is to add the details for another job to the Job History repeating group. To do this, I’m going to need some new fields that will be displayed only on the overlay. Here’s is the schema for these new fields:
Figure 9: Schema fields for the Overlay section
Rearrange the table rows and columns in the targeted overlay area to hold the controls for these new fields, as well as a title, cancel button and an Add button (to add the user’s entries to the Job History section, of course).
Feel free to be a bit creative here with the layout and the color scheme. I’ve chosen to keep things simple, re-using the light blue color from the Main View and sticking to a simple grid.
Figure 10: Completed layout for the Overlay View
Let’s take a closer look at the buttons inside the overlay.
The cancel “X” button in the upper right corner does two things: (1) clear anything the user may have typed into the overlay fields, and (2) switch back to the Main View. Together these two rules create the effect of “cancelling” and “closing” the overlay.
Figure 11: Rules for the overlay cancel button
The Add button is a bit more complicated and requires use of the qRules “Insert” and “Set Value” rule commands. The “Insert” command is used to add a new blank entry to the Job History repeating group, and the “Set Value” command is used to set the values of the fields in that new entry to be equal to the values that the user has typed into the overlay fields.
For more information on the qRules “Insert” and “Set Value” commands, visit this blog post.
Figure 12: Rules for “Insert” and “Set Value” qRules commands (Note: “Set Value” command shown only for the Company field)
Lastly, add a rule to the “Add” button to switch back to the Main View.
We are now finished with both the Main View and the Overlay View, and the form is ready to be published.
Here are a few screenshots of the sample form in action:
Figure 13: Screenshots from the finished sample form
Learn More
Try out this overlay technique yourself with the sample form template located here.
Want to learn more about the qRules commands described above? Qdabra offers short video tutorials and in depth how-to hands-on-labs. Check out the following links:
- YouTube Video highlighting the above techniques: