Step by step exercise. Designing forms

Objective.

To learn how to modify a form design.

Open the Classes.mdb database.

We are going to modify the design of the Students columnar form.

1 Position yourself in the Forms tab in the Database window.

2 Click on Students Columnar form.

3 Click on the button in the database window.

We will firstly add a text box.

1 If the Form design bar is not visible then drop down the View menu, Toolbars, and Form design option.

2 If the Toolbox is not open click on the button on the bar.

We are going to add todays date in the header of the form. For this we need to add a text box as it will contain a variable value.

3 Click on the button.

4 Position the cursor in the area where we want to put the date, left clic and maintaining the mouse down, drag the control to the correct size, and let go of the mouse button.

5 Click inside the control and type = date(), date() is the funtion that returns the system date. The = symbol is so that Access knows that what follows is a function or an expression that needs to be calculated.

Now we will remove label as we do not need it and it only burdens our forms more.

6 Click on the label.

7 Press the Del key.

Now we will change the control size.

1 Click on the control that we have created so that it stands out.

2 Move the cursor over the size controller to the right of the control untill the cursor takes the form.

3 Maintaing the mouse button depressed, drag it to the right, you are now extending the control.

4 Try the same with other size controllers until the field is the size you want.

We are now going to remove a control, we will remove the Course field

1 Click on the control corresponding the course field, it will remain selected.

2 Press the Del key. The control and its label will disappear.

We will now add a combo box to introduce the course code by means of a drop down list, and in order to be able to select the course by name even though we will save course code in the Students table and not the name.

1 Make sure that the control wizard button in the Toolbox is activated (a dark line should appear around it and it has a different background color) If not, click on the button and it will appear activated.

2 Click on the button .

3 Position the cursor in the area where we want to create the control, and then click and go drag the control to the correct size. As we have the control wizard button activated the wizards window will open.

4 Select the I want the combo box to look up the values in a table or query option.

5 Click on the Next button.

6 Select the Courses table as we want all the courses created in this table to appear in the list.

7 Click on the Next button, the next window will open.

We are going to select three fields: Course Code, Course Name, and Hours.

8 Select Course code and click on the button and the field will be sent to the right.

9 Click on the button and the Course Name field will be sent to the right.

10 Clic again on the button to send the Hours field as well.

11 Click on the Next button.

In the next window we can order the list.

12 Select Course Name from the first box

13 Click on the Next button.

In the next window we can vary the width of the columns in the list. In the list you may see various columns, but when we select a row from the list we can only collect the value of one column, this is the key column. In our example we want the Course Name and the Hours to appear so that it will be easier for the user to select the course, but it will only collect the course code in order to place it in the Course or Students field and so the Course code is the key column.

14 Uncheck Hide key column option. We see how the Course code column appears. And then check it again.

15 Make the Course name column wider, and make the Hours column narrower.

16 Click on the Next button.

17 Select Course Code

18 Check Store that value in this field: option.

19 Select the Course field from the drop down list that appears to the right of the option. In this way when a user selects a row from the list, the course code corresponding this list will be stored in the Course field of the Students table.

20 Click on the Next button.

21 Change the name of the label if you want.

22 Click on the Finish button.

We see the result.

23 Click on the button to go to form view and see the result.

24 Assign the course codes seen below to the students.

Observe how when we are in the combo box we can drop down the list and select the course or begin to type the name of the course and the first course that corresponds the first three letters written will appear.

Notice how it is missing a header in the combo box, we will now add it.

1 Return to design view by clicking on the button on the toolbar.

2 Select the combo box by clicking on it.

3 Open the Properties box by clicking on the button on the toolbar.

4 Look for the Column Heads property and put Yes by for example double clicking on it.

5 Click on the button to go to form view and see the result.

6 Drop down the combo box and observe how a header now appears with the names of the fields that form the columns.

We are going to add a list box control to the Course field to see the difference between the list box and a combo box.

1 Make sure that the control wizard button in the Toolbox is activated (a dark line should appear around it) If not, click on the button and it will appear activated.

2 Click on the button.

3 Position the cursor in the area that we want to move the control to, and without letting go drag the control to the correct size, then let go of the button. As we have the control wizard button activated the wizard's window will open.

4 Select the I want the list box to look up the values in a table or query.

5 Click on the Next button.

6 Select the Courses table as we want all the courses created in this table to appear in the list.

7 Click on the Next button, the next window will open.

We are going to select three fields:Course Code, Course Name, and Hours.

8 Select Course code and click on the button and the field will be sent to the right.

9 Click on the button and the Course Name field will be sent to the right.

10 Clic again on the button to send the Hours field as well.

11 Click on the Next button.

In the next window we can order the list.

12 Select Course Name from the first box

13 Click on the Next button.

In the next window we can vary the width of the columns in the list. In the list you may see various columns, but when we select a row from the list we can only collect the value of one column, this is the key column. In our example we want the Course Name and the Hours to appear so that it will be easier for the user to select the course, but it will only collect the course code in order to place it in the Course or Students field and so the Course code is the key column.

14 Make the Course Name column wider, and make the Hours column narrower.

15 Click on the Next button.

16 Check Store that value in this field: option.

17 Select the Course field from the drop down list that appears to the right of the option. In this way when a user selects a row from the list, the course code corresponding this list will be stored in the Course field of the Students table.

18 Click on the Next button.

19 Change the name of the label if you want.

20 Click on the Finish button.

You will have seen how the list box is created in almost the same way as a combo box. Now observe the result.

21 Click on the button to go to form view and see the result.

22 Assign the course codes seen below to the students now using the list box. If the list box is too small, return to the Design view and make the list box Higher.

23 Close the form saving changes.

Finally we will practice the Autoformat option.

We have two forms, one created in Standard style and the other in Industrial style. This is not very recommendable in an application as the screens should be homogeneous, and so we will leave both styles as Industrial.

1 Position yourself in the design view of the Students Columnar form if you are not already there.

2 Click on the top left corner of the design area to select the form.

3 Click on the Autoformat button.

4 Select the Industrial style from the list.

5 Click on the OK button. This is how easy it is to change the style of a form.

6 Close the form saving changes.