Data access pages are based on Microsoft's DHTML and therefore can greatly benefit by using the support of scripting. Using JavaScript would be ideal for those versed in JavaScript. Microsoft's JScript or VbScript can also be used for intranet applications. However, since Data Access Pages are Microsoft specific, any of these technologies can be used. The scripting gets you one up on what can be achieved by the designer alone. Microsoft Script Editor comes in extremely handy for interactive design of data access pages which present a web window for your company's data. This series of articles will present tutorials that will prepare the reader to experiment and use scripting support for their Data Access Pages.
What is this tutorial about?
This tutorial will show you a step by step method for getting acquainted with this most helpful tool, the Microsoft Script Editor. I assume you have some JavaScript/VbScript programming experience. However, I've written the article for the not so experienced beginner. I will not cover Microsoft Office web components.
Microsoft Script Editor
What is the Microsoft Script Editor? Well, it edits scripts for various Office applications from within the Office application. This is true for all Office products except Microsoft Outlook, which has its own script editor. How do you find it? And how do you use it? That's the content of this tutorial and the next.
An earlier tutorial showed you how to create a data access page from scratch. The emphasis in this tutorial is different. Open the MS Access program from Start -->All Programs. In MS Access click on File-->New. In the New File Window click on the Blank data access page...link. Since a DAP is used for data access, the Select Data Source Window will open, showing existing data sources. There are a couple of sources in this window, as shown in Fig.1.
Fig.1
Since you will be creating a new page, click on the New Source... button. This will take you to the Welcome to the Data Connection Wizard section of the Data Connection Wizard as shown in Fig.2. From here you can branch off to connect to an SQL Server (even MSDE should be fine), or other types of sources. Since this page will look for the Northwind.mdb, highlight Other/advanced and click Next>.
Fig.2
This will take you to the Data Link Properties window with the Provider tab in view as in Fig.3. Highlight Microsoft Jet 4.0 OLE DB Provider and then click Next>>. You only need to interact with the Provider and Connection tabs.
Fig.3
Click on theellipsis ... button referenced by the Select or enter database name: label and browse to the sample Northwind.mdb file. This should be present in your Office folder. This will automatically fill in the other information. You may also test the connection as shown in Fig.4. Now you are set, since the connection is OK. Never mind the Japanese character in the image that has leaked in place of "/".
Fig.4
Clicking the OK button will take you to the Select Database and Table step (not shown here) of the Data Connection Wizard. It shows everything in that mdb file. Clicking Next will take you to the Save Data Connection and Finish step of the Data ConnectionWizard. Here you give a File Name: to the Data Connection. Here it is DAP101.odc as shown in Fig.5. Give some description, and some keywords for search. Click Finish.
Fig.5
Now your previous Select Data Source Window will appear with the DAP101.odc file as shown in Fig.6. Now click Open.
This will get you back to Microsoft Access with Page1: Data Access page. The gridded area is where you will be placing your data bound controls. These controls will be associated with the FieldList. In the main menu, View will give you access to the other important items like FieldList, HTML Source, Page View, and so on as shown in Fig.7.
Fig.7
For example, clicking View --> FieldList will open the field list as shown in Fig.8. Only a truncated portion of the queries is shown here. The Tables and the Queries contain the data and they can be dragged and dropped into the gridded area.
Fig.8
You may also drag and drop a subset of the columns of a table onto this area by individually clicking the column and dragging it into the gridded area. While dragging, a small icon will appear attached to the cursor and while dropped, the dropped area will get a blue outline. A dropped object can be deleted as well. However watch for the handles to appear and use cut from the main edit menu. If the dropped area has a hashed border there will be a different context menu. After dropping the object, if you right click the object, you could go on to many other options. However, this tutorial is not about a description and use of those options but laying a background to describe how you may script a DAP.
Fig.9
However since you will need objects on your Dap for which you can write a script, drag and drop a few columns from one of the tables as shown in the above screen. In the design view you should be able to use all the design utilities like Format as shown. Also the direction arrow keys with shift and control should manage the object size and positions. The Page1.htm needs to be saved before it can be previewed, or viewed in the browser. Let page1 be saved as DAP1.htm. It gets saved to the default directory C:My Documents. You may preview it after saving. We will be working with this in the next tutorial as well; therefore you might want to bookmark it so that you can go back to it.
From the main menu, you can access various items, one of which is the HTML Source as in Fig.7. This will open the page to show the complete HTML document behind the data access page as shown in Fig.10. It is too large to be shown in this format. Basically the data related information is all included in a DataSourceControl (MS Office DSO as an object); the style related to the various data bound objects; the data itself in a table format and other HTML Document information. Everything is written up in kosher XML. Also included is some standard validation for the page and the Office Web Components (we will not be discussing these as yet). Into this scripting environment you can add your own script depending on what you propose to do.
Fig. 10
Accessing the Microsoft Script Editor
The Microsoft Script Editor can be accessed from the toolbar menu by clicking on the indicated icon shown in Fig.11.
Fig.11
This will bring up the script editor with all the different windows as shown in Fig.12. This has the Document properties, the Document Outline which consists of client objects, events and scripts (you cannot see that in this figure because it has been cut off), the HTML source as well as the Project Explorer. Make sure you review this interface to note that all fields that you dragged on to the design page are there in client objects. In MS Access, textbox controls also come with a label control, so you have for example a City and a City_Label. Since the controls are data bound you have access to the methods of the navigational control as well. Of course you also meet the MSODSC (the DataSourceControl) mentioned earlier.
Fig.13 shows even more possibilities. For each of the objects, you can access all the associated events that you may ask them to do. You have complete flexibility to use DHTML to your hearts content.
Events raised by Client Objects Fig.13
Fig.14 shows the default client scripts that will be present in all data access pages as well as the Window object -- the container object. Sure enough you can access all events. The design of this interface has left very little that you can add to. Well, wait for the next article regarding the OWC.
Default Client Scripts and Window Object Fig.14
Fig. 15 shows how you may arrange to see the script. Now how do you access the code? It's easy. In the Microsoft Script Editor's page go to view and click on Show Script Only... and you will see the script as shown. When you choose any of the client object's events, for example, the click event to one of the command buttons, that code will be appended to the default template script shown here. I'll tell you more about it in the next tutorial.
Fig.15
Summary
This tutorial has detailed how to prepare to script a Data Access Page. The next tutorial will expand upon this tutorial and show how you may effectively script a page.