Copyright 2007, Information Builders. Slide 1 Maintain & JavaScript: Two Great Tools that Work Great...

Copyright 2007, Information Builders. Slide 1

Maintain & JavaScript: Two Great Tools that Work Great Together

Mark Derwin and Mark Rawls

Information Builders


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.


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


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


Maintain & JavaScriptSimple Application

Double Click on MNTJava Folder Double Click Maintain Folder Right-Mouse Click on Lab1 and Run


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


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.


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”);


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


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.


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


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


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


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.


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.



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.



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



Try to enter Alpha Characters into the Numeric fields


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.



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



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


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


Maintain & JavaScript OnLoad JavaScript

Delete a record If delete is successful display record deleted message If not successful display not delete message


Additional Steps if there is time…


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.



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



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



When user clicks on Update, the object appears. When the form refreshes, the object automatically disappears.


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



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



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



Calendar icon automatically displayed for all date objects If date field is computed, make sure format is in upper case (ie MDYY)


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.

Copyright 2007, Information Builders. Slide 1 Maintain & JavaScript: Two Great Tools that Work Great...

Documents

Transcript of Copyright 2007, Information Builders. Slide 1 Maintain & JavaScript: Two Great Tools that Work Great...