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

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

3. Copyright 2007, Information Builders. Slide 3 Adding an Update Flag

4. Copyright 2007, Information Builders. Slide 4 WebFOCUS Maintain – Enhancing Objects with JavaScript Adding an Update Flag

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

22. Copyright 2007, Information Builders. Slide 22 WebFOCUS Maintain – Enhancing Objects with JavaScript Adding an Update Flag

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

24. Copyright 2007, Information Builders. Slide 24 Adding Validation

25. Copyright 2007, Information Builders. Slide 25 WebFOCUS Maintain – Enhancing Objects with JavaScript Cell Validation

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

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

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

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

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

31. Copyright 2007, Information Builders. Slide 31 WebFOCUS Maintain – Enhancing Objects with JavaScript Cell Validation  Save.  Right-mouse click lab1 and Run.

32. Copyright 2007, Information Builders. Slide 32 Homework – Drop Down Lists

33. Copyright 2007, Information Builders. Slide 33 WebFOCUS Maintain – Enhancing Objects with JavaScript Drop Down Lists

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

35. Copyright 2007, Information Builders. Slide 35 WebFOCUS Maintain – Enhancing Objects with JavaScript Drop Down Lists

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

37. Copyright 2007, Information Builders. Slide 37 WebFOCUS Maintain – Enhancing Objects with JavaScript Drop Down Lists