Save content
Have you found this content useful? Use the button above to save it to your profile.
AIA

Adobe Designer step by step: Create a simple timesheet, Part I

by
26th Jul 2006
Save content
Have you found this content useful? Use the button above to save it to your profile.

Firms ranging from accountancy practices to recruitment agencies and engineering offices use timesheets. Many of these remain paper-based, or are stored electronically as Excel spreadsheets.

Wouldn't it be great if you could turn these documents into a paperless, online data collection mechanism? As we have already mentioned in the PDF and Acrobat Zone, this is one of the strengths of Adobe Designer.

"Accountants will automatically reach for Excel to create forms, where other people might reach for Microsoft Word or a DTP application," says Adobe Acrobat trainer Ian Campbell of IPPS. "But even if you want to create a form that is just going to be filled in on paper, I would contend that Adobe Designer Forms is easier to use, because it uses drag and drop objects.

"Once you understand how to modify one object, you can copy and use it to do the next one. If you've got 15 minutes, will be amazed how easy it is."

As an introduction to form design, this step-by-step guide is going to stick to the basics and help you create a simple timesheet in 15 minutes.

The 15-minute timesheet challenge
Actually, you can create a typical PDF timesheet in seconds by picking a readymade template from Designer's QuickStart menu. But that would be cheating. If you really want to understand how Adobe Designer works, it's best to start from scratch. This step-by-step exercise should equip you with basic form design concepts that you can apply to other forms you encounter.

In one of his early experiments with Adobe Acrobat, Simon Hurst imported a file from Word to create his first electronic form. It can often be easier to simply create a form from scratch in Adobe Designer, Campbell suggests.You may encounter dialogue boxes warning you about minor problems with mismatching fonts, or more significantly, you can find that the importing process breaks the components into form objects that you wouldn't expect - such as two elements of a decimalised number appearing as different objects.

Borrowing a typical timesheet as our inspiration (see below), we are presented with four introductory text elements: name; job title; the supervising manager; and a week-ending date. Below that is a 7-day grid with boxes for entering the date, start and finish times, breaks taken, total hours worked, plus boxes for the normal hourly requirement per day and overtime hours. The hours worked during the week are totalled at the bottom of the form.

For this introductory tutorial, we will just create and position the main form elements. Next week, we'll add more sophisticated functions such as calculation formulae and data export options.

While relatively simple, the form includes a date box that can be completed with a calendar selection option and the number of normal and overtime hours worked can be controlled by a mathematical formula to prevent errors.

1. Open a new form
To get started, choose the Create New Form option from the Advanced-Forms menu. The program will tell you it is opening Adobe Designer and then present you with the New Form Assistant dialogue box. Select the New Blank Form option to start from scratch.

The form wizard includes four steps to prompt you about the layout (eg portrait/landscape) and "return method" - whether you just want to create an "unfillable" form to print out and complete by pen, or options to fill then print or fill/submit. Choose the top option Fill then Submit/Print to create a form that can be completed on screen. The New Forms Assistant will then ask you to enter an email address to receive the data entered.

When you see the blank form within the full Designer screen, Ian Campbell suggests it's a good idea to save your form (File-Save or Ctrl-S). The Save dialogue will present you with several options: the Save as Type menu defaults to Static PDF Form File, which is the best choice for our timesheet and tick the Embed fonts box at the bottom of the command box.

2. A word about palettes
The right- and left-hand sides of the Designer screen are occupied by a collection of palettes that you will use to construct the form. If they are not visible when you open the program, you can find them via the Windows-Manage Palettes menu option or by clicking on the short blue lines in the middle of the vertical frames on each side of the application window.

You can close or move the palettes between the two sides of the window as you wish, but to start with you should see the Library and Object palettes on the right and the Hierarchy and Report palettes on the left. This is what each palette does:

Library
The Standard tab within the Library palette (right) contains a selection of form components that you can drag from the palette onto the form design area. Use the Text object to enter instructions or other explanatory material, while Text Field will give you a data entry window with a descriptive label. Other options that will appear on our timesheet include Numeric field and Date/Time field. Other objects such as Print, Submit, Check Box and Drop-Down list are self-explanatory and may crop up in future tutorials.

The Custom tab acts as a store for any form objects that you want to save for future use. If you or a specialist form designer has created something like a credit card payment form or a complex company logo, drag the group of objects into the Custom area and it will be available to you or any other user on your office network.

Barcodes contains a library of bar codes standard and automatic calculation routines will convert the text entered into the field into its equivalent barcode.

Below these three palettes on the right you will find the Object palette. This contains three tab sections: Field, Value and Binding. Field gives you control over the type of field object you choose and its appearance. Value lets you set parameters (for example making a field required/optional for entering data). Binding includes a Name option to identify each field and controls for the data entered.

While the right-hand palettes store and define the objects you place on the form, the left-hand palettes are more descriptive. Hierarchy displays the form and the objects within it as a schematic tree. The Report palette provides a commentary. The Warnings tab alerts you if there is an anomaly within your form or if there is a connection to a database field. Once you get used to what these palettes do, you can explore other options under the main Window menu.

3. Laying out the timesheet
That's the theory. To get down to business, click on the Text Field object in the Standard section of the Library palette and drag it to a position near the top of the blank form. Two linked boxes will appear on the form, but they may not be of the required size. Clicking one of the dark square boxes on each corner or midline of the box allows you to stretch or shrink the field horizontally and vertically to occupy the space you want. You can also click on the vertical orange line and move it left or right to alter the width of the data entry zone.

At this point, the legend 'TextField' is shown next to the data entry box on the form. Highlight this text with the cursor and change it to 'Name'.

If you click the Field tab on the Object palette, the Type box will indicate you have selected a Text Field. Below is a pull-down menu box called Appearance, which offers different text box options. Choose Sunken Box.

Then click the Value tab and choose Recommended. This won't prevent someone from submitting an incomplete report, but will generate a prompt to remind them to fill the field out if they leave it blank. Over on the Hierarchy list (top left of the screen) TextField1 will be displayed appear in the subform hierarchy. Once we add new text fields, it may get confusing if they are all have the same name. Since the first field we created was the Name box, select TextField1 in the Hierarch to activate the Bindings tab within the Object palette on the right-hand side of the screen. Change the Binding label to TxtName and follow a similar convention when adding new fields.

From this point, creating the other three text entry fields is easy. With the Name text field still selected, choose Edit-Duplicate from the main menu bar (or Ctl-D on the keyboard). The new box may overlap the first one, so move it to a satisfying position just below the first Name box. When you click Ctl+D again, the next box appears an equal distance below the second field.

All of the new fields will be called TxtName, each with a different number in brackets beside it. Click the second text field on the form and type 'Job Title' over name. Then select the Binding tab under the Object palette and change the Binding name to TxtJobTitle. Repeat the process for the third box, Reporting To (Binding: TxtReportingTo).

With the Week Ending box, we can help users complete the form by specifying a Date/Time box that includes a built-in calendar from which they can pick a date. When you have dragged the Date/Time field on to the form, change the label to Week ending and the Binding to DatWeekEnding or something similar (NB: it's worth using a simple convention to differentiate Txt/Dat/Fld fields as these will help you manage the form hierarchy later on).

4. PDF Preview
So far, so good. We've created the main identifying fields and at this point you might want to see what it looks like so far. At the very top of the central Form Designer page are two tabs. The first one Body Pages is the main form design area in which we have been working. The second tab PDF Preview does what it suggests. Click this tab to see how the form would look to someone using it.

5. Add Text and Image fields
Having placed the basic identifying fields in the upper part of the page, we need to make space for a company logo above it. Position the pointer (white arrow icon) above and to the left of the four text fields, left-click and pull the cursor down and to the right to lasso the fields we have already created. Then pull down on one of the selected objects (indicated by highlighted borders and square corner boxes) to reposition the entire group. Or you can use the down arrow for more precise movements.

A logo can be insterted by dragging an Image object from the Object palette into postion on the form and then clicking the icon to the right of the URL box to select an image from a file or website. We also placed a Text object at the top of the form and filled it with a large 20pt bold legend "Weekly Timesheet" so our users will know what the form is for.

There are two areas of explanatory text that we have not yet added to the timesheet - in the legend above the calculation grid and day labels for each line. We'll add these once we've tackled the calculation grid in next week's step-by-step Acrobat tutorial.

Tags:

Replies (1)

Please login or register to join the discussion.

avatar
By listerramjet
01st Aug 2006 13:09

sounds like a lot of fun
but for little tangible benefit, and a licence is going to cost me $450.

what about getting the data out of the timesheet at the other end of the process?

how about if I want to validate entries against standard lists?

Thanks (0)