Custom Fields with oUp Property

[l9y2w5]

Hi all,

I'm writing in english today because I want to share that with an english speaking colleague.

TLDR: How can I properly register the js oUp prop of a custom element, so that the dynamic behaviour works as a normal intrexx control? And how can I set it up correctly?That would open so many doors to have dynamic element creation on your pages...

The Full Case:

We want to dynamically add Integer Fields that behave exactly like those added with the intrexx portal manager. E.g. if I type in something like "abc" I want the notifier to show up and so on. Basically: I don't want to rewrite the checks and behaviour that normally ship with Intrexx Controls already.

So I digged into the Intrexx JS. And thought like "ok, all the information I need is already in the oUp element, so basically I need that for my control and register it somewhere" and I found the following:

I copied an exisiting "normal" Intrexx controls HTML in the Browser and changed the id and name attribute. So I have two elemets in the DOM where only one has an oUp property. I copied the oUp property of the first, changed it to match the custom field and assigned the property. But now I get an Error which says :

Uncaught TypeError: Illegal invocation
at g.nodeType.g.documentElement.B (jquery-min.js?usn=409291002:2)
at Array.sort (<anonymous>)
at Function.fa.uniqueSort (jquery-min.js?usn=409291002:2)
at n.fn.init.add (jquery-min.js?usn=409291002:2)
at HTMLDivElement.setup (jquery.ba-resize.min.js?usn=409291002:9)
at Object.add (jquery-min.js?usn=409291002:3)
at HTMLDivElement.<anonymous> (jquery-min.js?usn=409291002:3)
at Function.each (jquery-min.js?usn=409291002:2)
at n.fn.init.each (jquery-min.js?usn=409291002:2)
at sa (jquery-min.js?usn=409291002:3)
g.nodeType.g.documentElement.B @ jquery-min.js?usn=409291002:2
fa.uniqueSort @ jquery-min.js?usn=409291002:2
add @ jquery-min.js?usn=409291002:2
setup @ jquery.ba-resize.min.js?usn=409291002:9
add @ jquery-min.js?usn=409291002:3
(anonym) @ jquery-min.js?usn=409291002:3
each @ jquery-min.js?usn=409291002:2
each @ jquery-min.js?usn=409291002:2
sa @ jquery-min.js?usn=409291002:3
on @ jquery-min.js?usn=409291002:3
bind @ jquery-min.js?usn=409291002:5
TooltipEntryInitResizeListener.$.data.window.setTi meout.bind.tooltipEntry @ all.js?usn=409291002:912
setTimeout (asynchron)
TooltipEntryInitResizeListener @ all.js?usn=409291002:912
TooltipEntryLoad @ all.js?usn=409291002:908
TooltipContainer._showDynamic @ all.js?usn=409291002:859
TooltipContainerShow @ all.js?usn=409291002:866
TooltipContainerShow.oDelayQueue.insert.bind.toolt ipContainerKey @ all.js?usn=409291002:866
DelayQueueTrigger @ all.js?usn=409291002:998
triggerDelayQueue @ all.js?usn=409291002:997
eval @ VM4082:3
setTimeout (asynchron)
DelayQueueInsert @ all.js?usn=409291002:997
TooltipContainerShow @ all.js?usn=409291002:865
upNotifier.show @ all.js?usn=409291002:938
upMouseNotifier.notify @ all.js?usn=409291002:941
onmouseover @ default.asp?rq_AppGuid=CDDD1BBA228481A96FAB051396E B752A3459B868&rq_TargetPageGuid=7068A92833BFB6B230 F924202EBA925E2D99CC5D&rq_MenuGuid=9B368EFE9149101 FDD084FE2C0D985D94B460083&rq_TemplateKey=737461676 5&rq_Lang=de:1

Here is my code:

<!--  The original with the portal manager created element -->
<input name="integercontrol8B8DCDB3" id="ID_integercontrol8B8DCDB3" type="text" value="" form="ID_formgroupA46701D3" class="Editfield_Number disableAutocomplete mb5 ix-max-width" placeholder="Ist nummerisch. 8 Ziffern." onclick="" onkeyup="self.oUp.oEvent = (Browser.ie) ? $.extend({}, (event || window.event)) : event || window.event;var rv=true;if(rv){rv=this.oUp.validateInput();}if(rv) {rv=this.oUp.validateInputLength();}return rv;" onfocus="var rv=true;rv=charCountdown(8, '#charsRemainPosId', '#ID_integercontrol8B8DCDB3');return rv;" onblur="var rv=true;if(rv){this.oUp.format();}rv=checkExactInp utCount('#ID_integercontrol8B8DCDB3', 8);return rv;" onchange="var rv=true;

if(rv){
removeClass( '#ID_integercontrol8B8DCDB3', 'notvalid');
}
" onmouseover="this.notifyKey= Notifier.mouse.notify('Bitte tragen Sie hier die betroffene ID ein, an der Änderungen vorgenommen werden sollen.');" onmouseout="Notifier.mouse.close(this.notifyKey)" autocomplete="off">

<!--  The copied element -->
<input name="integercontrol2222" id="ID_integercontrol2222" type="text" value="" form="ID_formgroupA46701D3" class="Editfield_Number disableAutocomplete mb5 ix-max-width " placeholder="Ist nummerisch. 8 Ziffern." onclick="" onkeyup="self.oUp.oEvent = (Browser.ie) ? $.extend({}, (event || window.event)) : event || window.event;var rv=true;if(rv){rv=this.oUp.validateInput();}if(rv) {rv=this.oUp.validateInputLength();}return rv;" onfocus="var rv=true;rv=charCountdown(8, '#charsRemainPosId', '#ID_integercontrol8B8DCDB3');return rv;" onblur="var rv=true;if(rv){this.oUp.format();}rv=checkExactInp utCount('#ID_integercontrol8B8DCDB3', 8);return rv;" onchange="var rv=true;

if(rv){
removeClass( '#ID_integercontrol8B8DCDB3', 'notvalid');
}
" onmouseover="this.notifyKey= Notifier.mouse.notify('Bitte tragen Sie hier die betroffene ID ein, an der Änderungen vorgenommen werden sollen.');" onmouseout="Notifier.mouse.close(this.notifyKey)" autocomplete="off">

//JS
//use new upIntegerControl() as the source
//deep copy with jQuery extend  
var oUpForCustomControl = $.extend(true, new upIntegerControl(), getElement('ID_integercontrol8B8DCDB3').oUp)
oUpForCustomControl. oHtml = getElement('ID_integercontrol2222')
oUpForCustomControl.id = 'ID_integercontrol2222'

//assign that as a property to the element
getElement('ID_integercontrol2222').oUp = oUpForCustomControl

//tried registering the control but couldn't find out how to do properly... somewhere found something like upRegistryAdd or so.. 
//so just added it to the aObjects Array in the prop of the embedded tooltip
var nextIndex = oUp.oRegistry.oFuncPartReg.B2881B2708780F287061E5D637F7CFEDCE8C6FD3.aObjects.length
oUp.oRegistry.oFuncPartReg.B2881B2708780F287061E5D637F7CFEDCE8C6FD3.aObjects[nextIndex] = oUpForCustomControl

How can I properly register the element, so that the dynamic behaviour works as a normal intrexx control? That would open so many doors to have dynamic element creation on your pages...