1. Copyright 2007, Information Builders. Slide 1 Maintain & JavaScript: Two Great Tools that Work Great Together Mark Derwin and Mark Rawls Information Builders

2. Copyright 2007, Information Builders. Slide 2 Presentation Information  Author: Mark Derwin and Mark Rawls  Company: Information Builders  Presentation Title: Maintain & JavaScript: Two Great Tools that Work Great Together  Presentation Abstract: Maintain applications can be made more powerful and more efficient with the addition of simple JavaScript commands. This presentation shows how to incorporate JavaScript to speed up processing and response time.

3. Copyright 2007, Information Builders. Slide 3 Maintain & JavaScript Why Use JavaScript?  JavaScript can be used in a Maintain Application for:  Data Validation – Format, Length, Required Data  Informational Messages  Check for item selection  Limit Key Board function  Change Form Display  Scroll HTMLTables  Resize Grid columns  Change object color  Show or hide objects

4. Copyright 2007, Information Builders. Slide 4 Maintain & JavaScript Why Use JavaScript?  Most of these functions can also be done with Maintain code.  So, Why use JavaScript?  JavaScript commands are executed on the Web Server. Maintain commands are executed on the reporting / iWay server. Use JavaScript to save a trip to the server. Do validation and queries right in the browser.  However, JavaScript JUST operates on the form. JavaScript cannot operate on a stack or a stack value. We can get past this by placing values on a form with Maintain and using JavaScript to look at them and vice-versa.  All interaction takes place on the form!!

5. Copyright 2007, Information Builders. Slide 5 Maintain & JavaScript Simple Application  Double Click on MNTJava Folder  Double Click Maintain Folder  Right-Mouse Click on Lab1 and Run

6. Copyright 2007, Information Builders. Slide 6 Maintain & JavaScript Maintain Code for Lab1  Exit Application  Double-click on Lab1 to enter MDE  Top case loads stack and displays the form.  PrevRecord moves back one record  NextRecord moves ahead one record  Deleter removes a record  Updater saves changes to non-key fields

7. Copyright 2007, Information Builders. Slide 7 Maintain & JavaScript Maintain Triggers for Lab1  Pressing any of the buttons performs the code in the cases.  Right-Mouse click on Lab1  Do NOT do it now, but you can Run Procedure from here.

8. Copyright 2007, Information Builders. Slide 8 Maintain & JavaScript Checking for input  JavaScript can be used to:  Reference the value of the field:  document.formname.fieldname.value  Check the length of the field:  document.formname.fieldname.value.length  Position the cursor on a field:  document.formname.fieldname.focus();  Highlight the data in a field:  document.formname.fieldname.select();  Display an informational message:  alert(“Message”);

9. Copyright 2007, Information Builders. Slide 9 Maintain & JavaScript Checking for Input  Use JavaScript to make sure data entered for Title Field  Display form by clicking on Form1  Display triggers by clicking on  Or Select Form – Edit Event Handlers  Select Title_Edit / Blur  Click J on toolbar for JavaScript  Change code  Save and Run

10. Copyright 2007, Information Builders. Slide 10 Maintain & JavaScript Checking for Input  Leaving the Title field empty displays the error message  No change needed to be made to the maintain code for this to occur.

11. Copyright 2007, Information Builders. Slide 11 Maintain and JavaScript Confirm Action  The confirm command displays an OK or Cancel message  Use if and else logic to branch  The IWCTrigger command allows JavaScript to perform a Maintain case  Click on the form and select Event Handlers (Triggers)  Position the cursor on the DelRec_Click remove Perform Deleter  Click on the J to enter JavaScript mode  Enter the above code  Save and Run

12. Copyright 2007, Information Builders. Slide 12 Maintain and JavaScript Confirm Action  Click on the Delete button  You are now asked if you want to delete or not  Try both OK and Cancel

13. Copyright 2007, Information Builders. Slide 13 Maintain and JavaScript Limiting Input  You can embed or link External JavaScript files to a form.  Useful when you want to perform the same validation or action on a form numerous times.  We’ll use the checkEntry.JS file to make sure that only numbers are entered into the numeric fields

14. Copyright 2007, Information Builders. Slide 14 Maintain & JavaScript Assigning a JavaScript to a Form  To associate a JavaScript to a form:  Start at Developer Studio (Desktop)  Right-Mouse click on the project and select Properties  Select Edit Filters and click on the ‘New Filter Type” icon  Enter JS, press OK and press OK again.  JavaScript files in the directory appear.  Add them to the project  In Version 7 this step has already been done for you and JS files are in the Other directory.

15. Copyright 2007, Information Builders. Slide 15 Maintain & JavaScript Assigning a JavaScript to a Form  Inside the Maintain Development Environment (MDE), display the form and the Developer Studio window.  Expand the Other Folder  Drag the checkEntry.JS file onto the form and Embed the script.  Embed includes the code into the Winforms file while Link hardcodes a link to the file.

16. Copyright 2007, Information Builders. Slide 16 Maintain and JavaScript Limiting Input  checkEntry receives a value from the form.  Checks the entry against the valid values.  OK here is numbers and numeric symbols only.  You can include Upper and lower case letters.  If invalid, produces an alert error and returns false.  Else returns true.

17. Copyright 2007, Information Builders. Slide 17 Maintain and JavaScript Limiting Input  Bring up the form and Select Event Handlers (Triggers)  Pass input to checkEntry to make sure only numbers entered for numeric fields.  Use !checkEntry for NOT valid  Choose Wholesalepr_edit and Blur  Click on the J and enter code.  Create two more triggers for Listpr and Copies  Copy / Edit code for other two numeric fields.  Save and Run

18. Copyright 2007, Information Builders. Slide 18 Maintain and JavaScript Limiting Input  Try to enter Alpha Characters into the Numeric fields

19. Copyright 2007, Information Builders. Slide 19 Maintain & JavaScript OnLoad JavaScript  The OnLoad function is performed every time a form is refreshed.  Useful if you want to preset an object on a form.  Embedded in the form just like checkEntry was, but we don’t have to explicitly reference it.  Display an alert message from Maintain instead of typing text to the form or displaying it in an edit field.  Technique uses OnLoad JavaScript to check if there is text in a field on a form. If so, display it.

20. Copyright 2007, Information Builders. Slide 20 Maintain & JavaScript OnLoad JavaScript  Checks if there is any data in the Msgtext_Edit field  Checks length of field  If data in field, compute to msgtext and display with alert  Clear out the field  Embed setter.js into the form

21. Copyright 2007, Information Builders. Slide 21 Maintain & JavaScript OnLoad JavaScript  Click on Lab1 to bring up the code and edit case Deleter  After Delete command, check the focerror  If non-zero alert that the record has been deleted  Else alert record not deleted  Enter code and Save

22. Copyright 2007, Information Builders. Slide 22 Maintain & JavaScript OnLoad JavaScript  Click on Form1  Open Variable tree and Drag msgtext on to the form  Select Msgtext_Edit from the properties window  Select Visible – No  Do the same for Msgtext_Text  Save and Run

23. Copyright 2007, Information Builders. Slide 23 Maintain & JavaScript OnLoad JavaScript  Delete a record  If delete is successful display record deleted message  If not successful display not delete message

24. Copyright 2007, Information Builders. Slide 24 Additional Steps if there is time…

25. Copyright 2007, Information Builders. Slide 25 Maintain & JavaScript Visible vs Invisible  Objects on a form can be set to visible or hidden  Use document.getElementById("Text1").style.visibility = 'visible';  Or document.getElementById("Text1").style.visibility = ‘hidden';  Here, Text1 is the name of the object  We will create a Please Wait message to prevent the user from clicking the buttons more than once.

26. Copyright 2007, Information Builders. Slide 26 Maintain & JavaScript Visible vs Invisible  In the MDE, click on FORM1  Select the Button Object from the Tool Pallet  Draw a rectangle over all the Buttons  Change text to Please Wait

27. Copyright 2007, Information Builders. Slide 27 Maintain & JavaScript Visible vs Invisible  On the Properties sheet for this Button object, change: Visible to 0 – No  Object is not visible when form is displayed.  Change BackColor to any color you want.  Change the Font to be larger  Edit the Form Events (Triggers)  Remove the code for the Update Button  UpRec_Click  Click on the J and add the following code.  Save and Run

28. Copyright 2007, Information Builders. Slide 28 Maintain & JavaScript Visible vs Invisible  When user clicks on Update, the object appears.  When the form refreshes, the object automatically disappears.

29. Copyright 2007, Information Builders. Slide 29 Maintain and JavaScript Adding a Calendar Object  A calendar object can be automatically displayed when an edit field has a smart date format.  Applying three JavaScript files and a CSS (Cascading Style Sheet) file does it automatically.  browserSniffer, dynCalendar and calendarInit  JavaScript files can be found at:  Ibi\DevStudio53\ibi_html\javaassist\ibi\html\maint  Ibi\DevSudio71\ibi_html\javaassist\ibi\html\maint  Sample CSS files can be found at:  \ibi\DevStudio71\Templates\Skins  We are using MNT_BLUE.CSS

30. Copyright 2007, Information Builders. Slide 30 Maintain and JavaScript Adding a Calendar Object  Embed the three JavaScript files into the form the same as the other JavaScript files.  You must embed them in this order:  browserSniffer  dynCalendar  calendarInit  Expand + next to form name and make sure they are in the correct order

31. Copyright 2007, Information Builders. Slide 31 Maintain and JavaScript Adding a Calendar Object  Click on Lab1 and display Top case  Add the Winform show_inactive Form1 line  Allows the form to be operated on before it is displayed  Include the Form1.cssname line  Needed to properly display the calendar  Save and Run the procedure

32. Copyright 2007, Information Builders. Slide 32 Maintain and JavaScript Adding a Calendar Object  Calendar icon automatically displayed for all date objects  If date field is computed, make sure format is in upper case (ie MDYY)

33. Copyright 2007, Information Builders. Slide 33 Maintain and JavaScript Summary  Deployed Maintain forms are HTML.  JavaScript commands can be used to manipulate objects on the forms.  With a little coding JavaScript can interact with the data values in those objects.  Any time you can save a trip to the server, performance is enhanced.