jBASE Web Builder Tutorial
Intro Step 1 Step 2 Step 3 Step 4 Step 5 Step 6 Step 7

Add a lookup facility

The application as it stands is useful only as long as the employee numbers of all employees are known by the user. The only way of retrieving a record at the moment is to enter exactly the right employee number and click on the Open button. It would be much more friendly to have a search field and a search button.

The best place for such a facility is probably above the Employee number field and all the buttons. To achieve this, a row needs to be inserted above those Objects.

jBASE Web Builder provides special Construction Rivets to Insert and Delete rows and columns. These are located along the top of the Preview Pane for Columns, and down the left hand side of the Preview Pane for rows. The insert Rivets are the ones which look like Carets ("^") and the delete rivets are those that look like "X"s.

Find the insert row rivet in the cell to the left of the Employee number label. Click on the Caret to insert a row above the Employee number label.

Then add a Label above the Employee number label with the Text property set to Search for. Add a Textbox to the right of the Search for label and set the Datafield Property to named,txtSearch. By setting the Datafield Property to a Named value, it means that it is not mapped to a particular attribute in the file, but instead has a name of whatever follows the comma.

Then add a button to the right of the Search Textbox. Give the button a caption of Search, a Button type of Button, and a Trigger type of Refresh. Scroll down to the Click event property and enter the following text:

S = escape(document.forms[0].txtSearch.value);
url = '{{url||page||lookup}}&searchfor=' + S;

It may be helpful to open a larger window to enter this text by clicking on the button showing ellipses "" next door to the Click Event Property.

The code that has just been typed in is written in Javascript. The first line gets the value from the search Textbox and stores it in a variable called "S". The second line constructs the URL of a page concatenated with the variable and stores it in a variable called "url". The third line will open up a new window to display the page located at the URL.

The "url" is formed by use of a DIRT tag. A DIRT tag is a useful mechanism to allow macro replacement within jBASE Web Builder. The url DIRT tag is a macro which takes two parameters. The first parameter is either page or routine to determine which type of Object the url is for, and the second parameter is to tell jBASE Web Builder the name of the Page or Routine.

There is no page in the application called "lookup", it has yet to be added. Back at the jBASE Web Builder main menu, bring up the list of Page Objects in the application by clicking on the HTML Pages menu option underneath the Tutorial module.

Click the large button marked Add a New object to this grouping. At the prompt, enter the name lookup, and click the OK button. A new window should appear to allow editing of the new Page Object.

In the Page Properties, find the Pre Page Routine Property. Type in the word prelookup, and click on the Update button at the top of the Properties Pane. Then click on the ellipses ("") next to the Pre Page Routine Property. An empty editor window should display. Enter the following code:

SUB prelookup(html)
INCLUDE sysbp syscommon
CALL sysopen("ADDRESS",addr,html)
LOCATE("searchfor",sysquery,1;pos) THEN
s = sysquery<2,pos>
s = ""
cnt = 0
sysdata = ""
READ rec FROM addr,id ELSE rec = ""
IF s <> "" THEN found = 0
IF INDEX(OCONV(id,"MCL"),s,1) > 0 THEN found = 1
IF INDEX(OCONV(rec,"MCL"),s,1) > 0 THEN found = 1
IF s = "" THEN found = 1
sysdata<1,cnt> = id
sysdata<2,cnt> = rec<1>

Click on the Update and Compile button at the top of the editing window. If the routine has been typed in correctly, this message box should appear. Close the editing window by either clicking on the "X" button in the top right of the screen, or by clicking on the button marked "close" in the top left.

Locate the button in the Palette Pane for an Object reference, the button that looks like an X and shows a tooltip of (sysobject) Object link. Add an Object reference to the page, change the Object Property to be tabLookup, and click on the Update button. Click on the Edit Object button, and a new window should open showing the tabLookup Object.

Add two labels to the table as indicated.

Then add a label beneath the Employee Number label, change the text to read '{{variable||sysdata||1.x}}' and change the dependent field Property to be 1. Click on the update button to apply the changes.

Add another label beneath the Employee Name label, change the text to read '{{variable||sysdata||2.x}}' and change the dependent field Property to be 1. Click on the update button to apply the changes.

Add another button to the left of the two labels which have just been added. Change the caption of the button to "", and change the dependent field property to 1. Find the Click event, and type the following code in:


The first line of this Javascript code takes the value selected by the User and places it back on the original Address Page. It does this by the use of a variable DIRT tag. The last two lines then tell the Address Page to call the sysfileopen subroutine.

If the Address screen is now previewed, and the user enters any text in the Search for field, pressing the Search button should produce a list of all records within the ADDRESS file which contain any of the text. If the user then clicks on one of the entries, they are then returned to the original Address Page loaded with the details of the record chosen.