XPages - Dojo Accordion Container with Panes Autohieght - xpages

I have Dojo Accordion with Panes. Whatever i did, i couldn't solve my problem.
Accordion Pane's height is always the same as which Accordion Pane has maximum height.
I just want it to be high enough according to it's content. I mean automatically high.

Add this CSS to your XPage or theme:
.dijitSelected .dijitAccordionContainer-child {
height: auto !important;
}
Dojo accordion's pane open with the correct height then.
Use theme "Bootstrap3.2.0" alternatively as accordeon works with this theme out of the box as expected.

I have done some investigations and in my opinion the issue could be solved by setting the CSS height property height:auto !important; on every xe:basicContainerNode BUT if you open/close an accordion pane then the height property will be overwritten :(
XPage Source:
<xe:accordion id="accordion1">
<xe:this.treeNodes>
<xe:basicContainerNode label="Container one">
<xe:this.children>
<xe:basicLeafNode submitValue="Container one, choice one" label="Choice one"></xe:basicLeafNode>
<xe:basicLeafNode submitValue="Container one, choice two" label="Choice two"></xe:basicLeafNode>
<xe:basicLeafNode submitValue="Container one, choice three" label="Choice three"></xe:basicLeafNode>
</xe:this.children>
</xe:basicContainerNode>
<xe:basicContainerNode label="Container two" style="height:auto !important;">
<xe:this.children>
<xe:basicLeafNode submitValue="Container two, choice one" label="Choice one"></xe:basicLeafNode>
<xe:basicLeafNode submitValue="Container two, choice two" label="Choice two"></xe:basicLeafNode>
<xe:basicLeafNode submitValue="Container two, choice three" label="Choice three"></xe:basicLeafNode>
<xe:basicLeafNode submitValue="Container two, choice one" label="Choice one"></xe:basicLeafNode>
<xe:basicLeafNode submitValue="Container two, choice two" label="Choice two"></xe:basicLeafNode>
<xe:basicLeafNode submitValue="Container two, choice three" label="Choice three"></xe:basicLeafNode>
<xe:basicLeafNode submitValue="Container two, choice one" label="Choice one"></xe:basicLeafNode>
<xe:basicLeafNode submitValue="Container two, choice two" label="Choice two"></xe:basicLeafNode>
<xe:basicLeafNode submitValue="Container two, choice three" label="Choice three"></xe:basicLeafNode>
</xe:this.children>
</xe:basicContainerNode>
<xe:basicContainerNode label="Container three">
<xe:this.children>
<xe:basicLeafNode submitValue="Container three, choice one" label="Choice one"></xe:basicLeafNode>
<xe:basicLeafNode submitValue="Container three, choice two" label="Choice two"></xe:basicLeafNode>
<xe:basicLeafNode submitValue="Container three, choice three" label="Choice three">
</xe:basicLeafNode>
</xe:this.children>
</xe:basicContainerNode>
</xe:this.treeNodes>
</xe:accordion>
Firebug Screenshots:
After XPage is loaded:
After Pane Opened/Closed:

Related

xe:djextListTextBox control displays wrong value for fields with similar aliases/synonyms

I recently discovered a problem with the xe:djextListTextBox control using xe:valuePicker for values that have synonyms/aliases. If the synonyms are similar between pickers that are bound to different fields, when selecting the value for the first field, selecting the matching value for the second field displays the text from the first selection.
For example, picker #1 has 3 values with aliases/synonyms: blue|1, green|2, yellow|3. Picker # 2 has 3 different values but the same synonyms: red|1, orange|2, purple|3.
If I select "blue" for picker # 1 it displays "blue." When I then select "red" for picker #2, instead of displaying "red", it displays "blue".
The good thing is that when the document is saved (the synonyms are saved correctly) and reopened in Read mode, the two fields properly display the correct values. The issue seems to be in Edit mode. Has anyone come across this before and aware of a fix?
Here is test code:
<?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">
<xp:this.data>
<xp:dominoDocument var="doc1" />
</xp:this.data>
<p>
k1
<xe:valuePicker for="k1" pickerText="add">
<xe:this.dataProvider>
<xe:simpleValuePicker valueList="blue|1;green|2;yellow|3" labelSeparator="|" valueListSeparator=";" />
</xe:this.dataProvider>
</xe:valuePicker>
</p>
<p>
<xe:djextListTextBox id="k1" value="#{doc1.k1}"
displayLabel="true" multipleSeparator=";" multipleTrim="true" />
</p>
<p>
k2
<xe:valuePicker for="k2" pickerText="add">
<xe:this.dataProvider>
<xe:simpleValuePicker valueList="red|1;orange|2;purple|3" labelSeparator="|" valueListSeparator=";" />
</xe:this.dataProvider>
</xe:valuePicker>
</p>
<p>
<xe:djextListTextBox id="k2" value="#{doc1.k2}"
displayLabel="true" multipleSeparator=";" multipleTrim="true" />
</p>
</xp:view>
I ended up opening a ticket with HCL and their suggested workaround was to add an onChange event to the djextListTextBox to refresh its value. I'm not thrilled with it because I have a lot of fields and it's a performance hit, but it does work.
<xp:div id="refreshTarget">
...
<p>
<xe:djextListTextBox id="k1" value="#{doc1.k1}" style="font-size:smaller"
displayLabel="true" multipleSeparator=";" multipleTrim="true">
<xp:eventHandler event="onChange" submit="true" refreshMode="partial"
refreshId="refreshTarget" />
</xe:djextListTextBox>
</p>
</xp:div>

Tried to get user input while in a dialog box. InputText is read only it seem

I have some code, see below. It's a dialog box that contains a list box for the user to select one or more choices and a text field to enter an email address.
When I put a viewScope variable as the value to capture the email address the field becomes like it's read only. If I remove the value=viewScope..... the field shows as editable with a border etc.
How can I get the field to be editable and store the value in a scope variable for use when the click the submit button?
FYI, the list box works just fine.
<?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"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:panel id="panelJenarkCurrentYearReportsMain">
<xp:panel id="panelJenarkCurrentYearReportsInner">
<xe:dialog id="dialogCurrentReports" title="Fetch Current Year Reports">
<xp:div styleClass="lotusMessage lotusInfo" role="alert">
<xp:listBox id="listBoxJenarkCurrentYearReports" value="#{viewScope.jenarkCurrentYearReports}"
multiple="true" style="height:150.0px;width:98%;margin-left:5px"
required="true">
<xp:selectItems id="selectItems1">
<xp:this.value><![CDATA[#{javascript:var db = new Array( #DbName()[0], "dbWorkflow\\reference" );
result = #DbLookup(db, "($VSYSCTLKW)", "*ALL*ALL*ALLJenarkCurrentYearReports", "KWValues" );
if (result && typeof result == "string")
result = new Array(result);
return result;
}]]></xp:this.value>
</xp:selectItems>
<xp:this.validators>
<xp:validateRequired
message="Please Select one or more Current Year Reports!" />
</xp:this.validators>
</xp:listBox>
<xp:panel>
<xp:label value="Send Reports To:"
id="labelJenarkReportsEmailTo"
style="width:20%;padding-left:3.0px;margin-left:3.0px">
</xp:label>
</xp:panel>
<xp:panel>
<xp:inputText id="inputTextJenarkReportsEMailTo"
style="width:75%;padding-left:3.0px;margin-left:5.0px"
value="#{javascript:viewScope.jenarkReportEMail;}" required="true">
<xp:this.validators>
<xp:validateRequired
message="Please Enter a valid email Address!">
</xp:validateRequired>
</xp:this.validators>
</xp:inputText>
</xp:panel>
</xp:div>
</xe:dialog>
</xp:panel>
</xp:panel>
</xp:view>
Change your value definition to
value="#{viewScope.jenarkReportEMail}"
It has to be in Expression Language (EL). This way inputText control not just knows how to read viewScope variable's current value but also where to write user's input value to.
If you start your expression with "#{javascript:..." then it will execute the JavaScript code and insert the current value of viewScope.jenarkReportEMail as inputText's value. Just as a string, not as a variable where you can write to. That's why inputText can't write and shows itself as "read only".

Xpages Combobox placeHolder does not work

I tried to add "Placeholder attribute into a combobox. I have either an error or It does not work :(
NOTE: I use bootstrap 3.2.0
<xp:comboBox id="dRes" value=" {document1.dRes}">
<xp:this.attrs>
<xp:attr name="placeholder" value="Select a value"> </xp:attr>
</xp:this.attrs>
</xp:comboBox>
No that will not work, the 'placeholder' of a combobox is the first item of the combobox or the selected value

Radio Button Group seems not sensitive by a mouse click

I have a radio button group, if the user selects an option, the relevant combo box will appear. The user is able to type word or just click the triangle box to search the value.
<xp:table id="InfoTable" style="margin-left:100.0px">
<xp:tr>
<xp:td>
<xp:radioGroup id="radioGroup1" layout="pageDirection">
<xp:selectItem itemLabel="Number"></xp:selectItem>
<xp:selectItem itemLabel="Alphabet"></xp:selectItem>
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="InfoTable">
</xp:eventHandler>
</xp:radioGroup>
</xp:td>
<xp:td>
<xp:comboBox id="comboBox1_destRank"
dojoType="dijit.form.ComboBox" value="# {sessionScope.NumberValue}"
style="width:100.0px">
<xp:this.rendered><![CDATA[#{javascript:var x = getComponent("radioGroup1").getValue();
if(x == "Number")
{ return true; }
if(x == "Alphabet")
{ return false; }}]]></xp:this.rendered>
<xp:selectItem itemLabel="1"></xp:selectItem>
<xp:selectItem itemLabel="2"></xp:selectItem>
<xp:selectItem itemLabel="3"></xp:selectItem>
<xp:selectItem itemLabel="4"></xp:selectItem>
<xp:selectItem itemLabel="5"></xp:selectItem>
</xp:comboBox>
<xp:br></xp:br>
<xp:comboBox id="comboBox2_destPost"
dojoType="dijit.form.ComboBox"
value="#{sessionScope.AlphabetValue}" style="width:100.0px">
<xp:this.rendered><![CDATA[#{javascript:var x = getComponent("radioGroup1").getValue();
if(x == "Alphabet")
{ return true; }
if(x == "Number")
{ return false; }}]]></xp:this.rendered>
<xp:selectItem itemLabel="a"></xp:selectItem>
<xp:selectItem itemLabel="b"></xp:selectItem>
<xp:selectItem itemLabel="c"></xp:selectItem>
<xp:selectItem itemLabel="d"></xp:selectItem>
<xp:selectItem itemLabel="e"></xp:selectItem>
</xp:comboBox>
</xp:td>
</xp:tr>
</xp:table>
I test the code and it works properly. Once I click the radio button, the relevant combo box can display.
However, when my colleagues test it, they tell me they usually have to click the radio button three or four times to show the combo box. I feel strange so I go to see how they click the button, and it is true that one colleague needs to click three times to show the combo box no matter what option he chooses and the other colleague click six times to show.
Later, we use the same computer and same pace to click the mouse to test again, I can display the combo box by click the radio button one time, but my colleagues still needs two and three times to show the combo box.
I examine the code and I don't know which part cause the strange result.
Would someone give advice please. Thank you.
References:
xpages combobox control where user can enter values not in list
Help Contents in Domino Designer
XPages get Value selected from combo box
Where are they clicking? And which version of Domino are you using? I believe clicking the label did not trigger selecting the value in previous versions. It works fine for me with 9.0.1 FP3 in Internet Explorer and Firefox. It may be this issue referred to by Berndt Hort, but the IBM link doesn't work any more and the issue seems to have been fixed in later versions of Domino.
What is the browser that your colleague is using?
onclick event for radio group does not work properly in other browsers. It works fine in IE.
So we did small tweak in the eventHandler code. Please note the reder property of event as follows:
<xp:eventHandler
event="onchange"
submit="true"
refreshMode="partial"
refreshId="pnlMainTTSHF"
disableValidators="true"
id="eventHandler1"
rendered="#{javascript:!context.getUserAgent().isIE()}" />
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="partial"
refreshId="pnlMainTTSHF"
disableValidators="true"
id="eventHandler2"
rendered="#{javascript:context.getUserAgent().isIE()}" />

Xpages viewPanel column looses sorting link after category filter reset

I have a Xpages page with a viewPanel control definied. It it filtered by category and contains some columns. One of them is sortable. Unfortunatelly it looses sorting capabilty in the following scenario:
Open Xpage (filter category: null) - I may click the sort column
Change filter category (filter category: 'something') - The sorting is unavailable (and that's ok thus datasource)
Change filter category back (filter category == null) - The sorting is unavailable, there is no column sorting link (sorting arrows are visible) .
I've tried partial and full refresh but it does not work. What should I do in order to have sorting enabled again?
EDIT
Here is sample code:
<xp:button value="All companies" id="button5">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="vpDocuments">
<xp:this.action><![CDATA[#{javascript:viewScope.cat = null;}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button value="Single Company" id="button2">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="vpDocuments">
<xp:this.action><![CDATA[#{javascript:viewScope.cat = 'abc';}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:viewPanel id="vpDocuments" var="rowData"
indexVar="rowIdx">
<xp:this.data>
<xp:dominoView var="view1"
databaseName="#{javascript:computeMyDb()}" viewName="xMyView"
categoryFilter="#{javascript:viewScope.cat}"></xp:dominoView>
</xp:this.data>
<xp:viewColumn columnName="$Company" id="viewColumn1">
<xp:viewColumnHeader value="Company" id="viewColumnHeader1">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn columnName="Invoice" id="viewColumn2">
<xp:viewColumnHeader value="Invoice" id="viewColumnHeader2">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn columnName="OrderDate" id="viewColumn7"
styleClass="dateColumn">
<xp:viewColumnHeader value="Order Date" id="viewColumnHeader7"
sortable="true">
</xp:viewColumnHeader>
</xp:viewColumn>
</xp:viewPanel>
So the last column is sortable, but after clearing category filter the header in not clickable
Please use the keys property instead of the categoryFilter property to fix your issue.

Resources