Hi,
Here are some tips to work with the custom forms.
Anyone who like to work on custom forms must have sound knowledge of the following areas
- EXTJS Framework - This is the core part where all the UI of application works.
- aware_ext.js - In this all the necessary implementation, functions and AwareIM UI defined.
- web_interface.xml define the interface how to interact with server, it is very useful when we are using AJAX.
- Example - Here i am posting a simple example that i use first time to work on custom form with the support of AwareIM Support Team.
function myfunction (objectName, objectId, objectVersion)
{
// populate the form if not a new object
if (objectId > 0)
{
// use XML to extract the data for this object name and id
}
//custom form define in Ext Framework
var panel = new Ext.FormPanel ({
labelWidth: 70,
width: 300,
height: 200,
items: [
{
xtype: "textfield",
name: "Name",
id: "Name",
// We can initialize with the value obtained from the server
//value: balanceValue,
anchor: "99%",
fieldLabel: "First Name"
},
{
xtype: "textfield",
name: "Age",
id: "Age",
anchor: "99%",
fieldLabel: "Age"
}
],
buttons: [
{
text: "Save",
handler: function () {
SaveCustomer(panel,objectName, objectId);
}
}
]
});
return panel;
};
function SaveCustomer(panel, objectName, objectId){
xmlStr = "<get_form_data_action_return><form_data form_name=\"Main\" object_name=\"Customer\" form_context=\"create\" title=\"Customer\" object_id=\""+objectId+"\" object_version=\"1\"> <form_section_data title=\"Customer\" name=\"Main\" label_column_width=\"90\"> <layout_row> <layout_cell_data type=\"attribute\"> <attribute_data attribute_name=\"Name\" label=\"Name\"> <standard_attribute_data type=\"text\" allow_blank=\"false\" format=\"\" size=\"20\" max_length=\"20\"> <attribute_data_val>"+panel.Name+"</attribute_data_val> </standard_attribute_data> </attribute_data> </layout_cell_data> </layout_row> <layout_row> <layout_cell_data type=\"attribute\"> <attribute_data attribute_name=\"Age\" label=\"Age\"> <standard_attribute_data type=\"text\" allow_blank=\"false\" format=\"\" size=\"20\" max_length=\"20\"> <attribute_data_val>23</attribute_data_val> </standard_attribute_data> </attribute_data> </layout_cell_data> </layout_row></form_section_data> </form_data> </get_form_data_action_return>";
//prepare xmlDoc
var xmlDoc = parseXMLDocument(xmlStr);
//FormParser
var frmParser = new AwareApp.FormParser(xmlDoc,true,true,true,null);
var tp = frmParser.parse();
var options = {clientValidation:true};
var tmp = new AwareApp.CustomPostFormDataAction(frmParser,options);
panel.form.doAction(tmp);
};
with above i able to add data to my custom form by calling function "doAction();".
xmlStr is the string need to pass with the values of the form.
regarding importing javascript file and calling function please check the programmer refrence docs provided by awareIM.
I hope this content must be useful for many of users.
I was not expert in all above before but after spending lots of hrs and learning now I having a good basic on this, currently developing a new UI to my application, will share in future.
Suggestion are welcome!!!
Thanks,
