Get select value in radio button group in xpages by SSJS - radio-button

I have the following requirement in an xpages application:
I have a radio button group with two options.
I have a combobox whose values ​​will be calculated from the option chosen in the radio button group. The options will be calculated from the partial refresh of the combobox associated with the onChange event of the radio button.
My problem is that I could not get the value selected on the radio button to mount the combobox options. As I'm doing the assembly through SSJS I have to get the value selected on the radio button also in SSJS. Is there any component / method on xpages that I can get the selected value from?
I know that via RPC component or jquery coould get via CSJS the selected value, but I was only wanting to use SSJS.
Grateful
Knut,
I made an example based on your suggestion, according to the code below, but it did not work. Because?
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:radioGroup id="radioGroup2">
<xp:selectItem itemLabel="a"></xp:selectItem>
<xp:selectItem itemLabel="b"></xp:selectItem>
<xp:selectItem itemLabel="c"></xp:selectItem>
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="partial" refreshId="computedField2" execMode="partial" execId="radioGroup2">
</xp:eventHandler></xp:radioGroup>
<xp:text
escape="true"
id="computedField2"
value="#{javascript:getComponent('radioGroup2').getValue()}">
</xp:text><xp:br></xp:br><xp:br></xp:br>
</xp:view>

Use
getComponent('radioGroup1').getValue()
Replace "radioGroup1" with your radio button group's id.
Here is an example:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core">
<xp:radioGroup
id="radioGroup1"
value="#{viewScope.radio}">
<xp:selectItem itemLabel="a" />
<xp:selectItem itemLabel="b" />
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="partial"
refreshId="checkBoxGroup1" execMode="partial" execId="radioGroup1">
</xp:eventHandler>
</xp:radioGroup>
<xp:br></xp:br>
<xp:checkBoxGroup
id="checkBoxGroup1"
value="#{viewScope.check}">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:
if (!getComponent('radioGroup1').getValue()) {
return [];
}
if (getComponent('radioGroup1').getValue() == 'a') {
return ['A1', 'A2'];
}
return ['B1', 'B2'];
}]]></xp:this.value>
</xp:selectItems>
</xp:checkBoxGroup>
</xp:view>
Instead of getComponent('radioGroup1').getValue()you could use viewScope.radio as radio's value gets stored in view scope variable in this example.

I've done similiar by either using a getComponent("RadioButtonGroup1").getValue() in the computed values for the combobox. Or you could use this:
this.getParent().getValue()
in the onChange to populate a scoped variable that you base your combobox with.

Related

xpages fileupload control cannot delete in a repeat control

I am struggling with a strange effect:
In a repeat control I have a custom control with a fileupload and -download control. The item names are calculated with the row var of the repeat, so I can generate "dynamic fields" for my notes document.
Works fine (uploads are shown separatly and saved in different richtext items), except the file delete button: It can only delete the file(s) in the last filedownload control of my repeat. As far as I has examined it: The delete buttons of the other filedownloads try to delete files from the last item name in the repeat, not from their corresponding item name.
here is my (simplified for this posting) example code:
xpage:
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.data>
<xp:dominoDocument var="test" formName="answers"></xp:dominoDocument>
</xp:this.data>
<xp:repeat id="repeat1" rows="30" var="r">
<xp:this.value><![CDATA[#{javascript:var atts = new Array();
atts.push("att1");
atts.push("att2");
atts.push("att3");
return atts}]]></xp:this.value>
<xc:ccdummy fname="#{javascript:r}"></xc:ccdummy>
</xp:repeat>
<xp:button value="Save" id="button1"><xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true">
<xp:this.action>
<xp:saveDocument var="test"></xp:saveDocument>
</xp:this.action></xp:eventHandler></xp:button>
</xp:view>
custom control:
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:panel id="ccpanel">
<xp:fileUpload id="fileUpload1">
<xp:this.value><![CDATA[#{test[compositeData.fname]}]]></xp:this.value>
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" disableValidators="true" refreshId="ccpanel">
</xp:eventHandler>
<xp:eventHandler event="onclick" submit="true"
refreshMode="norefresh">
</xp:eventHandler></xp:fileUpload>
<xp:fileDownload rows="30" id="fileDownload1"
displayLastModified="false" hideWhen="true"
allowDelete="true">
<xp:this.value><![CDATA[#{test[compositeData.fname]}]]></xp:this.value><xp:eventHandler event="onclick" submit="true"
refreshMode="norefresh">
</xp:eventHandler>
</xp:fileDownload>
</xp:panel></xp:view>
Add option repeatControls="true" to your repeat control.
It makes sure that every embedded custom control in repeat control is created separately and acts independently.
I tested it with your example:
repeatControls="false": only attachments from last download control can
be deleted
repeatControls="true": attachments from all download controls can be deleted

XPages Dojo HorizontalSlider onchange

I've been looking for a couple of days now on how to implement a Dojo HorizontalSlider control on my xpage. I've found about 4 different examples of code. I have also tried over and over to simply drag the control from the the Dojo Form list of controls and adjust the properties. I can't get it to work no matter how simple I try to make it.
I want to slide between 0 and 10 and capture the integer into a Edit box control.
Does anyone have an example of this and the code for it?
This is an example for a slider for values between 0 and 10 which writes the current integer value to an edit box on change:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xe:djHorizontalSlider
id="djHorizontalSlider1"
value="#{viewScope.sliderNumber}"
style="margin: 5px;width:200px; height: 20px;"
minimum="0"
maximum="10">
<xp:this.converter>
<xp:convertNumber
integerOnly="true"></xp:convertNumber>
</xp:this.converter>
<xe:djSliderRule
id="djSliderRule2"
style="height:5px;"
count="11"
container="bottomDecoration">
</xe:djSliderRule>
<xe:djSliderRuleLabels
id="djSliderRuleLabels2"
container="bottomDecoration"
style="height:10px;font-size:75%;color:gray;">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</xe:djSliderRuleLabels>
<xp:eventHandler
event="onChange"
submit="true"
refreshMode="partial"
refreshId="inputText1">
<xe:this.action><![CDATA[#{javascript:
viewScope.inputNumber = viewScope.sliderNumber
}]]></xe:this.action>
</xp:eventHandler>
</xe:djHorizontalSlider>
<xp:inputText
id="inputText1"
value="#{viewScope.inputNumber}">
<xp:this.converter>
<xp:convertNumber
integerOnly="true"></xp:convertNumber>
</xp:this.converter>
</xp:inputText>
</xp:view>
On event onChange a partial refresh is executed for edit field "inputText1". Slider's current value gets converted to an integer value and is written to viewScope.sliderNumber. From there it is copied to viewScope.inputNumber which is bound to the edit field. After partial refresh the value is visible in edit field.

Xpages can't get dojo tooltip dialog box to pop up

I have a dojoFilteringSelect field which I want to put a dojo tootltip for. If the user hovers over the field (or I could put an icon next to the field) I want the contents of a computed field to show up.
Looked around and saw various examples but what I cannot find is how to connect the tool tip to the hover action? I am running this in the Lotus client.
My code is below.
<xe:djFilteringSelect id="djFilteringSelect3"
rendered="true" value="#{document1.loc}" tabIndex="1">
<xe:this.defaultValue><![CDATA[""]]></xe:this.defaultValue>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:getComponent("lookupLocs").getValue();}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onClick" submit="false">
<xe:this.script><![CDATA[XSP.openTooltipDialog("#{id:tooltipDialog1}", "#{id:label1}")]]></xe:this.script>
</xp:eventHandler></xe:djFilteringSelect>
  
<xe:valuePicker dialogTitle="Locs with Loc Manager"
for="djFilteringSelect1">
<xe:this.dataProvider>
<xe:simpleValuePicker>
<xe:this.valueList><![CDATA[#{javascript:getComponent("lookupLocs2").getValue();}]]></xe:this.valueList>
</xe:simpleValuePicker>
</xe:this.dataProvider>
</xe:valuePicker>
<xe:tooltipDialog id="tooltipDialog1"></xe:tooltipDialog></xp:td>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[XSP.addOnLoad(function(){
XSP.getElementById("#{id:djFilteringSelect1}").focus();
});]]></xp:this.value>
</xp:scriptBlock>
<xp:td style="width:229.0px">
<xp:message id="message1" for="loc"></xp:message>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td>
<xp:label id="label3" value="Work Category" style="font-weight:bold"></xp:label>
</xp:td>
<xp:td>
<xe:djFilteringSelect id="djFilteringSelect2"
rendered="true" value="#{document1.workCategory}" tabIndex="2">
<xe:this.defaultValue><![CDATA[""]]></xe:this.defaultValue>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var db = new Array(#DbName()[0], 'TSCTT.nsf');
#DbColumn(db, "workCategoryView", 1)
}]]></xp:this.value>
</xp:selectItems>
</xe:djFilteringSelect>
You are very close to the solution you are looking for.
It is not really useful to set the hover tooltip function on dojoFilteringSelect field itself as it is then impossible to select a value there. Instead, like you suggested already, let the tooltip work on an icon or the field's label.
This is an example for a tooltip dialog appearing on hovering over label:
<xp:label value="Label" id="label1">
<xp:eventHandler event="onmouseover" submit="false">
<xp:this.script><![CDATA[
XSP.openTooltipDialog("#{id:tooltipDialog1}", "#{id:label1}")
]]></xp:this.script>
</xp:eventHandler>
<xp:eventHandler event="onmouseout" submit="false">
<xp:this.script><![CDATA[
XSP.closeTooltipDialog("#{id:tooltipDialog1}")
]]></xp:this.script>
</xp:eventHandler>
</xp:label>
<xe:djFilteringSelect id="djFilteringSelect1" rendered="true"
value="#{document1.loc}">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:
["abc","def","xyz"]
}]]></xp:this.value>
</xp:selectItems>
</xe:djFilteringSelect>
<xe:tooltipDialog id="tooltipDialog1" title="This is the dialog title">
<xp:text escape="true" id="computedField1">
<xp:this.value><![CDATA[#{javascript:
"This is the computed value"
}]]></xp:this.value>
</xp:text>
</xe:tooltipDialog>
Label's event "onmouseover" (not "onMouseOver"!) opens the tooltip dialog box. This event works only if you don't use the parameter for="djFilteringSelect1" ( I don't know why).
I added an event "onmouseout" which closes the tooltip dialog when mouse no longer hovering over label.
Instead of event "onmouseout", you can add same CSJS code to a close button inside tooltip dialog box. This is useful if you have things on tooltip dialog box you want to click on like links or editable fields.
If you use the tooltip and not the tooltipdialog than just use the for property and it will happen automatically, no code needed. Very simple.
In your code above you are using the onclick event, that will not work onMouseOver (which would be the event you need?)
Howard

xpages dojo filteringselect partial update onChange

I'm trying to do a partial update on an Edit Box ("Room") on the server onChange event of a dojo filteringselect control ("From_Name") on an xpage.
So, I use a simple Modify Field action with the computed value:
nm = getComponent("From_Name").value;
#DbLookup("names.nsf", "Full Name", nm, 10);
The onChange event also does a Partial Update to the "Room" element.
The problem is that there are a couple of more filteringselect controls on the form, and as I try to do the partial update to do the lookup into the address book to get the person's room number, it gives me the yellow exclamation point error for the other filteringselects on the xpage. If all the other filteringselect controls on the page are filled out first, then the partial update works. How do I get around this and update the Room field when, the From_Name is changed?
The code for my control:
<xe:djFilteringSelect id="From_Name" value="#{document1.From_Name}"
readOnly="# {javascript:!document1.isNewNote()}">
<xe:this.defaultValue><![CDATA[#{javascript:
#Name("[CN]", #UserName())}]]>
</xe:this.defaultValue>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:
db = new Array("SERVER", "names.nsf");
#Unique(#DbColumn(db, "Full Name", 1))
}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onChange" submit="true"
refreshMode="partial" refreshId="Room">
<xe:this.action>
<xp:modifyField name="Room">
<xp:this.value><![CDATA[#{javascript:
nm = getComponent("From_Name").value;
#DbLookup("names.nsf", "Full Name", nm, 10);
}]]></xp:this.value>
</xp:modifyField>
</xe:this.action>
</xp:eventHandler>
</xe:djFilteringSelect>
Add a Dojo attribute required with value false to the other djFilteringSelect controls:
<xe:this.dojoAttributes>
<xp:dojoAttribute
name="required"
value="false">
</xp:dojoAttribute>
</xe:this.dojoAttributes>
With this additional client side attribute you won't get the yellow exclamation point errors anymore.

Update Dojo filtering select position on partial refresh of XPage

In one of my XPages I got a radio button. If I choose value of the radio button, a partial refresh is called.
Value 1 of the radio button only displays a new button in the same line
Value 2 adds some more fields beneath the radio button group
Beneath this new fields there is a Dojo filtering select field to choose from a list of employees.
If I select value 1, the filtering select works fine.
If I select value 2, the filtering select still starts at the "old" position, without recognizing the space, the new fields need
How can I update the position of the filtering select list? The partial refresh is for the complete content of the page, but does not seem to work here.
Here is the code of the radio group, which does the partial refresh on change:
<xp:radioGroup id="rbgSelectEducationType" layout="pageDirection"
value="#{docApplication.EducationType}">
<xp:this.readonly>
<![CDATA[#{javascript:docApplication.getItemValueString("ZwfStepName") != "Start"}]]></xp:this.readonly>
<xp:selectItem itemLabel="ESG Veranstaltung aus dem Katalog"
itemValue="ESG-Veranstaltung">
</xp:selectItem>
<xp:selectItem itemLabel="Externe Veranstaltung"
itemValue="Externe-Veranstaltung">
</xp:selectItem>
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="wcEventDetails">
</xp:eventHandler>
</xp:radioGroup>
And here is the code of the filtering select dropdown:
<xe:djFilteringSelect id="Approver" value="#{docApplication.Approver}" ignoreCase="true">
<xe:this.rendered><![CDATA[#javascript:docApplication.getItemValueString("ZwfStepName")=="Start"}]]></xe:this.rendered>
<xp:selectItems id="selectItems2">
<xp:this.value><![CDATA[#{javascript:if(docApplication.isEditable()){
getComponent("AllUsersLastFirst").getValue().split("#");
}}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onChange" submit="true" refreshMode="partial" refreshId="panelBody" id="eventHandler2">
<xp:this.action><![CDATA[#{javascript:var dbPR = new Array(applicationScope.srv, applicationScope.pathPR);
var Approver:com.ibm.xsp.extlib.component.dojo.form.UIDojoFilteringSelect = getComponent("Approver");
var lookup=#DbLookup(dbPR,applicationScope.xpPersonByLastNameFirstName,Approver.getValue(),2);
lookup=#If(#IsError(lookup),"error",lookup);
if (lookup=="error") {
errormsg = valstrings.getString("ccEsgDocWflContentApprover.lookup1");
globalScriptErrors.add(errormsg);
requestScope.put("scriptErrors", globalScriptErrors);
}
#SetField("NotesNameApprover", lookup);}]]></xp:this.action>
</xp:eventHandler>
</xe:djFilteringSelect>
The filtering select is composed of a number of HTML elements (Firebug is your friend here). When you do a partial refresh that doesn't include the select itself, it isn't drawn again, thus the dropdown stays at the same position. The short answer: include the dropdown in the partial refresh.