Custom Extension up and down input field
Posted: 17 May 2022, 05:05
Hi
I am trying to create a custom extension, that will have an input field, where if you press the down key, it will do a tab, while pressing the up key, will do a shift tab.
if using an extension like this in a subfile option column, the idea is you can go from one field to the next using up and down keys instead of tab, which is one of the popular ways when using green screen.
the extension I created is here, with the new properties and the actions for it, but I cannot get the tab or shift-tab to work correctly. maybe I am missing something. Any suggestion welcomed.
Instructions to create custom extensions with axes are here:
https://axesdocs.lansa.com.au/index.php ... extensions
which basically after doing a code like the one I have here, is to put this extension in your project folder, axes *R for the public and you can use it.
I am trying to create a custom extension, that will have an input field, where if you press the down key, it will do a tab, while pressing the up key, will do a shift tab.
if using an extension like this in a subfile option column, the idea is you can go from one field to the next using up and down keys instead of tab, which is one of the popular ways when using green screen.
the extension I created is here, with the new properties and the actions for it, but I cannot get the tab or shift-tab to work correctly. maybe I am missing something. Any suggestion welcomed.
Code: Select all
function DEFINE_EXTENSION_SimpleInputUpDown()
{
var definition =
{
name: "SimpleInputUpDown",
group: "vis",
type: "element",
display: "Simple Input Up Down",
subType: "new",
properties:
{
value: { type: "String", defaultStatic:"", description: "Value to appear in the field" },
style: { type: "Style", description: "CSS to apply to the extension." },
onKeyUp: { type: "Event", defaultDynamic: "SENDKEY(\"Shift+Tab\");", description: " The onKeyUp event." },
onKeyDown: { type: "Event", defaultDynamic: "SENDKEY(\"Tab\");", description: " The onKeyDown event." },
},
init: function(element, elementContainer)
{
this._element = element ;
this._elementContainer = elementContainer ;
var inpValue = this.getPropertyValue("value");
var inp = document.createElement("input");
inp.innerHTML = inpValue;
inp.sendKey = "Enter";
if (!this.isDesignMode())
{
var self = this;
inp.onkeyup = function() { self._onKeyUp(inp); };
inp.onkeydown = function() { self._onKeyDown(inp); };
}
this.applyTabIndex(inp);
elementContainer.appendChild(inp);
this.inputElem = inp;
if (AXES.isTS2Engine) element.addListener("AddedToDOM", this._handleAddedToDOM, this);
},
render: function(element, elementContainer)
{
var input = this.inputElem;
if (!AXES.isTS2Engine)
{
/* TS1 sizing */
var size = element.getSize();
input.style.width = (size.width).toString() + "px";
input.style.height = (size.height).toString() + "px";
}
var style = this.getPropertyValue("style");
this.applyStyle(style, input);
},
destroy: function(element, elementContainer)
{
this.inputElem.onkeydown = null;
this.inputElem.onkeyup = null;
this.inputElem.sendKey = null;
this.inputElem = null;
delete this.inputElem;
element.removeListener("AddedToDOM", this._handleAddedToDOM);
delete this._element;
delete this._elementContainer;
},
_handleAddedToDOM: function(event)
{
var size = this._element.getSize();
this.inputElem.style.width = (size.width).toString() + "px";
this.inputElem.style.height = (size.height).toString() + "px" ;
},
_onKeyDown: function(input)
{
var env = { defaultKey : input.sendKey };
this.raiseEvent("onKeyDown", env);
},
_onKeyUp: function(input)
{
var env = { defaultKey : input.sendKey };
this.raiseEvent("onKeyUp", env);
}
};
AXES.Extensions.add(definition);
}
DEFINE_EXTENSION_SimpleInputUpDown();https://axesdocs.lansa.com.au/index.php ... extensions
which basically after doing a code like the one I have here, is to put this extension in your project folder, axes *R for the public and you can use it.