Form

Open

Note: Here we assume that you must have basic knowledge of JQuery, JavaScript and prototype function etc. 

Form Creation is broadly divided in two steps  

1. Form Development 

2. Form Display

Step1: Form Development:

In VIENNA Advantage there are two ways to create a custom form: 

• By Partial view. 

• By JQuery or Javacript. 

In case of partial view, design is load into root (i.e "div") by using jQuery load method. While in case of Java Script, design/html created in java script function and then append to the root (i.e "div"). 

In Case of Partial view 

Now go to View folder and add a partial view as shown below

Open

In Case of Jscript view 

In “Vienna Advantage”, in module Areas folder, go to Scripts folder, right click on it. Select add and then select java script file option as shown below

In Javascript file write function constructor. FormName function is responsible to build or initialized design and handle events of elements. e.g

Note: MPC refer to Module Prefix Code 

;MPC=window.MPC||{};

Recommended to create a self-invoking function and within this create Form Class function 

; (function (MPC, $) { 

//logic to implement your form 

//Form Class function 

//Form Class function fullnamespace 

MPC.TestForm = function () { 

this.frame; 

this.windowNo; 

var $root; //root of the form 

function initializeComponent() { 

            $root = $("<div>"); 

//form by partial view 

$root.load(" mvc controller route for partial view+WindowNo"); 

              // OR 

//create via jQuery or javascript 

Var btn = $("<input type='button'>") 

$root.append (btn); 

        } 

initializedComponent(); 

this.getRoot = function(){ 

return $root; 

}; 

this.disposeComponent = function() { 

$root = null;/ / other clean up 

  }; 

}; 

})(MPC, jQuery); 

1. Use window no to set unique id for UI form’s elements at time of form creation to escape duplicate id issue. 

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

3. Never overwrite existing html tags in CSS. 

Step2: Form Display:

VIENNA Advantage is supporting three ways to show the form in Vienna Advantage 

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

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

2. Use window no to set unique id for UI form’s elements at time of form creation to escape duplicate id issue. 

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

4. Never overwrite existing html tags in css