Starting from Scratch—A Simple Input Web Form

You need a web form to edit and display product data, and the easiest way to get started is to create a blank web form based on the tblProducts table. Click the Blank Form button in the Forms group on the Create tab. A blank form grid appears in Layout view with the Field List window showing on the right side of the screen, as shown in Figure 14-30.

When you click the Blank Form command on the ribbon, Access opens a new Form window in Layout view.

Figure 14-30. When you click the Blank Form command on the ribbon, Access opens a new Form window in Layout view.

The web form does not yet have a record source, so you need to bind this web form to the tblProducts table. Click the Property Sheet button in the Tools group on the Design tab under Form Layout Tools. Find the Record Source property on either the All or Data tab in the Property Sheet window for the form, and select tblProducts from the list of table and web query names to bind this form to the tblProducts table. Note that when you are working with web forms, Access does not list any client queries in the drop-down list of table and query names on the Record Source property. You cannot bind a web form to client queries, only tables, web queries, and web-compatible SQL statements.

Now that you have the web form bound to the tblProducts table, you can begin to add the fields to the form grid, as you did previously in Design view, but this time using Layout view. Open the field list by clicking the Add Existing Fields button in the Tools group on the Design tab. If the field list displays other tables in the bottom half of the field list, click the Show Only Fields In The Current Record Source link at the top of the Field List window to show only the fields in the tblProducts table.

Earlier in this chapter, you were able to drag a control from the field list and place it on any part of the form grid in Design view. Let’s perform the same step now in Layout view with this web form. Drag the ProductID field from the field list onto the form grid. (It doesn’t matter on which part of the grid you place the field.) After you release the mouse, you’ll notice that Access places the control near the upper-left corner of the form grid, as shown in Figure 14-31. Notice also that you can see actual data from the table in the text box.

Access applied a control layout to the grid and anchored the ProductID control in the upper-left corner. Access positioned the Product ID label about 0.25 inches from the top of the form and a third of an inch from the left side of the form. All controls on web forms must be in a control layout to be web-compatible. When Access anchors a control in a control layout for web forms, Access resizes or moves the control if you resize or move the section in which the control resides. In addition to anchoring controls to the default top left, you can choose to stretch the controls across the top, down the left side, and down and across the section. On the Arrange tab, in the Position group, click Anchoring to see the four possible anchoring configurations web forms, as shown in Figure 14-32.

To see how another anchoring option appears on the form grid, select the ProductID field, if it isn’t already selected, and then click Stretch Across Top in the anchoring gallery. You’ll notice that Access increases the width of the ProductID field so that it extends closer to the right edge of the form. If you close the Field List window, you can see that Access again increases the width of the control. Switch to Form view now by clicking the arrow in the Views group on the Home or Design tab and selecting Form View in the list of available views. Access displays the ProductID field nearly across the entire top of the form grid, as shown in Figure 14-33. In most cases, a control this wide is not very practical for a simple text field. Return to Layout view, select the ProductID control, click the Anchoring button in the Position group on the Arrange tab, and change the anchor option back to Top Left.

If you like, you can try some of the other options. Stretch Down expands the control to fill the vertical space on the form. (If you have more than one control stacked in the layout, Access expands them all equally to fill the space.) Stretch Down And Across expands the control to fill the entire space.

Now that you have the ProductID field on the grid, let’s add the next field, ProductName, below ProductID. Click the ProductName field in the field list, drag it onto the form, and place it just below the ProductID text box, as shown in Figure 14-34. When you have it correctly positioned, Access displays a horizontal I-bar below the ProductID text box. Access displays this I-bar as a visual cue to indicate where it will drop the new control. If, for example, you want to place the new field to the right of the ProductID text box, position the mouse to the right of that control and you’ll see a vertical I-bar to the right of the ProductID text box.

After you release the mouse, Access places the ProductName field directly below the ProductID label and text box controls, as shown in Figure 14-35. Now that you have two controls on the grid, you can really begin to see the advantages of control layouts in web forms. Unlike the Design view exercise you performed at the beginning of this chapter with a client form, Access creates a label and field control that exactly matches the dimensions of the first label and field control when you use a control layout in a web form. Access positions the new controls directly beneath the ProductID controls and aligns them vertically.

Control layouts help you align and position controls on forms and reports. It might be easier to think of a control layout as being similar to a table in Word or a spreadsheet in Excel. When you widen or narrow one control in a column, you change the width of any other controls in that column that are part of that control layout. Likewise, when you increase or decrease the height of a control, you’re changing the height of all the controls in that row.

When you design web forms in web databases in Layout view, Access puts all controls into a control layout to be compatible with the web. In web forms, you have no control over how Access creates the control layouts. When you are creating client forms, however, you have additional flexibility when working with control layouts. Access 2010 has two kinds of control layouts for client forms—stacked and tabular. In a stacked control layout, Access stacks bound controls for different fields in a column and places all the labels down the left side. In client forms, you can have multiple sets of stacked controls within a section. Any controls (including associated labels) in a stacked layout must all be in one section. In the web form you’ve built thus far, Access placed the product number and product name controls in a stacked layout in the Detail section. You can tell these controls are in a control layout by noticing the small box with crosshairs just to the left of and slightly above the Employee Number label, previously shown in Figure 14-35.

In a tabular control layout, Access places bound controls horizontally with labels along the top as column headings—much like rows on a spreadsheet. A tabular control layout can include controls in different sections of a form—for example, the labels can appear in a Header section and the data controls in the Detail section of the form. If you use the Quick Create Multiple Items button for client or web forms, Access creates a tabular control layout for the fields in the form’s record source.

Let’s add the remaining fields onto the form grid now. Click the ProductUnit field in the field list, hold down the Shift key, and then click the Active field to highlight the remaining six fields. Drag all the controls as a group onto the form grid and place them just below the ProductName text box. After you put the fields on the grid, your form should now look like Figure 14-36.

When you work with a control layout in Layout view for web forms, you can save time positioning, moving, and resizing controls. As you can see in Figure 14-36, Access sizes all the labels and text box controls to the same dimensions. When you did this same exercise in Design view at the beginning of the chapter, you needed to perform extra steps to make all the labels the same size, change the widths of the labels to accommodate the caption text, and line up the controls both horizontally and vertically. You also had to swap positions for the IsAdmin check box and label. In the Layout view for web forms, though, Access correctly places the label to the left of the check box, which makes this part of the form creation process much easier and faster.

When you have controls in a control layout in web forms and move them around in Layout view, Access automatically snaps them into proper horizontal and vertical alignment. To see this feature, let’s move half of these controls into a second column as you did for the employee client form earlier in this chapter. Click the Report Group label control and drop it to the right of the ProductID text box control. When you have it correctly positioned, Access displays a vertical I-bar to the right of the ProductID control, as shown in Figure 14-37.

After you release the mouse, Access moves the Report Group label control to the right of the ProductID text box control, as shown in Figure 14-38. Access also lines up all the controls both horizontally and vertically in the form grid. When you’re working with web forms that use control layouts, you can easily move and swap control positions without having to line up the controls.

You’ll notice in Figure 14-38 that there appear to be extra cells in the control layout above and to the left of the fields in the first column. There are also extra cells beneath the Report Group label control. These extra cells are called empty cells. These empty cells fill the remaining horizontal and vertical positions of the control layout grid. If you think of the control layout as a table or grid, each cell of the table is either empty or contains a single control. In web forms, you cannot have overlapping controls; each cell can contain only one control. When you moved the Report Group label to its new position, the old position is now an empty cell.

Using the technique you just learned, reposition the ReportGroupID combo box control to the right of the Report Group label control. After you reposition the control, your form should now look like Figure 14-39. You’ll notice that Access removed the entire row of empty cells where the Report Group label and combo box controls used to be. After you move a control or set of controls, Access removes a row or column of empty cells by default if there are no longer any individual controls within that row control. You can add back in a row or column of empty cells if you still want extra space between your controls. (We’ll show you how to do that in just a minute.)

When you moved the controls for the report group, you put them into positions where no empty cells existed. We now want to move additional controls from the column on the left to the column on the right. To do this, we can drop controls directly into empty cells. Click the Inventoried label control and place it into the empty cell beneath the Report Group label. When you have it correctly positioned, Access highlights the empty cell beneath the Report Group label, as shown in Figure 14-40.

After you release the mouse, Access moves the Inventoried label control into the empty cell beneath the Report Group label control, as shown in Figure 14-41.

Using the techniques you’ve just learned, reposition the remaining fields below the ProductCost controls over to the second column. After you reposition all the controls, your form should now look like Figure 14-42. You repositioned and aligned the controls in a matter of seconds, whereas this same procedure in Design view for client forms could take much longer.

Click the Save button on the Quick Access Toolbar to save this form and name it frmProducts. You can also find this form saved as frmXmplProducts1 in the sample database.

As you might recall from earlier in the chapter, we like to right-align our labels and bold the font. When you did this procedure in Design view with a client form, you clicked the horizontal ruler at the top of the design area to select all controls in a column. In Layout view, however, you cannot display the horizontal ruler. To select all the label controls in a column, select the Product ID label and then click the Select Column command in the Rows & Columns group on the Arrange tab, as shown in Figure 14-43. Access highlights all the labels in the columns as well as all the empty cells. Now, click the Bold button in the Font group on the Format tab to change the font in all the label controls to bold. Next, click the Align Text Right button in the Font group to right-align all the text in the labels. Finally, click the Font Color button in the Font group and change the font to black. (The default font color Access uses is a lighter shade of black.)

You’ll notice that when you change the font to bold, Access increases the width of all the label controls and the empty cells in that column to make sure all the text still fits within the labels. Access then pushes all the text controls to the right to accommodate the wider labels. Repeat the same steps you just performed for the second column of label controls. Switch to Form view to view the results of your change. Your form should now look like Figure 14-44.

Now that you have all the labels formatted just the way you want, you should adjust the width of the text box controls. Remember that earlier in the chapter, we discussed having three different widths for the various text box controls. Right now, all the text box controls are 2.5 inches wide, which is much larger than they need to be. Let’s start by resizing all the text box controls to the longest length we want to have, 1.5 inches, and then we’ll move the controls into two columns. Click the sizing box in the middle of the right edge of the ProductID text box, and drag the right edge to the left until the control is about 2 inches wide. As you drag the control to the left, you’ll immediately notice that Access resizes every other text box in that column as well, as shown in Figure 14-45.

Now, you can see one of the great advantages and disadvantages of using a control layout. If you need to resize all the controls in the same column on a form grid to the same width or height, using a control layout makes this process very simple. However, it is impossible to make individual sizing changes to some of the controls inside a control layout. To resize individual controls, you must either split the cells of the control layout grid or remove the control layout applied to the controls. But keep in mind that you can remove a control layout only for client forms. To make individual sizing changes to some of the controls on a web form, you must split the cells. We’ll show you how to do that in just a moment.

After you reduced the size of the text box controls in the first column, Access moved the remaining controls and empty cells to the right of those controls, farther to the left side of the form window. Reduce the width of the second column of text boxes now by clicking the sizing box in the middle of the right edge of the ReportGroupID combo box, and drag the right edge to the left until the control is about 2 inches wide.

To remove a control layout for client forms, you first need to select all the controls that you want removed from the control layout. If you want all the controls removed from the control layout, you can select them all by clicking the Select All button in the Selection group on the Format tab. Now that all the form controls are selected, on the Arrange tab, in the Table group, click Remove Layout. In Figure 14-46, you can see an example of this procedure, where we opened the frmAboutStartup client form in the sample database in Design view, selected all the controls, and then clicked Remove Layout.

Now that you’ve removed the control layout for a client form, you can move and resize any controls independently. Remember, the above procedure only applies to client forms that have control layouts. You cannot remove control layouts on a web form.

To have different sizes for the controls in your products web form, you need to split the cells of the controls. The ProductID and Cost fields don’t need to be as wide as the other controls in the first column. To split the ProductID text box control, select the control and then click the Split Horizontal command in the Merge/Split group on the Arrange tab, as shown in Figure 14-47. Access creates a new column in the structure of the control layout. You’ll notice that the other cells in the same column remain the same size. The other columns now span the two underlying columns that Access created from the split operation.

Select the Cost field and then click the Split Horizontal command again to split this field into two separate cells. The ProductID and Cost fields are now the same column width. By splitting cells, you can achieve the goal of having different sizes for different columns. Access also provides the ability to split cells vertically with the Split Vertically command in the Merge/Split group on the Arrange tab. When you split a cell vertically, Access creates a new row in the structure of the control layout. If there are other cells on the same row as the one that you are wanting to split, they remain the same size as they were.

If you want to make a control wider or taller without adjusting the size of any other columns or rows, you can merge the control with adjacent empty cells. For example, if you want to make the ProductID control wider again, select the ProductID control, hold the Ctrl key, click the empty cell to the right of the ProductID control, and then click the Merge command in the Merge/Split group on the Arrange tab, as shown in Figure 14-48. Access merges the ProductID control with the empty cell to make the width the same as the ProductName and Unit controls again. (Note: split the ProductID control back into two cells after doing this procedure or press the Undo button on the Quick Access Toolbar to undo this change before proceeding further.)

As you split cells vertically and horizontally, your control layout becomes more complex. If you find that the individual cells are becoming too small to easily manage, you might want to adjust the row heights and column widths first before doing additional splitting and merging of cells.

On your products form, it might be helpful to add a little more separation between the first column of text boxes and the second column of labels. You could extend the width of the second column of labels to the right line to make this separation because the labels are aligned to the right, but we’ll add in an extra column of empty cells to the control layout instead. To create an extra column of empty cells to the left of the second column of labels, select the Report Group label, and then click the Insert Left command in the Rows & Columns group on the Arrange tab, as shown in Figure 14-49.

Access creates another column of empty cells to the left of the Report Group label. Note that you could also accomplish the same task by selecting the ProductName text box control and then clicking the Insert Right command in the Rows & Columns group. In that case, Access creates a new column to the right of the ProductName text box control.

If you need to insert new rows into your control layout, Access provides two commands in the Rows & Columns group for this task—Insert Above and Insert Below. When you click the Insert Above command, Access creates a new row above the selected control or empty cell. Click Insert Below and Access creates a new row beneath the selected control or empty cell. If you want to delete a row or column, select an empty cell and then press Delete. Note that Access deletes the entire row or column only if no controls exists within the highlighted row or column.

The new column Access just created is 1 inch wide and is a little more space than we need. Click the sizing box in the middle of the right edge of one of the empty cells in the new column, and drag the right edge to the left until the control is about a half inch wide. As you drag the empty cell to the left, Access resizes every other text box in that new column as well.

Let’s make one last column width adjustment before we move on to the next section. If you move through some of the product records in Layout view using the record selector buttons at the bottom of the form window, you’ll notice that the ProductName text box is actually a bit too small to fit many of the product names. Select the ProductName text box and expand the width to the right till the control is about 2 inches wide again. If you switch to Form view, you can see the result of your work so far, as shown in Figure 14-50. Click the Save button on the Quick Access Toolbar to save this form. You can also find this form saved as frmXmplProducts2 in the sample web database.

Web forms do not support as many control types as their client form counterparts support. If you click the down arrow on the right side of the Controls group on the Design tab, you’ll notice the list of controls is much smaller than for client forms, as shown in Figure 14-51.

You’ll notice in Figure 14-51 that Set Control Defaults and ActiveX Controls are dimmed. You cannot use the Set Control Defaults option on web forms as you can for client forms. Web forms also do not support any ActiveX controls. In Figure 14-51, you’ll notice that Use Control Wizards is not dimmed, which implies you can use control wizards when dropping controls onto web forms. On client forms, control wizards are available for many control types such as command buttons, combo boxes, list boxes, and web browser controls. On web forms, however, the web browser control is the only control type that uses a control wizard. You’ll learn more about the web browser control in the next chapter.

The control types you can use on web forms are as follows:

Refer to Table 13-1 for a detailed description of each control type and its usage. To place a control onto the web form, click the control in the Control group and then position your mouse over the form grid. If you want to place the control inside an empty cell, hover your mouse over the empty cell until the Access highlights the cell, and then click again to place the control. If you want to position the new control above, below, to the left, or to the right of an existing control or cell, position your mouse on the edge of the existing control or cell until Access display a horizontal or vertical I-bar and click. Access creates a new row or column and then places the new control inside the cell.

Earlier in this chapter, you placed a rectangle control around the outside of your controls on the employee client form you created in Design view. Web forms do not support rectangle controls, but you can simulate the same behavior using gridlines. To add a gridline across the top of the controls on your products web form, select the Product ID label control, hold down the Shift key, and then click the ReportGroupID combo box control to select all the controls and empty cells between those two controls. Now, click the Gridlines button in the Tables group on the Arrange tab, and then click Top on the drop-down list of gridline options, as shown in Figure 14-52. Access adds a gridline to the top of each control and empty cell you selected.

In the drop-down list of gridline options, you can select options to add gridlines to both the vertical and horizontal sides of a control (all four sides), the horizontal sides of a control (top and bottom), the vertical sides of a control (left and right), the top side of a control, the bottom side of a control, and to no sides of a control (to remove any existing gridlines). You can also adjust the color, width, and border style of the gridlines by clicking the options beneath the None option on the Gridlines drop-down list.

To add gridlines across the bottom of the controls, click the Cost label control, hold down the Shift key, and then click the Active check box control to select all the controls and empty cells between those two controls. Now, click the Gridlines button in the Tables group on the Arrange tab, and then click Bottom on the drop-down list of gridline options. Access adds a gridline to the bottom of each control and empty cell you selected.

You now have gridlines across the top and bottom of your controls. Next, we want to add gridlines to the left side of the label controls in the first column. The drop-down list of gridline options under the Gridlines command in the Tables group does not contain an option for just the left or right side of controls. To add gridlines just to these sides, we’ll need to use the Property Sheet window. Click the Product ID label control, hold down the Shift key, and then click the Cost label to select all four of the label controls on the left side of the web form. Next, click the Property Sheet button in the Tools group on the Design tab to open the Property Sheet window. Finally, on the All or Format tab of the Property Sheet window, select the Solid option on the Gridline Style Left property, as shown in Figure 14-53. Access adds a gridline to the left side of the selected label controls.

The last step we need to do to complete our gridlines is to add gridlines to the right side of the controls on the far-right side of the web form. Click the ReportGroupID combo box control, hold down the Shift key, and then click the Active check box control to select all the controls between those two controls. Now, select the Solid option on the Gridline Style Right property on the Property Sheet window. If you switch to Form view, you can see the result of your work, as shown in Figure 14-54.

All your controls from both sides of the web form are aligned vertically, but they seem to be too close together. Earlier in this chapter, you adjusted the space between the controls by using the grid properties and snapping the controls to the grid using Design view for a client form. You can also adjust the spacing between the controls by using the control padding commands. Control padding adjusts the amount of space between the controls on the form.

Access 2010 has four settings for control padding—None, Narrow (the default), Medium, and Wide. Let’s change the control padding around all the controls from Narrow to Medium. Select all the controls on the grid by clicking the Select Layout button in the Rows & Columns group on the Arrange tab. Access highlights all the controls and empty cells in the control layout for the web form. Now, click Control Padding in the Position group on the Arrange tab, and then click Medium, as shown in Figure 14-55.

After you click Medium, Access increases the padding around all the controls so that they are spaced farther apart, as shown in Figure 14-56.

We should probably now add a label control to the Header section of the web form to display a title. When you performed this procedure on the employee client form in Design view earlier in this chapter, you first opened the Header/Footer section of the form grid. In Layout view for web forms, there is no option to open the Header/Footer section. If you use one of the Quick Create web form options—Form and Multiple Items—Access creates a label control in the Header section for you. When you start from scratch to create a web form using the Blank Form web option, Access does not open the Header/Footer section. To open the Header/Footer section on a blank web form in Layout view, you need to click the Title button in the Header/Footer group on the Design tab, as shown in Figure 14-57.

Access opens the Header section of the web form, creates a new label control, and makes the caption of the label the same as the form name. Access creates this new label control in a control layout that spans the Header section of the web form. To the left of the label control, Access creates an empty cell. We don’t need this empty cell for our purpose, so select it and then press Delete to remove it from the form grid. Next, click inside the label control and change the caption to Products. One final step we should make to the web form is to remove the three empty rows of empty cells at the bottom of the form grid. Select a cell in each of three rows while holding down the Shift key and then press Delete to remove these extra rows. If you switch to Form view, you can see the completed products web form, as shown in Figure 14-58. Click the Save button on the Quick Access Toolbar to save this form. You can also find this form saved as frmXmplProducts3 in the sample web database.

When you are working with control layouts, you cannot drag a control from one section to another, such as dragging a control from the Detail section into the Header section. When you need to move an existing control from one section of the form to another, you can use the Move Up and Move Down buttons in the Move group on the Arrange tab. For example, if you wanted to move the Active check box control in the products web form you’ve been creating down into the Footer section of the form, you can select the control and then click the Move Down button in the Move group, as shown in Figure 14-59.

Access moves the Active check box control down into the Footer section of the form, as shown in Figure 14-60. When you use the Move Up or Move Down command, Access moves the control one place up or down in the control layout. If you are at the bottom of the control layout and click Move Down, Access moves that control down into the Footer section. Similarly, if you are at the top of the control layout and click Move Up, Access moves that control up into the Header section. If you are not at the top or bottom of a control layout, Access moves the control one row up or down in the control layout. If another control occupies the space you are trying to move into, Access creates a new row above or below the occupied control and places the control into the new row. For example, if you select the ReportGroupID combo box control and click Move Down, Access creates a new row below the Inventoried check box control and moves the ReportGroupID control into the unoccupied cell in the new row beneath the Inventoried control. If you are at the very top of a control layout in the Header section, Access dims the Move Up command because it cannot move anything higher up. Similarly, Access dims the Move Down command if you are at the very bottom of the control layout in the Footer section.

If you moved any controls on your products web form, undo the changes by clicking the Undo button on the Quick Access Toolbar.