WebFOCUS Maintain – Enhancing Objects with JavaScript

tacitmarigoldInternet and Web Development

Jan 25, 2014 (3 years and 9 months ago)

798 views

Copyright 2007, Information Builders. Slide
1

WebFOCUS Maintain


Enhancing Objects
with JavaScript

Mark Derwin

Information Builders

Information Builders Summit 2009 User Conference

June 10, 2009

Copyright 2007, Information Builders. Slide
2

Presentation Information



Author:

Mark Derwin


Company:

Information Builders


Presentation 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.


Copyright 2007, Information Builders. Slide
3

Adding an Update Flag

Copyright 2007, Information Builders. Slide
4

WebFOCUS Maintain


Enhancing Objects with JavaScript

Adding an Update Flag

Copyright 2007, Information Builders. Slide
5

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 >

Copyright 2007, Information Builders. Slide
6

WebFOCUS Maintain


Enhancing Objects with JavaScript

Creating a New Project


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


Click Finish.

Copyright 2007, Information Builders. Slide
7

WebFOCUS Maintain


Enhancing Objects with JavaScript

Creating a New Project


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.

Copyright 2007, Information Builders. Slide
8

WebFOCUS Maintain


Enhancing Objects with JavaScript

Creating a New Project


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


Select Maintain Procedure.


Name it lab1 and click Open.

Copyright 2007, Information Builders. Slide
9

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.

Copyright 2007, Information Builders. Slide
10

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.

Copyright 2007, Information Builders. Slide
11

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.


Copyright 2007, Information Builders. Slide
12

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.

Copyright 2007, Information Builders. Slide
13

WebFOCUS Maintain


Enhancing Objects with JavaScript

Creating a 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.

Copyright 2007, Information Builders. Slide
14

WebFOCUS Maintain


Enhancing Objects with JavaScript


Creating a Form


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.

Copyright 2007, Information Builders. Slide
15

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.

Copyright 2007, Information Builders. Slide
16

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.

Copyright 2007, Information Builders. Slide
17

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.

Copyright 2007, Information Builders. Slide
18

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.

Copyright 2007, Information Builders. Slide
19

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.

Copyright 2007, Information Builders. Slide
20

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.


Copyright 2007, Information Builders. Slide
21

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.

Copyright 2007, Information Builders. Slide
22

WebFOCUS Maintain


Enhancing Objects with JavaScript

Adding an Update Flag

Copyright 2007, Information Builders. Slide
23

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.

Copyright 2007, Information Builders. Slide
24

Adding Validation

Copyright 2007, Information Builders. Slide
25

WebFOCUS Maintain


Enhancing Objects with JavaScript

Cell Validation

Copyright 2007, Information Builders. Slide
26

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.

Copyright 2007, Information Builders. Slide
27

WebFOCUS Maintain


Enhancing Objects with JavaScript

Cell Validation


Open the ‘Other’ folder.


Right
-
mouse click on checkVal.js and select Add to Project.

Copyright 2007, Information Builders. Slide
28

WebFOCUS Maintain


Enhancing Objects with JavaScript

Cell Validation


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.

Copyright 2007, Information Builders. Slide
29

WebFOCUS Maintain


Enhancing Objects with JavaScript

Cell Validation


Click checkVal to display the JavaScript file.


The OK list can be changed depending on your needs.


Click on Form1 to redisplay the form.

Copyright 2007, Information Builders. Slide
30

WebFOCUS Maintain


Enhancing Objects with JavaScript

Cell Validation


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).

Copyright 2007, Information Builders. Slide
31

WebFOCUS Maintain


Enhancing Objects with JavaScript

Cell Validation


Save.


Right
-
mouse click lab1 and Run.

Copyright 2007, Information Builders. Slide
32

Homework


Drop Down Lists

Copyright 2007, Information Builders. Slide
33

WebFOCUS Maintain


Enhancing Objects with JavaScript

Drop Down Lists

Copyright 2007, Information Builders. Slide
34

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.

Copyright 2007, Information Builders. Slide
35

WebFOCUS Maintain


Enhancing Objects with JavaScript

Drop Down Lists

Copyright 2007, Information Builders. Slide
36

WebFOCUS Maintain


Enhancing Objects with JavaScript

Drop Down Lists


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
37

WebFOCUS Maintain


Enhancing Objects with JavaScript

Drop Down Lists