For my application I would like to validate if at least one of all xp:checkBox controls belonging to a certain category or class are checked.
Is there something similar to jquery class selector in XPages possible? e.g. get all controls with a certain style class and loop through them?
You could use the core control Check Box Group
Take a look at the following example:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:messages id="errormessages"></xp:messages>
<xp:checkBoxGroup id="checkBoxGroupA">
<xp:this.validators>
<xp:validateRequired message="Please select one checkbox of this group!"></xp:validateRequired>
</xp:this.validators>
<xp:selectItem itemLabel="A-A"></xp:selectItem>
<xp:selectItem itemLabel="A-B"></xp:selectItem>
<xp:selectItem itemLabel="A-C"></xp:selectItem>
</xp:checkBoxGroup>
<xp:checkBoxGroup id="checkBoxGroupB">
<xp:this.validators>
<xp:validateRequired message="Please select one checkbox of this group!"></xp:validateRequired>
</xp:this.validators>
<xp:selectItem itemLabel="B-A"></xp:selectItem>
<xp:selectItem itemLabel="B-B"></xp:selectItem>
<xp:selectItem itemLabel="B-C"></xp:selectItem>
</xp:checkBoxGroup>
<xp:button value="Submit" id="btnSubmit">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:print("submit to server");}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
</xp:view>
Related
I am trying to click a link and sort a view by a column in a repeat using viewScope with a full SSJS refresh (also tried partial refresh on the the repeat control, on the table within, and on the panel surrounding the whole thing). When I click it, it is releaoading the repeat control and clearing the data. What am I doing wrong? Inevitably, I want to use this in the header of the repeat panels header facet.
<xp:link escape="true" text="Sort by DoorName" id="link1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:viewScope.put("col","DoorName")}]]></xp:this.action>
</xp:eventHandler></xp:link>
<xp:panel style="width:99.0%">
<xp:repeat id="repeat2" rows="500" var="rowdoc2"
repeatControls="true" value="#{view2}">
<xp:this.facets>
<xp:text disableTheme="true" xp:key="header"
escape="false">
<xp:this.value>
<![CDATA[<table class="simple">
<th style="width:200px">TITLE</th>
<th style="width:200px">2nd HEADER</th></table>]]>
</xp:this.value>
</xp:text>
</xp:this.facets>
<xp:table style="width:100.0%" styleClass="simple">
<xp:tr>
<xp:td style="width:200px">
<xp:text escape="true" id="computedField2"
value="#{rowdoc2.DoorName}">
</xp:text>
</xp:td>
<xp:td style="width:200px">
<xp:text escape="true" id="computedField1"
value="#{rowdoc2.DoorDesc}">
</xp:text></xp:td>
</xp:tr>
</xp:table>
</xp:repeat>
</xp:panel>
EDIT>>>>>I put the "col" the XPAGE data's Sort column computed value. Maybe that's the part that's not correct.
<xp:this.data>
<xp:dominoView var="view2" viewName="Doors">
<xp:this.sortColumn><![CDATA[#{javascript:viewScope.get("col")}]]></xp:this.sortColumn>
</xp:dominoView>
</xp:this.data>
Just delete repeat's property repeatControls="true" and it will work as expected.
This property causes the repeat components to render at page load only. You can find a good explanation here
enter image description hereHow to remove this line? this 2 fiels are in the table.
Table is in a Panel and panel is in a table row.
When i put 2 field into same table row. one field stays under the first field. I just want 2 fields to stand side by side(abreast)
Here is the simple code that maybe you can help me to show both 2 field abreast by adding a CSS code. I do not know which CSS property will help me
<xp:table style="width:646.0px">
<xp:tr>
<xp:td>
<xp:inputText id="inputText2"></xp:inputText>
<xp:inputText id="inputText3"></xp:inputText>
</xp:td>
<xp:td>
<xp:inputText id="inputText4"></xp:inputText>
<xp:inputText id="inputText5"></xp:inputText>
</xp:td>
</xp:tr>
</xp:table>
A Table is the element of choice to have items row up, but not as you use it in your example. if you change the code like that, then you don't need to use css at all:
<xp:table style="width:646.0px">
<xp:tr>
<xp:td>
<xp:inputText id="inputText2"></xp:inputText>
</xp:td>
<xp:td>
<xp:inputText id="inputText3"></xp:inputText>
</xp:td>
<xp:td>
<xp:inputText id="inputText4"></xp:inputText>
</xp:td>
<xp:td>
<xp:inputText id="inputText5"></xp:inputText>
</xp:td>
</xp:tr>
</xp:table>
If this is not possible (for whatever reason), then you can change the "display"- style of your inputText- Elements. Although your example alone does not show the described behaviour (your example code does show inline in my tests) you could change the code like this:
<xp:table style="width:646.0px">
<xp:tr>
<xp:td>
<xp:inputText id="inputText2" style="display: inline"></xp:inputText>
<xp:inputText id="inputText3"></xp:inputText>
</xp:td>
<xp:td>
<xp:inputText id="inputText4" style="display: inline"></xp:inputText>
<xp:inputText id="inputText5"></xp:inputText>
</xp:td>
</xp:tr>
</xp:table>
I have a very nice Xpages repeat control created, but cannot seem to get the header column and data column to line up correctly. It may not be an issue with the repeat, because I have always had issues with getting the width of my columns to work correctly.
Ideally I would like each column (except the last) to have a set with, and the last column to grow to the width of the the container. If this is not possible I would like to just know what the best practice is.
<xp:panel>
<xp:table style="width:99.00%"
styleClass="lotusFirst lotusSort">
<xp:tr>
<xp:td style="width:150.0px">
<xp:label value="Employee" id="label1"></xp:label>
</xp:td>
<xp:td style="width:200.0px">
<xp:label value="Computer Number" id="label2"></xp:label>
</xp:td>
<xp:td>
<xp:label value="Create Date" id="label3"></xp:label>
</xp:td>
<xp:td>
<xp:label value="Create User" id="label4"></xp:label>
</xp:td>
<xp:td>
<xp:label value="ID" id="label5"></xp:label>
</xp:td>
</xp:tr>
</xp:table>
<xp:repeat id="repeat1"
rows="#{javascript:compositeData.rows}" var="rowData"
indexVar="repeatIndex" value="#{view1}">
<xp:this.facets>
<xp:text disableTheme="true" xp:key="header"
escape="false">
<xp:this.value><![CDATA[<table class='xspDataTable repeatRowColors' border='0' cellspacing='0' cellpadding='0' width='800px'>]]></xp:this.value>
</xp:text>
<xp:text disableTheme="true" xp:key="footer"
escape="false">
<xp:this.value><![CDATA[</table>]]></xp:this.value>
</xp:text>
</xp:this.facets>
<xp:tr id="rowDataContainer">
<xp:td style="width:150px">
<xp:link escape="true" id="link1"
value="/xpFormPCBuild.xsp">
<xp:this.text><![CDATA[#{javascript:rowData.getColumnValue("employeeName")}]]></xp:this.text>
</xp:link>
</xp:td>
<xp:td style="width:200px">
<xp:text escape="true" id="computedField2">
<xp:this.value><![CDATA[#{javascript:rowData.getColumnValue("computerName");}]]>
</xp:this.value>
</xp:text>
</xp:td>
<xp:td style="width:200px">
<xp:text escape="true" id="computedField3">
<xp:this.value><![CDATA[#{javascript:rowData.getColumnValue("CrtDte");}]]>
</xp:this.value>
</xp:text>
</xp:td>
<xp:td style="width:200px">
<xp:text escape="true" id="computedField4">
<xp:this.value><![CDATA[#{javascript:rowData.getColumnValue("crtUsr");}]]>
</xp:this.value>
</xp:text>
</xp:td>
<xp:td style="width:250px">
<xp:text escape="true" id="computedField5">
<xp:this.value><![CDATA[#{javascript:rowData.getColumnValue("ID");}]]>
</xp:this.value>
</xp:text>
</xp:td>
</xp:tr>
</xp:repeat>
</xp:panel>
Bryan,
You need to put your table header code into the header facet. Basically you're doing 2 tables right now instead of just one. That should solve your problems.
Your markup this code produces isn't valid as the <TR> elements are outside the table. if you move the closing <TABLE> tag to after the repeat control the table columns will be aligned properly. Just make sure the amount of <TD> in the repeat are exactly the same as they are in the header.
I've got two custom controls. One for the table itself (cc-table), and one with 4 pager-controls around the table (cc-pager, 2 Pager, 1 Pager Expand / Collapse, 1 Pager Sizes) with an editable area. I've combined the two cc's in a xpage and when I preview it on the web it looks fine. Even clicking on the pager works and the viewpanel (cc-table) gets updated, but the pager-control itself is not getting updated. F.eg. in the standard pager-control: When I click on "next", the "two" should change to grey text and the "one" should change to a clickable link. In my case the pager keeps unchanged, so that I cannot move back to first page.
edit: the custom control:
<?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.resources>
<xp:styleSheet href="/custom.css"></xp:styleSheet>
</xp:this.resources>
<xp:panel>
<xp:table style="width:100%">
<xp:tr>
<xp:td>
<xp:div style="text-align:left" styleClass="viewCtrlLeft">
<xe:pagerExpand id="pagerExpand1"
collapseText="Alle Komprimieren" expandText="Alle Erweitern"
for="viewPanel1">
</xe:pagerExpand>
</xp:div>
</xp:td>
<xp:td>
<xp:div style="text-align:right" styleClass="viewCtrlRight">
<xp:pager layout="Previous Group Next"
partialRefresh="true" id="pager1" for="viewPanel1">
</xp:pager>
</xp:div>
</xp:td>
</xp:tr>
</xp:table>
</xp:panel>
<xp:panel>
<xp:callback facetName="facet_1" id="callback1"></xp:callback>
</xp:panel>
<xp:panel>
<xp:table style="width:100%">
<xp:tr>
<xp:td>
<xp:div style="text-align:left" styleClass="viewCtrlLeft">
<xe:pagerSizes id="pagerSizes1" for="viewPanel1"></xe:pagerSizes>
</xp:div>
</xp:td>
<xp:td>
<xp:div style="text-align:right" styleClass="viewCtrlRight">
<xp:pager layout="Previous Group Next"
partialRefresh="true" id="pager2" for="viewPanel1">
</xp:pager>
</xp:div>
</xp:td>
</xp:tr>
</xp:table>
</xp:panel>
Set the partialRefresh="false" and it will begin to refresh the pager along with the view itself.
Original Response...
Is the pager a facet of the viewpanel? In cases when I've used a pager with a repeat or data table, I've seen this behavior when I've forgotten to set the for property of the pager.
<xp:pager
partialRefresh="true"
layout="Previous Group Next"
id="pager1"
style="text-align:right"
for="rptRules">
</xp:pager>
Can you post the code so we can see it for ourselves?
I have a data table inside a tabbed panel. The pager control for this data table is not refreshing itself no matter if the pager is inside the tabbed panel or outside. But the data table is advancing to the next page(s) without problem. Has anyone faced this issue? Here is a sample code.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:tabbedPanel id="tabbedPanel1">
<xp:this.selectedTab><![CDATA[#{javascript:viewScope.selectedTab?viewScope.selectedTab:"tabPanel1"}]]></xp:this.selectedTab>
<xp:pager layout="Previous Group Next" partialExecute="true"
partialRefresh="true" for="dataTable1" id="pager1">
</xp:pager>
<xp:tabPanel label="New Tab 1" id="tabPanel1">
<xp:dataTable id="dataTable1" rows="2" indexVar="i">
<xp:this.value><![CDATA[#{javascript:["1","2","3","4","5","6"]}]]></xp:this.value>
<xp:column id="column1">
<xp:text escape="true" id="computedField1" value="#{javascript:i}">
</xp:text>
</xp:column>
</xp:dataTable>
</xp:tabPanel>
<xp:tabPanel label="New Tab 2" id="tabPanel2"></xp:tabPanel>
<xp:tabPanel label="New Tab 3" id="tabPanel3"></xp:tabPanel>
<xp:tabPanel label="New Tab 4" id="tabPanel4"></xp:tabPanel>
</xp:tabbedPanel>
</xp:view>
If you set partialRefresh="false" then the pager will refresh along with all other elements on the page.