Copyright 2007, Information Builders. Slide 1 WebFOCUS Maintain – Enhancing Objects with...

Copyright 2007, Information Builders. Slide 1

WebFOCUS Maintain – Enhancing Objects with JavaScript

Mark DerwinInformation Builders

Information Builders Summit 2009 User Conference

June 10, 2009


Presentation Information

Author: Mark DerwinCompany: Information BuildersPresentation Title: WebFOCUS Maintain – Enhancing

Objects with JavaScript Presentation Abstract: This hands-on lab shows the user

how to use JavaScript to enhance Maintain objects like the Grid.


Adding an Update Flag


WebFOCUS Maintain – Enhancing Objects with JavaScript Adding an Update Flag


WebFOCUS Maintain – Enhancing Objects with JavaScript Creating a New Project

Right-click on Projects on localhost and select New Project… Enter Maintain09 and Click Next >



The Movies Master and FOCUS files are already included in this directory so we don’t need to add any files.

Click Finish.



Double click on the Master Files folder under Maintain09 to display Master and FOCUS files.

Highlight Movies.foc and Movies.Mas. Click on the Icon with the + to include to files into the project.



Right-click on the Maintain Files Folder and select New > Select Maintain Procedure.

Name it lab1 and click Open.


WebFOCUS Maintain – Enhancing Objects with JavaScript Inside the MDE

MAINTAIN – All Maintains start with the word MAINTAIN in upper case. END – All Maintains end with the word END in upper case. All other commands can be mixed case. Use -*, $$, $* *$ for comments.


WebFOCUS Maintain – Enhancing Objects with JavaScript Adding a Data Source

Right-click on lab1 and select Use data sources… Double-click on movies to move it from Available data to Data sources to use.

You can use up to 15 data sources per procedure. Click OK. Notice that the MAINTAIN command line now contains the file name.


WebFOCUS Maintain – Enhancing Objects with JavaScript Loading the Stack

A stack is an array containing database and / or computed fields. Columns are fields and rows are data. Reads Master File to know field names, formats, lengths and position.

Load up a stack with the NEXT command. We are loading 10 records into a stack named STK and creating a

computed field named flag. Click Save.


WebFOCUS Maintain – Enhancing Objects with JavaScript Creating a Form

Expand the lab1 folder. Expand the Forms folder. Double-click on Form1 to display the form. Maximize the form.



Select the Grid object from the Control Palette. Click on the upper left corner of the form, drag the cursor to the lower right

side of the form to create a rectangle. Select Stk and move over: Moviecode, Title, Category and Flag.



Double-click Moviecode and click Read Only.

We can’t update the key. If we were doing Include then we would

not protect it. Click OK and repeat the action for the

Flag column. Click OK to return to the form.


WebFOCUS Maintain – Enhancing Objects with JavaScript Running the Application

Save and Run. Right-click on lab1 and select Run Procedure. Once Deployment is successful, click Close.


WebFOCUS Maintain – Enhancing Objects with JavaScript Running the Application

Click X to return to the MDE. Double-click on Form1 to display the form if it is not displayed. Click on the Grid to display Properties and Events.


WebFOCUS Maintain – Enhancing Objects with JavaScript Adding an Event

Every object, including the form, has Properties and Events.

Events determine when happens when an object is displayed, gets or loses focus, or when a user performs an action.

Since we want to create an Update Flag, click in the space next to OnCellChanged.

The Events page opens. OnCellChange is when the cursor moves.


WebFOCUS Maintain – Enhancing Objects with JavaScript Adding an Event

Events can be: Maintain procedures, JavaScripts, VB Scripts, URLs or system

actions We want JavaScript for this Event, so click the J Scroll. Make sure the object is Grid1 and the action is OnCellChanged. Our code makes sure we aren’t in the Flag column, sets the value to “Y”

and redraws the cell.


WebFOCUS Maintain – Enhancing Objects with JavaScript Adding a Case

Double-click on lab1 to display the code. Enter the case Updater to update the database. Create stk2 and copy only the updated records into it. Update the database from stk2.


WebFOCUS Maintain – Enhancing Objects with JavaScript Adding a Button

Double-click on Form1 to display the form. Select the Button object from the Control Palette. Draw a rectangle under the grid and change the text to update. On the Button’s Events list, click on the space next to Click.


WebFOCUS Maintain – Enhancing Objects with JavaScript Assigning a Function

Make sure Button1 and Click and displayed. Adding Maintain function so do not change selection. Drag and drop Updater from Project Explorer into Case. Save and Run.


WebFOCUS Maintain – Enhancing Objects with JavaScript Adding an Update Flag


WebFOCUS Maintain – Enhancing Objects with JavaScript One Click Edit

Click on the X to re-display the MDE. Click on Form1 and Click on the Grid to display Properties / Events. Click on the space next to Focus and the Events form opens. Add a JavaScript function for Grid1 Focus so edit is only 1 click. Save and Run.


Adding Validation


WebFOCUS Maintain – Enhancing Objects with JavaScript Cell Validation



Click on Form1 to redisplay the form. We want to embed the checkVal.js file onto the form. Click on Window and Select Exploring – Developer Studio Desktop.



Open the ‘Other’ folder. Right-mouse click on checkVal.js and select Add to Project.



Reduce the size of the Developer Studio Desktop window so both it and the form are displayed.

Drag the checkVal.js file onto the form and select Embed Script. Expand the + next to Form1 and the file name should be displayed.



Click checkVal to display the JavaScript file. The OK list can be changed depending on your needs. Click on Form1 to redisplay the form.



Click on the Grid and select OnEditFinish from the Events list. Click on the the J Scroll and enter the validation code. SetCancelFlag can be 0 (No action), 1 (re-entry), 2 (prevent entry).



Save. Right-mouse click lab1 and Run.


Homework – Drop Down Lists


WebFOCUS Maintain – Enhancing Objects with JavaScript Drop Down Lists



Double-click on the Grid and add Rating to the columns. Expand the width of the Grid to display the field. Click on the OnRowChange event to open the events screen.



Create a static list of values using \n as a line break. List can also be dynamic and come from a field on the form.QuickSetCellType tells Maintain this cell is a list.QuickSetLabel assigns the list to the cell.Add code to Focus trigger as well.Have to remove StartEdit command.Save and Run.

Copyright 2007, Information Builders. Slide 1 WebFOCUS Maintain – Enhancing Objects with...

Documents

Transcript of Copyright 2007, Information Builders. Slide 1 WebFOCUS Maintain – Enhancing Objects with...