Lab 9 – User Forms Design

User Forms What are user forms? –Known as dialog boxes –Major ways for getting user input An example of using user forms: Monthly Sales Application (Chapter 12, p. 188) A company has stores in three regions with each region selling different set of products. This application mainly focuses on summarizing the sales for a particular product in a particular region (based on the user’s choices).

Example: Monthly Sales Application An explanation sheet summarizes what an application is about and how it works. It is good for every application to have such kind of explanation sheet at the beginning to tell users what it is about The button on this sheet is attached to a macro that runs the application.

How to Create Your Own User Forms Design the user form to have desired functionality and look attractive (first part) Make the designed user form functional: write event handler code or event code (VBA code) to respond to users’ actions (second part) For example, in the previous Monthly Sales application, if a user clicks on the OK button (this is an event), certain actions should occur – the users’ inputs should be captured in some way, the dialog box (or the user form) should disappear, etc. Such actions should be fulfilled through code (event code).

Designing User Forms Major things you need to know: –What are controls – Objects with certain properties and methods –Which controls (also called ActiveX controls) are available –How to place, resize, and line up controls on a user form –How to specify or change controls’ properties in the Properties window (in VBE)

To Start … First, open a new workbook in EXCEL, get into the VBE, and make sure you can see Project Explorer and Property windows (Go to View menu item to open them) Select the current project, then use Insert\ UserForm to create a blank user form.

Available Controls The available controls are those shown in the Toolbox. The arrow at the top left is used only for pointing Each of the rest, starting with the letter “A”, has a name (from the left to right, top to bottom): First row: Label, Textbox, ComboBox, ListBox Second row: CheckBox, OptionButton, ToggleButton, Frame, CommandButton Third row: TabStrip, MultiPage, ScrollBar, SpinButton, Image Fourth row: RefEdit (highlight a worksheet range)

Introduction to Major Controls CommandButton – used to run subs (the user clicks on a button and a sub runs) Label – used mainly for explanation and prompts TextBox – used to obtain any type of user input (the user types something in the box) ListBox – used to let the user choose one or more items from a list ComboBox – similar to a list box, except that the user can type an item that isn’t on the list in a box CheckBox – used to let the user check whether an option is desired or not (any or all of a set of check boxes can be checked) OptionButton – used to let the user check which of several options is desired (only one of a set of option buttons can be checked) Frame – usually used to group a related set of options buttons, but can be used to organize any set of controls into logical groups Note: if you need description about other controls, you can check them in the MSForms library in VBE Object Browser

Exercise - Design a User Form In the following, we will design a user form in order to understand how to place, resize, and line up controls on a user form and how to specify or change controls’ properties in the Properties window The resulting user form should look similar to the figure on the right.

Exercise Step 1: Adding Controls to a User Form First, enlarge the user form Click on a control in the Toolbox and then drag and shape it on the form After you add a number of controls, you can select a group of controls (by dragging the mouse over them) and right click on them (or use the Format menu item) to align and resize the controls Step 1.1: Add an explanation label on the top of the user form Step 1.2: Add two command buttons at the top right (“Submit” and “Cancel”) - Press the Ctrl key for copying

Exercise Step 1: Adding Controls to a User Form Step 1.3: Add 2 text boxes and their corresponding labels (which act as prompts for what the user should enter in the box.) Step 1.4: Add a frame and then add 2 option buttons within it Step 1.5: Copy the frame to its right and add 2 more option buttons within the group Step 1.6: Add another frame at the bottom and 4 Check boxes within it Step 1.7: Add a list box to the right of the frame and its corresponding label Step 1.8: resize and align the controls to make them look nicer Now time to make changes to the properties of these control objects …

Control Properties Major properties of user forms and controls –Name property Assigns a name to an object Used by the programmer to refer to an object in VBA code A name can contain letters, numbers, and the underscore character only, must begin with a letter, and must not exceed 40 characters –Caption property Controls what the user sees on screen Usually, you need to change the Name and Caption properties of user forms and some controls. As to other properties of different objects, whether to change them or not depends on the type of object, the application, and the developer’s preferences. To set properties of a control, you need to select the control first, then the Properties window will show the properties for this control. Now, let’s go back to the exercise …

Exercise Step 2: Setting Properties of the Controls Change the user form Name property to “InputsForm” and its Caption property as “Student Record” Top command button: change its Name property to SubmitButton, change its Caption Property to Submit, and change its Default property to True – this gives the Submit button the functionality you expect once the form is operational, so that you can click on it or press the Enter key to do the same thing Bottom command button: change its Name property to CancelButton, change its Caption Property to Cancel, and change its Cancel Property to True – to allow a user to press the Esc key instead of clicking on the Cancel button Top label: click on the label and change the Caption Property (“This user form is for test purpose only.”)

Exercise Step 2: Setting Properties of the Controls Label2 & Label3: Change the Caption property to Name and GPA respectively Text boxes: change the Name property to NameBox and GPABox Frames: change Caption property to “Gender”, “Standings”, and “Hobby” respectively, and rename their Name property as “GenderFrame”, etc. Within the Gender frame: Option buttons: Change the Name properties of the option buttons into MaleOption and FemaleOption, and change their captions to Male and Female. Similarly, within the Standings frame, change Name and Caption properties of the other four option buttons into FreshmanOption, SophomoreOption, Freshman, Sophomore, etc.

Exercise Step 2: Setting Properties of the Controls Check boxes: Change the Name and Caption properties to SportsBox and Sports, MovieBox and Movie, etc List Box: change its Name property to CourseList. It does not have a Caption property, so add a label above it called “Courses Taken” MultiSelect property: –Default: 0-fmMultiSelectSingle (only one items could be selected) –2-fmMultiSelectExtended (more then one items could be selected) – Choose this one in this exercise Tab Order –To allow users to tab from one control to another by pressing the Tab key - change the TabIndex property of each control, starting with index 0 Any control with the TabStop property set to False cannot be tabbed to (e.g., Labels) For frames and its inside option buttons, tabs are set separately (also starting with index 0)

Exercise: Test the User Form Select the user form Run Sub/UserForm – Tab through the controls too Note that you can’t do anything further because the controls are not functional yet. Usually, when a dialog box pops up, it contains some default settings. To do this, we can initialize our user form. Continued…