There is a column from a view which have the multi-value separator the new line.
But when I drag and drop this view inside my XPage ( as a <xp:viewpanel> ) the multiple values are display within , and not in different lines.
I couldn't find any property in the view column. How can I achive this?
Thanks in advance.
You have to use customConverter here. Because convertList takes only one character as the seperator.
<xp:viewColumn
columnName="SomeColumn"
id="viewColumn1"
contentType="html">
<xp:this.converter>
<xp:customConverter getAsObject="#{javascript:return value;}">
<xp:this.getAsString>
<![CDATA[#{javascript:return #Implode(value, "<br/>")}]]>
</xp:this.getAsString>
</xp:customConverter>
</xp:this.converter>
<xp:viewColumnHeader
value="Header"
id="viewColumnHeader1">
</xp:viewColumnHeader>
</xp:viewColumn>
We are imploding values by <br/> string and providing content type so it won't escape the html output.
Related
I have a view in the xpage. The view will display relevant information depends on user login. In my previous post, thanks for the useful answer and comments, I was able to do the part.
However, I notice that the view cannot sort when click the column header. In Properties, I go to View Column Header, I see the Sort column has a tick in the check box.
I am not sure why the view column header cannot sort, I guess the Filter by category name effect the sort function. It is because when I remove the code in Filter by category name, I can click the column header to sort. But when I add the add code in Filter by category name, I click the column header, it cannot sort.
So my question is why the view column header cannot sort column when use filter by category name? Is there any method that I can make view column header able to sort when clicked?
I would like to post my code below because I don't know which part I did wrong.
<xp:viewPanel rows="30" id="viewPanel3"
pageName="/BookVenue.xsp" iewStyle="width:700.0px">
<xp:this.facets>
<xp:pager partialRefresh="true"
layout="Previous Group Next" xp:key="footerPager" id="pager1">
</xp:pager>
</xp:this.facets>
<xp:this.data>
<xp:dominoView var="view1"
viewName="UserBookedVenueInfo">
<xp:this.categoryFilter><![CDATA[# {javascript:var uName:NotesName = session.createName(session.getEffectiveUserName());
return uName.getCommon();
}]]></xp:this.categoryFilter>
</xp:dominoView>
</xp:this.data>
<xp:viewColumn columnName="Venue"
id="viewColumn7" displayAs="link">
<xp:viewColumnHeader value="Course Name"
id="viewColumnHeader7" sortable="true">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn columnName="ReturnDate"
id="viewColumn8" displayAs="link">
<xp:this.converter>
<xp:convertDateTime type="date"
dateStyle="long">
</xp:convertDateTime>
</xp:this.converter>
<xp:viewColumnHeader value="Remarks"
id="viewColumnHeader8" sortable="true">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn columnName="Remark"
id="viewColumn9" displayAs="link">
<xp:viewColumnHeader value="Remark"
id="viewColumnHeader9" sortable="true">
</xp:viewColumnHeader>
</xp:viewColumn>
</xp:viewPanel>
Would someone let me know my mistakes please. Thanks a lot.
I have read the following posts and I try to use the solution in the view but it still cannot sort.
XPages "filter by category name" for View Panel Controll random error
xpages : Filtering a View Data Source using the keys parameter(filter by category name)
You may want to just ditch the View Control and use a repeat and store the data in a Java object. Then you can sort for any of the columns. I covered this in a webinar I did, see https://www.youtube.com/watch?v=Ln-meA0WXaw&feature=youtu.be
The sample database is at http://www.tlcc.com/mwlug
Howard
In the code below, I am trying to compute the last column using a value that is coming from another column in the view.
I can't figure out why this isn't working, returning the default value all the time:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:viewPanel rows="30" id="viewPanel1" var="varWI">
<xp:this.facets>
<xp:pager partialRefresh="true" layout="Previous Group Next" xp:key="headerPager" id="pager1">
</xp:pager>
</xp:this.facets>
<xp:this.data>
<xp:dominoView var="view1" viewName="WorkItem">
<xp:this.categoryFilter><![CDATA[#{javascript:"F832F30FA6C4686E85257F0E0008E964"}]]></xp:this.categoryFilter>
</xp:dominoView>
</xp:this.data>
<xp:viewColumn columnName="wi_Date" id="viewColumn6" displayAs="link" showCheckbox="true">
<xp:this.converter>
<xp:convertDateTime type="date"></xp:convertDateTime>
</xp:this.converter>
<xp:viewColumnHeader value="Creation Date" id="viewColumnHeader6" style="font-weight:bold">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn id="wi_Intervention1" columnName="wi_Intervention">
<xp:viewColumnHeader id="viewColumnHeader9" style="font-weight:bold" value="Intervention">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn id="wi_Category1" columnName="wi_Category">
<xp:viewColumnHeader id="viewColumnHeader10" style="font-weight:bold" value="Category">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn id="viewColumn1">
<xp:this.facets>
<xp:viewColumnHeader xp:key="header"
id="viewColumnHeader1">
</xp:viewColumnHeader>
</xp:this.facets>
<xp:this.value><![CDATA[#{javascript:var s:string = varWI.getColumnValue('wi_Category');
if(s.equals("CATEGORY_DISCOUNT")) {
return "99. Discount"
} else if(s.equals("CATEGORY_INCOMPATIBILITY")) {
return "88. Incompatibility"
} else {
return "--. " + s.toLowerCase();
}}]]></xp:this.value>
</xp:viewColumn>
</xp:viewPanel>
</xp:view>
This part:
var s:string = varWI.getColumnValue('wi_Category');
if(s.equals("CATEGORY_DISCOUNT")) {
return "99. Discount"
} else if(s.equals("CATEGORY_INCOMPATIBILITY")) {
return "88. Incompatibility"
} else {
return "--. " + s.toLowerCase();
}
always return the value in lower case. The column values are text, and the field in the form as well.
Example: if the column value is "CATEGORY_DISCOUNT" what the column displays is "--. category_discount".
It seems it knows the column value, as it puts it in lower case, but it won't see it as equals to the value I check for in the "if" statement.
Quite confused....
Try s=="CATEGORY_DISCOUNT". You're casting it to an SSJS string, not a java.lang.String. .equals() may not work for SSJS strings.
Fellow coders, the problem had nothing to do with the code, but with the values saved in the document.
Turns out the drop down used to enter values has a formula that goes like this:
FrenchValue + " | " + Alias
Of course, on the web, the extra space is actually saved with the alias. So I had an extra space at the beginning of each value I was looking for...
I have been caught by that once or twice, and now my colleague also learned a valuable lesson!!!
Standard code started working like a charm once the extra space was removed from the view column that was used in the drop down of the form that filled the field in the view column.
Final column code was similar to this:
var s:string = viewEntry.getColumnValue('Intervention');
s = s.trim();
var col = sessionScope.lang=="en" ? 3 : 2;
#DbLookup(#DbName(), "VWL022", s, col);
Is there any equivalent for lotus notes Dialog list in xpages? Or, if it's possible, an xpage combobox ''which accepts'' multiple values selected.
Thanks for your time
Use a xe:djextListTextBox to collect and show multiple values, use xe:valuePicker to add values from an existing list to ListTextBox and use optionally a button to prompt for a new value and to add it to ListTextBox.
This is an example for xe:djextListTextBox and xe:valuePicker:
<xe:djextListTextBox
id="djextListTextBox1"
multipleSeparator=","
multipleTrim="true"
defaultValue="abc,def"
value="#{viewScope.test}">
</xe:djextListTextBox>
<xe:valuePicker
id="valuePicker1"
for="djextListTextBox1"
pickerText="Add">
<xe:this.dataProvider>
<xe:simpleValuePicker>
<xe:this.valueList><![CDATA[#{javascript:
["abc","def","ghj","klm","nop","xyz"]
}]]></xe:this.valueList>
</xe:simpleValuePicker>
</xe:this.dataProvider>
</xe:valuePicker>
I like this approach as it is for the user easy to add and to delete values and it looks good.
An alternative is the combination of xp:inputText and xe:valuePicker:
<xp:inputText
id="inputText1"
multipleSeparator=","
value="#{viewScope.test}"
defaultValue="abc,def">
</xp:inputText>
<xe:valuePicker
id="valuePicker1"
for="inputText1">
<xe:this.dataProvider>
<xe:simpleValuePicker>
<xe:this.valueList><![CDATA[#{javascript:
["abc","def","ghj","klm","nop","xyz"]
}]]></xe:this.valueList>
</xe:simpleValuePicker>
</xe:this.dataProvider>
</xe:valuePicker>
Users can add their own new values as the InputText field is editable. This approach might be a good solution if new values are allowed and users know how to edit values considering the multiple separator.
In case you'd like to have each value in a separate line you can use xe:djTextarea and set multipleSeparator to newline:
<xe:djTextarea
id="djTextarea1"
multipleSeparator="#{javascript:'\n'}"
value="#{viewScope.test}"
defaultValue="#{javascript:['abc','def']}"
cols="30">
</xe:djTextarea>
<xe:valuePicker
id="valuePicker1"
for="djTextarea1">
<xe:this.dataProvider>
<xe:simpleValuePicker>
<xe:this.valueList><![CDATA[#{javascript:
["abc","def","ghj","klm","nop","xyz"]
}]]></xe:this.valueList>
</xe:simpleValuePicker>
</xe:this.dataProvider>
</xe:valuePicker>
The text box grows and shrinks with the number of selected values automatically.
The ValuePicker control in the Extension Library provides the Dialog List functionality, but not with the "Allow values not in list" functionality.
I am trying to use an xpages datatable and set the cell colour of the cells in a column to be different based on the cell value. What I am finding is that although the datatable is bound to a view and the collection is specified (to get the row value) this seems to not be available to the style section.
Here is an example:
<xp:dataTable id="dataTable8" rows="30" var="doc1">
<xp:this.value><![CDATA[#{javascript:var View:NotesView = DivisionsView;
View.getAllEntriesByKey("ViewName")}]]></xp:this.value>
<xp:column id="column1" style="width:75px;font-family:Tahoma">
<xp:text escape="true" id="computedField1">
<xp:this.value><![CDATA[#{javascript:doc1.getColumnValues()[1]
}]]></xp:this.value>
<xp:this.style><![CDATA[#{javascript:v=doc1.getColumnValues()[1];
if(v=="Yes"){"background-color:rgb(255,0,0)"}}]]></xp:this.style>
</xp:text>
<xp:this.facets>
<xp:label value="Header" id="label1" xp:key="header">
</xp:label>
</xp:this.facets>
</xp:column>
</xp:dataTable>
This just shows a doc1 not found error. Does this mean the data bound to the datatable is not available to the style part of it? Is there a way to do this?
Any suggestions would be appreciated!
Edit: I cannot change the table cell style based on the view entries value, here is an exmaple that throws the doc1 not found error:
<xp:column id="column1">
<xp:this.style><![CDATA[#{javascript:v=doc1.getColumnValues()[1];
if(v=="Yes"){"background-color:rgb(255,0,0)"}}]]></xp:this.style>
<xp:text escape="true" id="computedField1">
<xp:this.value><![CDATA[#{javascript:doc1.getColumnValues()[1]
}]]></xp:this.value>
</xp:text>
<xp:this.facets>
<xp:label value="Header" id="label1" xp:key="header">
</xp:label>
</xp:this.facets>
</xp:column>
The stylesheet property is rendered not only for every value in the column, it is calulated for each row. This incudes the facet too.
This means if your column has a header and/or a footer, the stylesheet property is calculated for these invisible rows, but there is no row value (doc1).
If you change your code and add a try/catch you can see the result.
<xp:column id="column1">
<xp:this.style>
<![CDATA[#{javascript:
try{
v=doc.getColumnValues()[1];
if(v=="Yes"){"background-color:rgb(255,0,0)"}
}catch(e){
return "background-color:rgb(255,0,255)";
}}]]>
</xp:this.style>
...
...
</xp:column>
There are a few things I would like you to check in your code.
First the code to bind data:
var View:NotesView = DivisionsView;
View.getAllEntriesByKey("ViewName")
What is DivisionsView? The actual code to bind would look something like this:
var View:NotesView = database.getView("ViewName");
View.getAllEntriesByKey("KeyName")
Second, in your code to add style you have used single = rather than == in if condition. So the code would be something like this:
v = doc1.getColumnValues()[1];
if (v=="Yes") {
"background-color:rgb(255,0,0)"
}
Do these suggestions make it work?
I have given up on a datatable and got things to work using a repeat on a table row. That way I can control the style of the entire row and therefore each cell, it appears you cannot do this in a datatable as the options are all data column based. Thanks for your help though
I have a view panel with a categorized view as it source. The data I am viewing can have various statuses (Status='Submitted' , Status = 'Approved') etc.
I have a combo box on my page that lets me to select the status to display in the view. That all works great with the exception that the xPages view does the same annoying thing as in the client when displaying a categorized view. And that is, it does not display the categorized columns then a full text index search filter is in place.
Other than creating a view and a corresponding xpage for each status, is there any way to filter by status and still display the categorized field?
I don't think you need 2 views or 2 view panels on XPage.In the view that was categorized by Status, put the below formula for the categorized Status column :
Status : "All"
The above formula will add category 'All', and shows all documents irrespective of status.
If I understand right:
You want to use "single category" to select by "Status" (e.g. "Draft") and still want to show the column with "Draft"?
.... besides that you probably would be better off to just show it at a header above the view, since it saves you a full column, you simply add another column to your view (unsorted) that repeats the field "Status". If you don't want to add a view column, you can create a computed column that uses the status field.
I went with two view panels / views. If "All" is selected then the view that is categorized by client is displayed. Otherwise the view categorized by status then client is displayed. The category filter is then used for that view.
<xp:viewPanel rows="30" id="viewPanel1">
<xp:this.facets>
<xp:pager partialRefresh="true" layout="Previous Group Next"
xp:key="headerPager" id="pager1">
</xp:pager>
</xp:this.facets>
<xp:this.data>
<xp:dominoView var="view1"
viewName="vwRequestsAllByClientsName">
</xp:dominoView>
</xp:this.data>
<xp:this.rendered><![CDATA[#{javascript:var v = getComponent("comboBoxFilterBy").getValue();
return (v=="All" || v==null);
}]]></xp:this.rendered>
<xp:viewColumn columnName="ClientName" id="viewColumn1">
<xp:viewColumnHeader value="ClientName"
id="viewColumnHeader1">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn columnName="RequestNum" id="viewColumn2">
<xp:viewColumnHeader value="Request #"
id="viewColumnHeader2">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn columnName="APPSNo" id="viewColumn3">
<xp:viewColumnHeader value="APPS Number"
id="viewColumnHeader3">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn columnName="LoanType" id="viewColumn4">
<xp:viewColumnHeader value="Loan Type"
id="viewColumnHeader4">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn columnName="LoanAmount" id="viewColumn5">
<xp:viewColumnHeader value="Loan Amount"
id="viewColumnHeader5">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn columnName="Term" id="viewColumn6">
<xp:viewColumnHeader value="Term" id="viewColumnHeader6">
</xp:viewColumnHeader>
</xp:viewColumn>
</xp:viewPanel>
<xp:viewPanel rows="30" id="viewPanel2">
<xp:this.facets>
<xp:pager partialRefresh="true" layout="Previous Group Next"
xp:key="headerPager" id="pager2">
</xp:pager>
</xp:this.facets>
<xp:this.data>
<xp:dominoView var="view2"
viewName="vwRequestsAllByStatusClientsName">
<xp:this.categoryFilter><![CDATA[#{javascript:var v = getComponent("comboBoxFilterBy").getValue();
v}]]>