The Contacts and RSS 2.0 data entry forms you designed in Chapter 4, Creating Forms, didnt take advantage of the versatile layout features available in InfoPath. The labels and text box controls you added to form sections by choosing Section with Controls appear on individual lines. You can place label and text-box pairs in the same line by deleting line-feed equivalents and then align text boxes horizontally within a section by adding spaces and trimming widths. Its not easy to get the horizontal alignment right without changing the font size of the spaces you add, and inline labels for multi-line text boxes align at the bottom of the text box.
InfoPaths layout tables solve text alignment problems and enable you to establish a consistent form design strategy for your organization. Placing sections and controls within layout tables gives you the tools you need to tweak your design for better readability and improved data entry efficiency. Layout tables let you add outside borders to your form and its sections and, if you choose, controls contained in table cells . You can add individual layout tables for a form header and each section of the form. Alternatively, you can nest multiple layout tables within a single table that contains a heading.
This chapter deals with layout and repeating tables, along with the text box controls they contain; Chapter 7 delves into the details of table, section, and control formatting, including conditional formatting.
Most organizations observe a set of graphic design standards for stationery, business forms, brochures , product specification sheets, Web pages, and other publicly accessible and internal media. These standards usually include logos and specific font families for the organization name and document text, and they often include layout guidelines for print publications and Web pages. The goal is to present a consistent, memorable corporate image to employees and the public at large, regardless of the organizations business, charitable, or governmental purpose. InfoPaths sample forms adhere to a standard design pattern that uses layout tables to maintain a consistent graphic flavor.
The forms you create probably will be for internal use only, and your employer might not have graphics standards for internal printed or electronic documents. In this case, work with your colleagues to establish standards for form design, such as form headings, font families and sizes, and section layout.
Chapter 2 introduced you to working with InfoPath tables in data entry mode in the Adding Tables to Rich Text Boxes section. InfoPath provides a similar design mode capability for adding layout tables with cells to contain sections and controls, but extends the standard Table menu choices with a Layout task pane. Choosing the Layout task pane displays a set of standard layout tables. The Insert Layout Tables list s first selection, Table With Title, adds a default two-row, single-column table with placeholders for the title text and other form content. Figure 5-1 shows the master layout table for this chapter s first example.
Figure 5-1: You add this single-column, two-row layout table by double-clicking the Table With Title item and replacing the placeholder for the title and optional text.
The remaining standard layout tables have one, two, and three columns and one row. You can specify a custom table with the number of rows and columns you set in the Insert Table dialog box that opens when you click the Custom Table. The Merge And Split Cells list offers selections that correspond approximately to the Table menu s choices. You use the Merge And Split Cells selections when you modify parent and nested tables in later sections.
The following sections show you how to add a master table with a title to a form, add a repeating section to the master table, and add a layout table with text box controls in the repeating section.
In this section, you create a simple form to understand the capabilities of basic layout tables. A modified version of the Contacts-WellFormed.xml data document from Chapter 4 is a good choice for the data source for the form. The Contracts1Source.xml sample file has two contact entries with required personal and optional business address sections.
To create the data source for the Contacts1 template and add the master (title) table to the form, follow these steps.
Add a data source and master layout table
Contacts1.xsn s data source has three basic form components : name, personal address (required), and business address (optional). For this example, you add the contacts group section to the empty cell of the master table, insert and size a three-column layout table, and then add First Name and Last Name labels and text boxes to the leftmost and rightmost table cells. Follow these steps to add the form elements.
Add a data source and master layout table
One approach to adding sections to a master table is to add a section without controls, insert an empty layout table in the section, and then drag the sections fields from the Data Source list to the tables cells . This method becomes tedious if the section contains many fields.
InfoPath offers a shortcut for adding a layout table with labels and controls to an entire section automatically. The only issue with this approach is that the controls insert a two- column table with a row for each field in the section. Most fields dont require the default text box width to display their data. Changing the table from two to four columns to halve the number of rows requires splitting cells, cutting and pasting cell content, and then removing the empty table rows.
To add the personal group as a nested layout table, with labels and text boxes in individual table columns, and prepare to split the table cells, follow these steps.
Add a layout table for the personal group
InfoPaths table-editing features ease the drudgery of redesigning layout tables with controls. The split cells feature lets you add as many new columns to a layout table as you need to move fields to the same row. If youre familiar with modifying Microsoft Office Word 2003 tables, youll find that InfoPaths table-reconfiguration process is similar.
To split the personal sections table so that it resembles the design of the first layout table you added and move content from columns to rows, follow these steps.
Rearrange the personal section layout table
The firstName, lastName, and personal fields are required, so it makes sense to merge the contents of the first two tables. Moving the labels and controls of the first table to the second table also eliminates differences in text alignment between the tables.
To add a new top row to the second table, move the contents of the first table to the newly added row, and delete the first row, follow these steps.
Merge the names and personal tables
Adding the optional business group to the form shows you how to add an optional section without controls to the repeating section and then add a layout table with controls to the optional section.
To add an optional section with a layout table for the business group, follow these steps.
Add the optional section and controls
Figure 5-2: This preview shows the Contact1.xsn template s final design.
The examples in this chapter illustrate layout and formatting techniques but don t duplicate topic coverage in previous chapters, such as specifying required fields and testing templates. However, it s a good practice to verify that the forms you create with a new design methodology generate the data document you re expecting and that repeating sections merge correctly. To perform the test, create two forms using the default data, and then merge them to verify that all fields of repeating sections appear in the merged document.
Note |
Using the sample source and merged files |
At this point, the form you ve produced is short on graphic accouterments. You can spiff up the form a bit by adding borders to your tables. Adding borders, like adding dividing lines, aids users in identifying specific form sections. You also can add cell divider lines.
Following are methods for adding specific types of borders to the tables you added to the Contacts1.xsn template:
Figure 5-3, on the next page, illustrates that adding borders around all table elements leads to a harsh appearance and contributes little or nothing to the form s usability. (This version is Contacts1Borders.xsn.)
Figure 5-3: This version of the Contacts1 form has every possible border added.
The Status Report form and most other sample InfoPath forms include repeating tables. The form examples you ve worked with so far in this book don t have sections that suit repeating tables well because most text boxes contain lengthy content. Sales orders, invoices, and similar business documents include line items that lend themselves to display in repeating tables. As an example, a sales order created from a query against the Access Northwind database s Orders and Order Details tables includes order-specific information and multiple line items. The line items include several numeric data types, which give you the opportunity to explore InfoPath s numeric formatting features and receive a preview of calculating sums with expression boxes.
The source document for the repeating table exercise is a modified data document generated by the Northwind Traders Order Entry and Editing Form that you saw in Figure 1-6 of Chapter 1, Presenting InfoPath 2003. InfoPath generates complex attribute-centric XML data documents from Microsoft Access and SQL data sources, as you ll discover in Chapter 13, Connecting Forms to Databases.
All data documents you ve seen so far are element-centric XML, which uses element values to hold the data and attribute values for metadata. (The common definition of metadata is data about data, such as the dateAdded and dateUpdated attribute values of the Chapter 4 ContactsCh4.xml data document.) Attribute-centric XML delivers the data as attribute name/value pairs. For this example and those in Chapter 13, the attribute name is the field name of the table specified by the element name . Figure 5-4 shows the 11072.xml data source document in Microsoft Internet Explorer 6.
Figure 5-4: This attribute-centric data document was generated from the Northwind Orders and Order Details tables. An underscore substitutes for the space in the Order Details table name.
Compare the attribute-centric structure of 11072.xml with the element-centric version of the same Northwind database records in Figure 5-5. Access 2003 exported the records for order 11072 to the 10072EC.xml file. The _x0020_ element of the Order_x0020_Details repeating group substitutes for the space in the Order Details table name, and the field that s equivalent to the Extended attribute is missing. Both files are in the C:Microsoft PressIntroducing InfoPath 2003Chapter05NWOrders folder. The following example uses an attribute-centric source document to show you how to create a repeating table from an attribute-centric source document s repeating elements.
Figure 5-5: This is part of the element-centric version of the Orders and Order Details records for Northwind order 11072.
Note |
Avoiding attribute-centric documents |
To create a data source from 11072.xml, follow these steps.
Create the attribute-centric data source
You read in Chapter 4 that, unlike the Microsoft XSD Inference 1.0 tool, InfoPath doesn t attempt to infer data types from the data in source documents. This means you must change the data type of each date and numeric field manually. When you change the data type, you lose default values, if present. You also have the option of applying the techniques you learned earlier in the chapter to coalesce the Orders table into fewer rows.
To change the field data types and add new default values, do the following.
Change the field data types
If you have the patience, rearrange the Orders table to two sets of columns with labels and text boxes that match the sequence of the attributes in Figure 5-4, and change the three date text boxes to date picker controls. After about 10 minutes of heavy-duty cutting and pasting, your table appears as shown in Figure 5-6.
Figure 5-6: The Orders and Order Details tables appear as shown here after considerable time and energy spent moving cells.
SP-1 The InfoPath Insert Formula feature lets you assign a value from one control (the source) as the default value of other controls for fields of the same data type (targets). When you update the source control s value, target controls update in unison . As an example, the Order ID values in the repeating table must correspond to the Order ID value of the Orders group. If you change the Order ID in the layout table, existing and added Order Details rows must receive the new Order ID value. The value you set in the source control overrides default text box and data source values. To give the Insert Formula feature a test, follow these steps.
Assign the master Order ID value to Order Details elements
SP-1 The Insert Formula feature makes it easy to write XPath expressions for computing numeric field values, such as the extended amounts for order or invoice line items. The Extended field in the Order Details section is a good candidate for demonstrating this capability.
To add a calculated default value ”Quantity * Unit Price * (1 - Discount) ”for the Extended field, follow these steps.
Calculate the extended value of Order Details items
Additional decimal values that sometimes appear are the result of rounding errors, which you will learn to disguise in the next section.
The XML Schema specification doesn t provide a currency or percentage data type, but InfoPath lets you format the text boxes for entering currency and percentage values. Special numeric formatting is available for the Decimal (double) data type only. Formatting doesn t affect the element or attribute values of the XML data document.
To format the Unit Price and Extended text box for currency (US$ for this example) and the Discount text box as percentage, follow these steps.
Format text boxes bound to decimal fields
Figure 5-7 shows the repeating table with numeric formatting added. InfoPath doesn t add a % symbol for percentage values; adding % before or after the Discount label lets users know the value is a percentage.
Figure 5-7: This preview shows text box values formatted for U.S. currency and percentage.
Repeating tables have an optional footer that s useful for displaying summarized numeric data. You add a footer by selecting the Include Footer check box on the Display tab of the Repeating Table Properties dialog box. As you learned in Chapter 3, expression boxes use XPath sum( ) expressions to calculate the totals and aren t bound to fields. Chapter 6, Adding Basic Controls and Lists, covers expression box controls in detail.
To add a table footer and total the Quantity and Extended fields, follow these steps.
Add a table footer with total values expression boxes
The generalized XPath expression sum(groupName/@attributeName) , which appears in the Insert Expression Box s text box, totals attribute values in repeating sections or tables. Omitting the @ symbol totals element values. Figure 5-8 shows your form with the two added expression boxes. The Extended total is 1.#QNAN, which is InfoPath s code for not a number, in design mode, because the individual values aren t calculated until you open a preview or a form.
Figure 5-8: This repeating table footer contains expression boxes for summing the Quantity and Extended fields.
Test the expression boxes you added by clicking Preview Form, selecting the repeating table, and pressing Ctrl+Enter to add a few Order Details entries, as illustrated in Figure 5-9.
Figure 5-9: This form preview shows totals for the four default and one added Order Details entries.
Create, save, and use Notepad to compare a test form with the original data document to ensure that the two documents have identical structures. The test form opens with a single default Order Details item, so the number of OrderDetails elements will differ from the original. The only structural difference between the original and the InfoPath form (other than the PIs) is the substitution of element closing tags for the shortcut element closing syntax of the original document.
The design of the NWOrderEntry form is decidedly bland , so you might want to spruce it up with a master table and title. This is a slightly chancy process, so save and make a backup copy of NWOrderEntry.xsn before you embed the existing tables and controls in a master table.
To add a master table and embed the tables and their controls, follow these steps.
Insert a table with a title and all form controls
SP-1 The InfoPath Tables toolbar contains a Draw Tables button that enables you to design specialized tables by drawing freehand. This feature is similar to the Draw Tables feature of Microsoft Word but the behavior of the pencil differs from the pencil in the Word version. As mentioned in the Adding Tables to Rich Text Boxes section in Chapter 2, drawing tables ” especially layout tables ”isn t an easy process for anyone other than professional Web page designers. One potential application for drawing freehand tables is to trace data entry locations from a temporary form background image that you create by scanning a paper form.
Following are basic instructions for drawing InfoPath tables:
Other table-editing features, such as changing the size or position of cell dividers , are similar to those for layout tables. You also can apply split, merge, and other table-menu operations to freehand tables. Figure 5-10 shows a freehand table with a few sample RSS 2.0 labels and text boxes and the pencil cursor selected.
Figure 5-10: Use the Draw Tables pencil cursor to draw a table and add cell dividers.
Layout tables are one of InfoPaths most powerful form-design features. A single- column layout table with a heading row and a second row to contain all other form elements is the most common starting point in producing InfoPath forms.
Conventional sections with controls add labels and text boxes automatically but require manual formatting operations to place label/text-box pairs on a single line and align text box edges to achieve an attractive form layout. InfoPaths layout tables for data source groups automatically place labels and text boxes in adjacent cells, which eliminates vertical and horizontal text-alignment problems. Automatic label and text box insertion creates a row for each fields label and text box. Placing more than one label/text-box pair in a row requires splitting table cells followed by cut-and-paste operations to reduce the number of rows.
Repeating tables are preferable to repeating sections for entering numerical data stored in fields of repeating groups because they conserve valuable real estate in the form. Repeating table footers can hold expression boxes to display the sums of numeric columns . The Insert Formula dialog box simplifies calculating expression box and default field values using XPath expressions.
InfoPath lets you use a pencil tool to draw custom tables that arent easy to create by specifying the number of rows and columns of a custom layout table. In most cases, youll find that using standard or custom layout table selections from the Layout task pane are a better starting point for conventional InfoPath forms.
1. |
Is it better to use a separate one-row title table with individual layout tables or to embed layout tables in the second row of a title table? |
|
2. |
Is there any limit to the depth of nesting layout tables? |
|
3. |
Why is element-centric XML preferred over attribute-centric XML? |
|
4. |
Can I add controls other than text boxes to the data rows of a repeating table? |
Answers
1. |
The only advantages of a two-row title table with nested sections, layout, and repeating tables are the option to add a border around the entire form and apply a background color to only the active area of the form. An independent title table lets you copy it to the other forms you create and modify it as necessary. An independent title table probably is a better approach when you ve added a logo graphic or applied other special formatting to titles that are common to all or most forms. |
2. |
The only limitation on nesting depth is space on the form to accommodate controls at the lowest level in the nesting hierarchy. Assuming that group layout tables are embedded in a master layout table for the form, the practical limit is likely to be three or possibly four nesting levels. |
3. |
A basic purpose of XML is to create structured or semi-structured documents with human- readable content. Attributes, because they re contained within element tags, are considered part of the structure of documents, not their content. Human-readable content belongs between opening and closing element tags. The relatively minor reduction in size of an attribute-centric versus an element-centric document doesn t justify intermingling structural and content information. |
4. |
Yes, if the fields have appropriate XML schema data types, such as date , dateTime , or boolean , which bind to date picker or check box controls. Multiple numeric fields bound to a set of option buttons is another suitable choice. InfoPath s sample Applicant Rating form illustrates the use of option buttons in a layout table, but they re sometimes also useful in repeating tables to display and calculate total scores in footer expression boxes. |
Heres an additional exercise to test your layout skills:
Part I - Introducing Microsoft Office InfoPath 2003 SP-1
Part II - Designing InfoPath Forms
Part III - Working with Databases and Web Services
Part IV - Programming InfoPath Forms