Set readonly property inside a nested panel

Question

If I have an outer panel in which the readonly property is true, is there any way to created inner panels in which the content can be editable?

The use case is a mobile page with a number of fields plus multiple RoundedRectLists. I would like to add a search control to each RoundedRectList to filter the content of those lists. I do not want the fields to always be editable. I need the search control to be editable so I can enter a search value without toggling the entire form. At the moment I have readonly=false set for the inner panel but the search control only becomes editable when the readonly for the outer panel is also set to false.

I know I can created separate panel that are not nested, but this design pattern of nested panels is quite common and I am sure there is n XPages guru out there that has solved this...

Having found this after running into it myself, I can confirm that no, there's no way I found that you can (re-)set a nested panel to not be ~readonly="false". This caused some aggravation on my part and my solution was to move my component outside the xp:panel that has readonly="true". It appears the higher level panel supersedes whatever is set inside as far as the readonly property goes. — Eric McCormick

Michael Saiz Michael Saiz · Accepted Answer · 2013-08-13T06:27:44

I am not the XPage guru you are searching for but i have a workaround, =)

As far as i know if you set the outer panel to readonly="true" all your inner inputText boxes will output no <inputField> in your html just a <span>. Thats also very anoying if you want to have a field that looks like a input but is just disabled for input. That is achieved if you set the to disabled="true" and showReadonlyAsDisabled="true".

I would recomend setting all readonly="false" and use dojo.query to set the disabled propertie on page load like:

    <xp:scriptBlock>
        <xp:this.value><![CDATA[dojo.ready(function(){
        dojo.query(".input").forEach(function(node, index, array){  
          node.disabled = true;
         }
    )
});]]></xp:this.value>
    </xp:scriptBlock>

    <xp:panel>
            <xp:inputText id="inputText1" value="#{viewScope.in1}" styleClass="input"
                defaultValue="Txt0" >
            </xp:inputText>
            <xp:inputText id="inputText2" value="#{viewScope.in2}" styleClass="input"
                defaultValue="Txt1">
            </xp:inputText>
            <xp:inputText id="inputText3" value="#{viewScope.in3}" styleClass="input"
                defaultValue="Txt2">
            </xp:inputText>
    </xp:panel>

Another benefit of this solution you can set them editable on clientSide without any Server calls. Hope it helps.

Set readonly property inside a nested panel

1 Answers