WebFOCUS Maintain – Enhancing Objects with JavaScript

1. WebFOCUS Maintain – Enhancing Objects with JavaScript Mark Derwin Information Builders Information Builders Summit 2009 User Conference June 10, 2009

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.

3. Adding an Update Flag

4. WebFOCUS Maintain – Enhancing Objects with JavaScript Adding an Update Flag

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 >

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

22. WebFOCUS Maintain – Enhancing Objects with JavaScript Adding an Update Flag

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.

24. Adding Validation

25. WebFOCUS Maintain – Enhancing Objects with JavaScript Cell Validation

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.

27. WebFOCUS Maintain – Enhancing Objects with JavaScript Cell Validation • Open the ‘Other’ folder. • Right-mouse click on checkVal.js and select Add to Project.

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.

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.

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

31. WebFOCUS Maintain – Enhancing Objects with JavaScript Cell Validation • Save. • Right-mouse click lab1 and Run.

32. Homework – Drop Down Lists

33. WebFOCUS Maintain – Enhancing Objects with JavaScript Drop Down Lists

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.

35. WebFOCUS Maintain – Enhancing Objects with JavaScript Drop Down Lists

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.

37. WebFOCUS Maintain – Enhancing Objects with JavaScript Drop Down Lists