Creating Custom Controls

You can create custom controls you can use in your custom flows, by using either DevExtreme widgets or jQuery.

Creating custom controls using DevExtreme widgets

Based on the control you want to add, use the corresponding DevExtreme widget. For the complete list of supported widgets, see DevExtreme UI_Widgets.

To add a custom control using widgets:

  1. Add the control holder element.
  2. Generate the desired control.
  3. Set the value for the generated control.
 
Copy

//Add control holder element
$("table").append("<tr><td><div> Age </div></td><td><div id="controlHolder "></div></td></tr>");
                        
//generate desired control
$("#controlHolder").dxNumberBox({
                min: 0,
                max: 100,
                showSpinButtons: true,
                step: 1
                });

//set value for generated control
$("#controlHolder").dxNumberBox("instance").option("value", 20);

//change property 
$("#controlHolder").dxNumberBox("instance").option("step", 3);

//set event listener
$("#controlHolder").dxNumberBox("instance").option("onChange", function() {
console.log("value changed")
}
);                

Modify Control Advanced Properties

You can modify the advanced properties of an existing control created using DevExtreme widgets. For information on the controls available properties, see the specific control documentation provided by DevExtreme.

Copy
//get control
var control = $("#controlHolder").dxNumberBox("instance")
//change propreties
control.option("step", 3);
control.option("onChange", function() {
    console.log("value changed")
});
control.option("visible", false);

Creating custom controls using JQuery

IMPORTANT! We do not guarantee the Client -side methods functionality when using jQuery.

To create a custom control using jQuery, follow these steps:

  1. Add the control holder element.
  2. Generate the desired control.
  3. Set the value of the generated control.
  4. Set the event listeners.
Copy

createCustomControl
//Add control holder element
$("table").append("<tr><td><div> Age </div></td><td><div id="controlHolder"></div></td></tr>");
                    
//Generate desired control
ebs.generateGenericControl({
                AttributeTypeValue: 5
                }, "controlHolder"
);
                    
//Set value of generated control
$("#controlHolder input").val(20);
                    
//Set event listeners
$("#controlHolder input").change(function() {
                    alert("Handler for controlHolder called.");
});