Copyright 2007, Information Builders. Slide 1 Maintain & JavaScript: Two Great Tools that Work Great Together Mark Derwin and Mark Rawls Information Builders
Copyright 2007, Information Builders. Slide 1
Maintain & JavaScript: Two Great Tools that Work Great Together
Mark Derwin and Mark Rawls
Information Builders
Copyright 2007, Information Builders. Slide 2
Presentation Information
Author: Mark Derwin and Mark RawlsCompany: Information BuildersPresentation 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.
Copyright 2007, Information Builders. Slide 3
Maintain & JavaScriptWhy 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 HTMLTablesResize Grid columnsChange object colorShow or hide objects
Copyright 2007, Information Builders. Slide 4
Maintain & JavaScriptWhy 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!!
Copyright 2007, Information Builders. Slide 5
Maintain & JavaScriptSimple Application
Double Click on MNTJava Folder Double Click Maintain Folder Right-Mouse Click on Lab1 and Run
Copyright 2007, Information Builders. Slide 6
Maintain & JavaScriptMaintain 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
Copyright 2007, Information Builders. Slide 7
Maintain & JavaScriptMaintain 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.
Copyright 2007, Information Builders. Slide 8
Maintain & JavaScriptChecking for input
JavaScript can be used to:Reference the value of the field:
document.formname.fieldname.valueCheck the length of the field:
document.formname.fieldname.value.lengthPosition 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”);
Copyright 2007, Information Builders. Slide 9
Maintain & JavaScriptChecking 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
Copyright 2007, Information Builders. Slide 10
Maintain & JavaScriptChecking 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.
Copyright 2007, Information Builders. Slide 11
Maintain and JavaScriptConfirm 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
Copyright 2007, Information Builders. Slide 12
Maintain and JavaScriptConfirm Action
Click on the Delete button You are now asked if you want to delete or not Try both OK and Cancel
Copyright 2007, Information Builders. Slide 13
Maintain and JavaScriptLimiting 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
Copyright 2007, Information Builders. Slide 14
Maintain & JavaScriptAssigning 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.
Copyright 2007, Information Builders. Slide 15
Maintain & JavaScriptAssigning 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.
Copyright 2007, Information Builders. Slide 16
Maintain and JavaScriptLimiting 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.
Copyright 2007, Information Builders. Slide 17
Maintain and JavaScriptLimiting 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
Copyright 2007, Information Builders. Slide 18
Maintain and JavaScriptLimiting Input
Try to enter Alpha Characters into the Numeric fields
Copyright 2007, Information Builders. Slide 19
Maintain & JavaScriptOnLoad 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.
Copyright 2007, Information Builders. Slide 20
Maintain & JavaScriptOnLoad 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 alertClear out the fieldEmbed setter.js into the form
Copyright 2007, Information Builders. Slide 21
Maintain & JavaScriptOnLoad 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
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
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
Copyright 2007, Information Builders. Slide 24
Additional Steps if there is time…
Copyright 2007, Information Builders. Slide 25
Maintain & JavaScriptVisible vs Invisible
Objects on a form can be set to visible or hiddenUse
document.getElementById("Text1").style.visibility = 'visible';
Ordocument.getElementById("Text1").style.visibility = ‘hidden';
Here, Text1 is the name of the objectWe will create a Please Wait message to prevent the user
from clicking the buttons more than once.
Copyright 2007, Information Builders. Slide 26
Maintain & JavaScriptVisible 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
Copyright 2007, Information Builders. Slide 27
Maintain & JavaScriptVisible 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
Copyright 2007, Information Builders. Slide 28
Maintain & JavaScriptVisible vs Invisible
When user clicks on Update, the object appears. When the form refreshes, the object automatically disappears.
Copyright 2007, Information Builders. Slide 29
Maintain and JavaScriptAdding 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
Copyright 2007, Information Builders. Slide 30
Maintain and JavaScriptAdding 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
Copyright 2007, Information Builders. Slide 31
Maintain and JavaScriptAdding 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
Copyright 2007, Information Builders. Slide 32
Maintain and JavaScriptAdding 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)
Copyright 2007, Information Builders. Slide 33
Maintain and JavaScriptSummary
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.