...
Note: here Here we assume that you must have basic knowledge of JQuery, JavaScript and prototype function etc.
Form Creation is broadly divided in two steps steps
Form Development
Form Display
Step1: Form Development:
In VIENNA Advantage there are two ways to create a custom form:
...
Use window no to set unique id for UI form’s elements at time of form creation to escape duplicate id issue.
In case you are using CSS in your form, then you have to use MPC as a prefix in all css classes within your module.
Never overwrite existing html tags in CSS.
Step2: Form Display:
VIENNA Advantage is supporting three ways to show the form in Vienna Advantage
FormFrame
First kind of forms are those which are being opened from menu or shortcut. For these forms user need to add an entry of form created in “Form” Window. Then bind that form with menu or shortcut. Example of these forms are generate Invoice(manual), Vserver, etc.For these forms, Form class must implement three functions
A) Init(windowNo, frame)
This is main initialization method.
...
Pic 15
In init function, parameter "frame" is a container panel provided to display form on screen. So you must have to add/append your root into it.
B) GetRoot()
"getRoot" function return your design as shown below.
...
C) Dispose();
This function used to dispose formFrame object and form local variables.
Syntax as shown below.
...
CFrame
Second type of forms are those, which we open from other forms or shortcuts. For these kind of formsno needto make any entry in Form window. These forms are created using the help of CFrame.
For these forms, Form class must implement three functions:
ModuleName.prototype.show = function () {
var c = new VIS.CFrame();//initialize object of cframe
c.setName(VIS.Msg.getMsg("FormName")); //set name of the form
c.setTitle(VIS.Msg.getMsg("FormName"));//set title
c.setContent(this); //set the form design in cframe
c.show(); //show the cframe
};
ModuleName.prototype.dispose = function () {
this.disposeComponent();
};
//call on screen size change
ModuleName.prototype.sizeChanged = function (height, width) {
this.getRoot().css({ "width": width, "height": height });
};
Instructions:
In dispose method must null all form variables and off all events. While coding in java script declaration scope of any variable should be local mean always use "var" or "this" according to your need, if you define any variables without these that would be add into global window object so take care of it otherwise it create performance issue.
A) Dialog
You can also show form design as a dialog.For that you can use jQuery dialog method OR you can use Framework method.
JQuery method you can simple use jQuery.dialog
this.showDialog = function () {
$root.dialog({
modal: true,
title: VIS.Msg.getMsg("GrossCalculation"),
height: $(window).height() - 100,
width: $(window).width() - 100,
position: { at: "center top", of: window },
close: function () {
$self.dispose();
$root.dialog("destroy");
$root = null;
}
});
By Framework Method
this.show = function () {
//load();
var $root = $("<div><p>Sample Dialoge</p></div>");
$busyDiv.height(400); //show busy symbol
var ch = new VIS.ChildDialog(); //create object of child dialog
ch.setHeight($(window).height() - 100);
ch.setWidth($(window).width() - 100);
ch.setTitle(VIS.Msg.getMsg("DemoForm"));
ch.setModal(true); //set form dialog modal property
ch.setContent($root); //set the content
//Disposing Everything on Close
ch.onClose = function () {
if ($self.onClose) $self.onClose();
$self.dispose();
};
ch.show();
//Ok Button Click
ch.onOkClick = function (e) {
VIS.ADialog.info("OKClicked"); //
};
//Cancel Button Click
ch.onCancelClick = function () {
VIS.ADialog.info("CancelClicked");
};
};
In the Demo Partner-Kit we have given example of creating custom form by three ways. You can explore the examples for further understanding.
...
Use window no to set unique id for UI form’s elements at time of form creation to escape duplicate id issue.
In case you are using CSS in your form, then you have to use MPC as a prefix in all css classes within your module.
Never overwrite existing html tags in css