Ankündigung

Einklappen
Keine Ankündigung bisher.

Custom Fields with oUp Property

Einklappen
X

Custom Fields with oUp Property

Einklappen
  • Filter
  • Zeit
Alles löschen
neue Beiträge

  • Custom Fields with oUp Property

    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:

    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">
    Code:
    //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...
Lädt...
X