JavaScript DHTML/SmartClient/Form Fields

Материал из Web эксперт
Перейти к: навигация, поиск

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>

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

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