Xpages with Hide-When and radio buttons

hcl-bot · January 26, 2010, 10:06am

My question looks weird as it is something that we are doing in Lotus Notes since ever but i cannot reproduce it with Xpages …

It is a little basic but there it is …

I try to “hide-when” a panel based on a radio button selection OR through a button ( this one works ). I do it by changing a sessionScope variable ( See below ). Doing it this way, I got a message of error saying something like “Unable to execute the set value simple action because not allowed to set the value of a read only computed expression” … What is wrong in my code ? It must be basic but i don’t find it … If you try the example below, the button works but not the radio button ( I want to make sure that if i select one radio button, i see the panel and if i choose the second one, i don’t see it … like the button is doing ). Very basic with a normal Notes app but there is something i am missing with the Xpages …

Thanks.

<?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp=“http://www.ibm.com/xsp/core”>

<xp:this.data>

	<xp:dominoDocument var="dominoDocument1"

		formName="SiteProfile">

	</xp:dominoDocument>

</xp:this.data>

<xp:panel id="panel2Refresh">

	<xp:button value="Show and Hide" id="button2">

		<xp:eventHandler event="onclick" submit="false"

			refreshMode="partial" refreshId="panel2Refresh">

			<xp:this.action>

				<xp:setValue binding="#{sessionScope.v01}">

					<xp:this.value><![CDATA[#{javascript:var sh = sessionScope.get("v01");

if (sh ==“SHOW”){“HIDE”

}

else{“SHOW”

}}]]></xp:this.value>

				</xp:setValue>

			</xp:this.action></xp:eventHandler>

	</xp:button>

	<xp:radio text="Label1" id="radio1" groupName="group1"

		value="#{dominoDocument1.Site}" selectedValue="true">

		<xp:eventHandler event="onclick" submit="false"

			refreshMode="partial" refreshId="panel2Refresh" immediate="true">

			<xp:this.action><![CDATA[#{javascript:sessionScope.put("v01","SHOW")}]]></xp:this.action>

		</xp:eventHandler>

	</xp:radio>

	<xp:radio text="Label2" id="radio2" groupName="group1" value="#{dominoDocument1.Site}" selectedValue="true">

		<xp:eventHandler event="onclick" submit="false"

			refreshMode="partial" refreshId="panel2Refresh">

		</xp:eventHandler></xp:radio>

	ww<xp:panel

		style="width:443.0px;height:186.0px;text-align:center;border-color:rgb(0,128,255);border-style:solid;border-width:thin">

		<xp:this.rendered><![CDATA[#{javascript:sessionScope.get("v01")=="SHOW"}]]></xp:this.rendered>

		<xp:label value="PANEL" id="label1"

			style="margin-top:30px;color:rgb(0,128,192);font-weight:bold;font-size:14pt">

		</xp:label>

	</xp:panel>

</xp:panel>

</xp:view>

hcl-bot · January 26, 2010, 11:29am

Subject: Solved

Anybody interested … Here is the answer …

<?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp=“http://www.ibm.com/xsp/core”>

<xp:this.data>

	<xp:dominoDocument var="dominoDocument1"

		formName="SiteProfile">

	</xp:dominoDocument>

</xp:this.data>

<xp:panel id="panel2Refresh">

	<xp:button value="Show and Hide" id="button2">

		<xp:eventHandler event="onclick" submit="false"

			refreshMode="partial" refreshId="panel2Refresh">

			<xp:this.action>

				<xp:setValue binding="#{sessionScope.v01}">

					<xp:this.value><![CDATA[#{javascript:var sh = sessionScope.get("v01");

if (sh ==“SHOW”){“HIDE”

}

else{“SHOW”

}}]]></xp:this.value>

				</xp:setValue>

			</xp:this.action></xp:eventHandler>

	</xp:button>

	<xp:radio text="Label1" id="radio1" groupName="group1" value="#{dominoDocument1.Site}" selectedValue="true">

		<xp:eventHandler event="onclick" submit="false"	refreshMode="partial" refreshId="panel2Refresh" immediate="true">

			<xp:this.action><![CDATA[#{javascript:sessionScope.put("v01","SHOW")}]]></xp:this.action>

		</xp:eventHandler>

	</xp:radio>

	<xp:radio text="Label2" id="radio2" groupName="group1" value="#{dominoDocument1.Site}" selectedValue="false">

		<xp:eventHandler event="onclick" submit="false"	refreshMode="partial" refreshId="panel2Refresh">

			<xp:this.action><![CDATA[#{javascript:sessionScope.put("v01","HIDE")}]]></xp:this.action>	

		</xp:eventHandler>

	</xp:radio>

	ss<xp:panel

		style="width:443.0px;height:186.0px;text-align:center;border-color:rgb(0,128,255);border-style:solid;border-width:thin">

		<xp:this.rendered><![CDATA[#{javascript:sessionScope.get("v01")=="SHOW"}]]></xp:this.rendered>

		<xp:label value="PANEL" id="label1"

			style="margin-top:30px;color:rgb(0,128,192);font-weight:bold;font-size:14pt">

		</xp:label>

	</xp:panel>

</xp:panel>

</xp:view>

hcl-bot · December 9, 2010, 3:45pm

Subject: This solution doesn’t works with Listbox field.

<?xml version="1.0" encoding="UTF-8"?><xp:view xmlns:xp="http://www.ibm.com/xsp/core"

xmlns:xc=“http://www.ibm.com/xsp/custom”>

xp:this.resources

<xp:styleSheet href=“/relFormCss.css”></xp:styleSheet>

</xp:this.resources>

xp:this.data

<xp:dominoDocument var=“fo_rel” formName=“fo_rel”>

</xp:dominoDocument>

</xp:this.data>

xp:this.beforePageLoad</xp:this.beforePageLoad>

<xp:panel

style=“background-color:rgb(249,249,249);color:rgb(95,95,95);font-weight:bold;height:23.0px;margin-top:3.0px”>

<xp:link escape=“true” id=“lk_salvarrelatorio”

text=“Save”>

xp:this.rendered<![CDATA[#{javascript:if( fo_rel.isEditable() ){

return true;

}}]]></xp:this.rendered>

<xp:image id=“image1” url=“/img_ico_save.gif”></xp:image>

</xp:link>

<xp:link escape=“true” text=“Export”

id=“lk_exportarrelatorio”>

<xp:image id=“image4” url=“/img_action_export.png”></xp:image>

</xp:link>

<xp:link escape=“true” text=“Sair” id=“lk_sairrelatorio”>

<xp:image id=“Exit” url=“/img_action_back.gif”></xp:image>

<xp:eventHandler event=“onclick” submit=“false”>

xp:this.handlers

<xp:handler type=“text/javascript”>

xp:this.script</xp:this.script>

</xp:handler>

</xp:this.handlers>

</xp:eventHandler>

</xp:link>

</xp:panel>

<xp:messages id=“dsp_error” showSummary=“true”></xp:messages>

<xp:tabbedPanel id=“tabbed_campos”>

<xp:tabPanel id=“tab_campos”>

xp:this.label<![CDATA[

#{javascript:

if( fo_rel.isNewNote() ){

return “New Report”;

}else{

return getComponent(“fi_rel_titulo”).getValue();

}

]]></xp:this.label>

xp:table

xp:tr

<xp:td styleClass=“tdLabel”>

<xp:label value=“Author:” id=“lb_autor”

for=“lb_autorvalue”>

</xp:label>

</xp:td>

<xp:td styleClass=“tdLabel”>

<xp:label id=“lb_autorvalue”>

xp:this.value<![CDATA[#{javascript:var nome = session.createName( session.getEffectiveUserName() );

if( fo_rel.isNewNote() ){

return nome.getAbbreviated();

}else{

return fo_rel.getDocument().getFirstItem(“fi_rel_autor”).getValueString();

}

}]]></xp:this.value>

</xp:label>

</xp:td>

</xp:tr>

xp:tr

<xp:td styleClass=“tdLabel”>

<xp:label value=“Title:” id=“lb_titulo”

for=“fi_rel_titulo”>

</xp:label>

</xp:td>

<xp:td styleClass=“tdField”>

<xp:inputText value=“#{fo_rel.fi_rel_titulo}”

id=“fi_rel_titulo” styleClass=“field” style=“width:530.0px”>

</xp:inputText>

</xp:td>

</xp:tr>

xp:tr

<xp:td styleClass=“tdLabel”>

<xp:label value=“Sumary:” id=“lb_descricao”

for=“fi_rel_descricao”>

</xp:label>

</xp:td>

<xp:td styleClass=“tdField”>

<xp:inputText value=“#{fo_rel.fi_rel_descricao}”

id=“fi_rel_descricao” styleClass=“field” style=“width:530.0px”>

</xp:inputText>

</xp:td>

</xp:tr>

xp:tr

<xp:td styleClass=“tdLabel”>

<xp:label value=“Source:” id=“lb_origem”>

</xp:label>

</xp:td>

<xp:td styleClass=“tdField”>

<xp:radio text=“Sales”

id=“rb_origem_pedido” groupName=“rgn_sistema”

value=“#{fo_rel.fi_rel_origem}” selectedValue=“Pedido”>

</xp:radio>

<xp:radio id=“rb_origem_pnp” text=“Agreements”

groupName=“rgn_sistema” value=“#{fo_rel.fi_rel_origem}”

selectedValue=“PNP”>

</xp:radio>

</xp:td>

</xp:tr>

xp:tr

<xp:td styleClass=“tdLabel”>

<xp:label value=“Type” id=“lb_exportar”

for=“rb_aplicarfiltro”>

</xp:label>

</xp:td>

<xp:td styleClass=“tdLabel”>

<xp:radio text=“Filter”

id=“rb_aplicarfiltro” groupName=“rgn_exportar”

selectedValue=“true” value=“#{fo_rel.fi_rel_exportar}”>

<xp:eventHandler event=“onclick”

submit=“false” refreshMode=“partial” refreshId=“panel2Refresh”

immediate=“true” id=“eventHandler1”>

xp:this.action</xp:this.action>

</xp:eventHandler>

</xp:radio>

<xp:radio text=“Export all”

id=“rb_exportartudo” groupName=“rgn_exportar”

value=“#{fo_rel.fi_rel_exportar}” selectedValue=“false”>

<xp:eventHandler event=“onclick”

submit=“false” refreshMode=“partial” refreshId=“panel2Refresh”

id=“eventHandler2”>

xp:this.action</xp:this.action>

</xp:eventHandler>

</xp:radio>

</xp:td>

</xp:tr>

</xp:table>

<xp:panel id=“panel2Refresh”>

xp:panel

xp:this.rendered</xp:this.rendered>

xp:br</xp:br>Sample

xp:br</xp:br>

<xp:link escape=“true” text=“Link” id=“link1”>

<xp:image id=“image2” url=“/img_ico_edit.gif”></xp:image>

</xp:link>

xp:br</xp:br>

<xp:listBox id=“listBox1”>xp:this.rendered</xp:this.rendered></xp:listBox>

xp:table

xp:tr

<xp:td styleClass=“tdLabel”>

<xp:label value=“Exibir:”

id=“lb_exibir”>

</xp:label>

</xp:td>

<xp:td styleClass=“tdField”>

<xp:checkBox text=“Cabeçalho”

id=“cb_cabecalho” value=“#{fo_rel.fi_rel_cabecalho}”

checkedValue=“1” uncheckedValue=“0”>

</xp:checkBox>

<xp:checkBox text=“Itens” id=“cb_itens”

checkedValue=“1” uncheckedValue=“0”

value=“#{fo_rel.fi_rel_itens}”>

</xp:checkBox>

</xp:td>

</xp:tr>

</xp:table>

</xp:panel>

</xp:tabPanel>

</xp:tabbedPanel>

</xp:view>