JavaScript DHTML/SmartClient/Form Fields
Содержание
Add access key to form
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver">
<SCRIPT> isc.DynamicForm.create({
width: 400, fields: [ {name: "uid", title: "User ID", accessKey: "I"}, {name: "firstName", title: "First Name", accessKey: "F"}, {name: "lastName", title: "Last Name", accessKey: "L"}, {name: "email", title: "Email", accessKey: "E"}, {name: "homeSite", title: "Home Site", accessKey: "H"}, {name: "sex", title: "Sex", accessKey: "S", type: "select", valueMap: ["M","F"]}, {name: "dob", title: "Date of Birth", accessKey: "B", type: "date"} ]
}); </SCRIPT>
</BODY> </HTML>
</source>
Clickable form icon
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.DynamicForm.create({
width: 200, fields : [ {name: "severityLevel", title: "Severity Level", type: "staticText", defaultValue: "Severity 2", helpText: "
Severity 1 - Critical problem
System is unavailable in production or " + "is corrupting data, and the error severely impacts the user"s operations." + "
Severity 2 - Major problem
An important function of the system " + "is not available in production, and the user"s operations are restricted." + "
Severity 3 - Minor problem
Inability to use a function of the " + "system occurs, but it does not seriously affect the user"s operations.", icons: [{ src: "other/help.png", click: "isc.say(item.helpText)" }] } ]
});
</SCRIPT>
</BODY>
</HTML>
</source>
Data bound dependent select field
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.DynamicForm.create({
width: 500, numCols: 4, fields: [ {name:"categoryName", title:"Category", editorType:"select", optionDataSource:"supplyCategory", changed:"form.clearValue("itemName");" }, {name: "itemName", title:"Item", editorType: "select", optionDataSource:"supplyItem", getPickListFilterCriteria : function () { var category = this.form.getValue("categoryName"); return {category:category}; } } ]
});
</SCRIPT> </BODY> </HTML>
</source>
Dependent select: local data
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> // --------------------------------------------------------------------------------------- // Local Data Example isc.Label.create({
contents: "Local Data", width: "90%", height: 25, autoDraw: true, baseStyle: "exampleSeparator"
}); isc.DynamicForm.create({
top: 45, width: 500, numCols: 4, autoDraw: true, fields: [ {name: "division", title: "Division", type: "select", valueMap: ["Marketing", "Sales", "Manufacturing", "Services"], changed: "form.getField("department").setValueMap(item.departments[value])", departments: { Marketing: ["Advertising", "Community Relations"], Sales: ["Channel Sales", "Direct Sales"], Manufacturing: ["Design", "Development", "QA"], Services: ["Support", "Consulting"] } }, {name: "department", title: "Department", type: "select", addUnknownValues:false } ]
});
</SCRIPT> </BODY> </HTML>
</source>
Dependent select: remote data
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT>
// --------------------------------------------------------------------------------------- // Remote Data Example isc.Label.create({
contents: "Remote Data", top: 120, width: "90%", height: 25, autoDraw: true, baseStyle: "exampleSeparator"
}); isc.DynamicForm.create({
top: 165, width: 500, numCols: 4, autoDraw: true, fields: [ {name:"categoryName", title:"Category", editorType:"select", optionDataSource:"supplyCategory", changed:"form.clearValue("itemName");" }, {name: "itemName", title:"Item", editorType: "select", optionDataSource:"supplyItem", getPickListFilterCriteria : function () { var category = this.form.getValue("categoryName"); return {category:category}; } } ]
});
</SCRIPT> </BODY> </HTML>
</source>
Prefill form value
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY> <SCRIPT> var formItems = [
{ name:"requiredIf", title:"requiredIf - true", validators:[ { type:"requiredIf", errorMessage:"Value must be non-empty.", expression:"true" } ] }, { type:"rowSpacer"}, // Submit button for form - will perform automatic client side validation before submission // Note: we would have to set canSubmit to true on the DymamicForm to allow form submission. // {title:"Submit Form", type:"submit", align:"center"} // Button to call validation demonstration function {title:"Validate Form", type:"button", click:"validateForm()", align:"center"} ],
formValues = { requiredIf:"x", };
DynamicForm.create({
ID:"simpleForm", left:20, top:40, items:formItems, values:formValues, width:600, titleWidth:200
});
// A function to demonstrate form validation, and alert on success // Note: Validation is performed automatically on form submission - // no explicit call to the form.validate() function usually required. function validateForm(){
if(simpleForm.validate()){ alert ("Form validation was successful!"); simpleForm.redraw(); };
}; </SCRIPT> </BODY> </HTML>
</source>
Preset form field value
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
Form item annotations example |
Isomorphic SmartClient |
<IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<SCRIPT>
var formItems = [
{ type:"header", defaultValue:"Item title and hint" }, { type:"rowSpacer" }, { name:"titleHint", title:"title text", hint:"hint text" }, { type:"rowSpacer" }, { type:"header", defaultValue:"Item title and hint (required field)" }, { type:"rowSpacer" }, { name:"titleHintReq", title:"title text", hint:"hint text", required:true }, { type:"rowSpacer" }, { type:"header", defaultValue:"Item title, hint, and error" }, { type:"rowSpacer" }, { name:"titleHintError", title:"title text", hint:"hint text" }, { type:"rowSpacer" }, { type:"rowSpacer" }, { type:"header", defaultValue:"Item title and hint example (required field)" }, { type:"rowSpacer" }, { name:"titleHintExample", title:"Password", type:"password", hint:"4-12 alphanumeric characters", required:true }, { type:"rowSpacer" }, { type:"header", defaultValue:"Item title, hint, and error example (required field)" }, { type:"rowSpacer" }, { name:"titleHintErrorExample", title:"Password", type:"password", hint:"4-12 alphanumeric characters", required:true } ], formValues = { titleHint:"value", titleHintReq:"value", titleHintError:"value", titleHintExample:"xxx", titleHintErrorExample:"xxx" }, formErrors = { titleHintError:"error text", titleHintErrorExample:"Your password must be at least 4 characters long." };
DynamicForm.create({
ID:"dynform", left:20, top:45, width:600, items:formItems, values:formValues, errors:formErrors
}); </SCRIPT> </BODY> </HTML>
</source>
Preset form value
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
Form initialization example |
Isomorphic SmartClient |
<IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<SCRIPT>
var formItems = [
{name:"commonName", title:"Animal", type:"text"}, {name:"scientificName", title:"Scientific Name", type:"text"}, {name:"diet", title:"Diet", type:"text"}, {name:"lifeSpan", title:"Life Span", type:"text"}, {name:"status", title:"Endangered Species Status", type:"text"}, {title:"Submit Form", type:"submit"} ], formValues = { commonName:"Nurse Shark", scientificName:"Ginglymostoma cirratum" }, formErrors = { commonName:"error 1" }
DynamicForm.create({
ID:"simpleForm", left:20, top:45, items:formItems, values:formValues, errors:formErrors, canSubmit:true
});
</SCRIPT> </BODY> </HTML>
</source>
Show/hide form
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.DynamicForm.create({
width: 300, fields: [ {name:"onOrder", type:"checkbox", title:"Shipment on order", redrawOnChange:true, width:50 }, {name:"orderDate", type:"date", title:"Order Placed", showIf:"form.getValue("onOrder") == true", required:true } ]
});
</SCRIPT>
</BODY>
</HTML>
</source>