xpage getComponent always returns null even when variable is declared and initialized

Question

I've seen a few articles here trying to bind computed fields but my preferred solution; getComponent is just not working for me. I'd rather not have hidden "real" fields. Here's what I have. A computed VAT Tax percentage field called VP

<xp:text escape="true" id="VP" value="#{FInvoiceDoc.VP}" style="text-align:right">
 <xp:this.converter>
  <xp:convertNumber pattern="0.00"></xp:convertNumber>
 </xp:this.converter>
</xp:text>

Here is one of the calculations where I set the value of this field;

XSP.getElementById("#{id:VP}").innerHTML = tmp.toFixed(2);

tmp calculates correctly, VP displays the correct expected value on the page.

Then in my querySaveDocument event, I do the following

var VP = getComponent("VP").getValue();
FInvoiceDoc.replaceItemValue("VP",VP);

and what gets stored is a Null value. I've even confirmed that the VP variable is null by doing a "Print (VP)" command after setting the VP variable then checking the log. There's got to be something I'm missing.

Answer 1

At page submit you don't get a computed text field's value back to server as it is read only.

You are looking for a solution where you can:

• show a document's field in read mode
• set new values to this field on client side with CSJS
• save the value back to document's field on submit

The first two points working already with your solution.

The third point you can achieve with adding an input text field "VPdoc" which is bound to your document's field "VP" and hidden with style="display:none".

<xp:inputText
    id="VPdoc"
    value="#{FInvoiceDoc.VP}"
    style="display:none">
    <xp:this.converter>
        <xp:convertNumber pattern="0.00"></xp:convertNumber>
    </xp:this.converter>
</xp:inputText>

At submit copy the current value (innerHTML) from computed text field "VP" to input text field "VPdoc" using the following CSJS code in submit button:

<xp:this.script><![CDATA[
    XSP.getElementById("#{id:VPdoc}").value = 
                                XSP.getElementById("#{id:VP}").innerHTML
]]></xp:this.script>

This way the value which was set on client side to field "VP" is saved to document.

Answer 2

You do NOT assign a value, but replace the html- representation by some html code. With that you simply break the element and kind of "convert" it to a stupid div (sorry, don't know how to explain better)...

Never mess around with the frontend: the element is bound to an item in your document. Modify that value, and the element representing it will represent the change.

And: you do not need that lines of code in querysavedocument to save back the value... This will be done automatically, that's what binding (value property of element) is for...

Answer 3

Perhaps, instead of manipulating the innerHTML, you used

getComponent("VP").setValue(tmp.toFixed(2));

Would that work? You'd be setting the value of the component then, I think.....