I'm using a standard viewPanel to display view data in an XPage.
The application is using the Bootstrap3.2.0.
To make the rendered table responsive, I added some bootstrap classes to both header and column.
<xp:viewColumn columnName="StatusDescription"
id="viewColumn4" styleClass="hidden-xs hidden-sm">
<xp:viewColumnHeader value="Status"
id="viewColumnHeader4" styleClass="hidden-xs hidden-sm">
</xp:viewColumnHeader>
</xp:viewColumn>
When I resize my browser window, the column is hidden correctly, but the header remains. Apparantly, the styleClasses are not added to the th tag, but to tags inside the th.
<th role="columnheader" scope="col">
<div class="hidden-xs hidden-sm">
<span>
<span
id="view:_id1:_id2:facetMiddle:pnlViewPanl:viewColumn4:__internal_header_title_id"
class="hidden-xs hidden-sm">Status
</span>
</span>
</div>
</th>
The result is that the table header is out of sync with the displayed data.
Does anybody know how I get the style class in the th tag?
It looks to me that either the view class renderer or the view column definition properties, or both, are messed up.
You would expect that <xp:viewColumnHeader styleClass="hidden-xs hidden-sm"> controlled the th style class but as you have seen it doesn't.
In order to achieve what you are trying to do you could try to extend the renderer class for the viewPanel that is DataTableRendererEx. But the approach might appear outlandish to you and, personally, way overkill considered that IBM has many of the class' methods declared as private and that would force you to rewrite the greater part of the class' code just to get your hands on the bit you need to change.
There would be some hope, in the sense that the code actually looks for the presence of a headerClass property for the xp:viewColumn. But, lo and behold, the property is not explicitly defined for the component and, in fact, you don't see it among the other properties of the viewColumn from Designer. Even if you were to explicitly write it through the xsp source code perspective Designer would not let you do it, it would not compile. You could ask IBM to fix the property definition file for the viewColumn component but frankly I don't know how feasible that is: XPages is in disrepair.
So what I can offer you is a workaround. There's a way to sneak in properties via theme definition (I wrote a bit about it in this blog article). So, in order to use this workaround, you have to use a theme. If you already have it you can simply add this rule:
<control>
<name>Column.View.Hidden</name>
<property>
<name>headerClass</name>
<value>hidden-xs hidden-sm</value>
</property>
<property>
<name>styleClass</name>
<value>hidden-xs hidden-sm</value>
</property>
</control>
The control name is arbitrary. Generally I use the original name of the control family -Column.View - and append the name of the variation - .Hidden in this case. If it were just Column.View the rule would apply to all the viewColumns everywhere. With Column.View.Hidden I have a rule I can apply on a per case basis.
At this point I just have to specify a different theme Id (themeId property) for the column I want to behave differently.
<xp:viewColumn columnName="columnName" id="viewColumn1" themeId="Column.View.Hidden">
<xp:viewColumnHeader value="columnHeaderName" id="viewColumnHeader1" />
</xp:viewColumn>
Related
n work order tracking application on Vendor field we need to have a custom look up that would display vendor details based on some condition. I have created a custom dialog in order to display this custom look up. This custom dialog maps to a relationship between WORKORDER and CXDEMO object (CXDEMO holds the data based on custom condition). Now when user clicks on the navigation menu on WORKORDER.VENDOR field then the custom look up appears and the data also gets displayed in the dialog however after selecting the value it does not get persisted to the WORKORDER.VENDOR field. I do understand that this can be achieved using bean class however I would like to understand whether there is any other way to achieve the same. Below is the dialog,
<dialog id="CXDEMO" label="Frame agreement vendors" relationship='CXDEMO'>
<table id="CXDEMO_1" label="Vendors" inputmode="readonly" selectmode="single">
<tablebody displayrowsperpage="6" filterable="true" filterexpanded="true" id="CXDEMO_grid1_1_1_pmalert_table_tablebody">
<tablecol dataattribute="vendor" id="CXDEMO_grid1_1_1_pmalert_table_tablebody_2" mxevent="selectrecord" mxevent_desc="Go To %1" sortable="true" type="link"/>
</tablebody>
</table>
<buttongroup id="CXDEMO_2">
<pushbutton default="true" id="CXDEMO_2_2" label="Cancel" mxevent="dialogcancel"/>
</buttongroup>
</dialog>
You need to specify a bean class to manage your dialog but I don't think you need to create a new one. You should only change your definition to use the lookup bean.
Like this:
<dialog id="CXDEMO" label="Frame agreement vendors" relationship='CXDEMO' beanclass="psdi.webclient.system.beans.LookupBean">
By referencing this bean you tell Maximo what class to use for the important selectrecord event/method.
What I am trying to do should be very simple. I have a multi-value text field called activityLog. The field is set via a java method when various things happen. If I look at the backend data, it clearly is a multivalue field.
I went through the steps in Dave Leedy's Notes-in-9 #14, as well as tried to follow Tommy Valand's blog post here --> http://dontpanic82.blogspot.com/2011/03/repeat-controls-and-multivalue-fields.html. Neither seems to work for me. The result is that they list contents that are concatenated together in both cases.
The values ARE returned as a VECTOR. I can verify this by getting the size(), and by isolating specific elements using elementAt(). I was about to just make a for loop to get around this, but I want to know why it is failing. Repeats always seem to give me trouble. I was also want to leave straight forward code for me or future developers. There is probably something easy that I am missing.
<xp:repeat id="repeat1" var="rowData">
<xp:this.value><![CDATA[#{javascript:document1.getItemValue("activityLog")}]]></xp:this.value>
<xp:text escape="true" id="computedField14" value="#{javascript:rowData}">
</xp:text>
</xp:repeat>
UPDATE: The Repeat control is reading the Vector, but is NOT adding a new line automatically after each iteration. Trying to add a new line manually is not working, having tried JS "/n" & "/r" and #NewLine()
The use of <br/> or <xp:br /> suggested by Tim is an effective approach. But consider fixing the issue in the <xp:text/ > element instead.
The <xp:text />element creates a <span /> in the output HTML by default. Spans are, by default, displayed inline meaning that they do not have a line feed ahead of them. But you can add a CSS rule to the element which makes it a block element instead of inline. Add this CSS using a style tag: <xp:text style="display:block;" />or in a CSS class that include the rule {display: block}
A final way is to tell the the page to render a <div /> tag instead of a <span /> tag. DIVs are, by default, block elements. Do this with: <xp:text tagName="div"/>. (however, be careful because the default behavior of both DIVs and SPANs can be changed).
Browsers ignore whitespace except inside tags specifically intended to display whitespace. Add a break tag (<br />) or component (<xp:br />) inside the repeat, and the browser will display a new line for each iteration of the repeat.
There is a simple way of breaking out a multivalue fields, you only missed one thing. Accessing each row, I've added the rowColl variable indexVar="rowColl" and so you access it rowData[rowColl]
<xp:repeat id="repeat1" var="rowData" indexVar="rowColl">
<xp:this.value><![CDATA[#{javascript:document1.getItemValue("activityLog")}]]></xp:this.value>
<xp:text escape="true" id="computedField14" value="#{javascript:rowData[rowColl]}">
</xp:text>
</xp:repeat>
Is it possible to generate viewColumn dynamicly using repeat control,? I have a viewPanel and repeater that runs over all columns in this view and try to create viewColumn control for each as below. It doesnt throw any error for me but also no table apear on screen ... I would like to generate it dynamicly as I have many existing views with up to 20 columns so maintaining this manualy would be not so nice. I also need to use viewPanel because a first view column is categorized so I need the viewPanel mechanism for epanding/collapsing these categories.
<xp:viewPanel rows="30" id="viewPanelMain" var="row" value="#{viewDS}">
<xp:repeat id="repeat1" rows="100" value="#{javascript:myView.getColumns()}" disableOutputTag="true" var="column">
<xp:viewColumn>
<xp:this.columnName><![CDATA[#{javascript:column.getItemName()}]]></xp:this.columnName>
<xp:viewColumnHeader value="#{javascript:column.getTitle()}"></xp:viewColumnHeader>
</xp:viewColumn>
</xp:repeat>
</xp:viewPanel>
Mabe there is some better way how to achieve the same result ... Any idea?
Have a look at the Dynamic View Panel control from the Extension Library (included as part of the Domino 9 installation). The following should work using your example:
<xe:dynamicViewPanel value="#{viewDS}" id="dynamicViewPanel1" var="viewEntry">
</xe:dynamicViewPanel>
You can then consider customizing the look and fel using a customizer bean, you can add a pager, you can add an onColumnClick event etc.
My repeat works, inside a viewPanel
...to create numerous view columns.
Need to set "true" -- for repeatControls and removeRepeat
I'm using the Extension Library for creating XPages and I want to use a view, where i can use some inline buttons (buttons in every row of the view) and I also want to use the functionality of the data view where I can expand the content of the current row.
I want to use one of those inline buttons, to expand the content of this row, because before the functionality of this button can be executed, the user has to enter some data in an inputText-field.
So the questions are?
- How can I add inline buttons (using SSJS) to a data view?
- Do you know any other way to solve my problem?
Thanks!
In the Extlib database the expansion with a custom form was done using a link. I would stick to the links -> gives you the most options (client side, server side). Stick to those. If you really need that "buttony" look (which does IMHO not look very much like a web application), use CSS to style the link to look like a button. The OneUI has instructions for that (or steal them from Twitter bootstrap).
The OneUI is worth another look suggesting a different visual clue for expand/collapse.
You should be able to do this within the confines of a dataView by adding a facet for "detail" and using collapsible detail.
For the dataView, set collapsibleDetail="true", add in a panel to the detail facet, then put the elements you want to display when they click to expand in that panel.
<xe:dataView id="dataView1" collapsibleDetail="true" detailsOnClient="true">
<xp:this.facets>
<xp:panel xp:key="detail">
<xp:button id="Mybutton" value="My button"></xp:button>
<xp:label value="This is the label" id="label1" for="Mybutton"></xp:label>
</xp:panel>
</xp:this.facets>
<xe:this.summaryColumn>
<xe:viewSummaryColumn columnName="lastname"></xe:viewSummaryColumn>
</xe:this.summaryColumn>
<xe:this.extraColumns>
<xe:viewExtraColumn columnName="city"></xe:viewExtraColumn>
<xe:viewExtraColumn columnName="state"></xe:viewExtraColumn>
<xe:viewExtraColumn columnName="zip"></xe:viewExtraColumn>
</xe:this.extraColumns>
<xe:this.data>
<xp:dominoView var="view2" viewName="ByName-First"></xp:dominoView>
</xe:this.data>
</xe:dataView>
Now, I'm not positive on how to bind it to the contents of the documents displayed, but I'm sure there's a way. I know how to access the document in a repeat, but not in a dataView, so I would probably do it in a repeat (unless you figure it out and post it to us here!)
Hopefully, that moves you in the right direction.
Is there any way to open the document in a new browser tab when the link in a view panel is clicked?
You have two options. one is the way that Tim explained. And another, you can compute the view column value as link. There you can use the _new or _blank property.
Simply say, View Column can be given as a HTML. There you can compute the page with html href tag.
"target" is one of the properties of the view panel component. If you specify "_blank" (as Ferry suggested) as the value of that property, it should apply it to the link for each row. But bear in mind, you're ultimately at the mercy of the end user's browser settings. One user may get a new tab, another may get an entirely new window, and yet another might get nothing because the link was treated as a popup and blocked.
This is a browser setting only. You only have to put target="_blank" in the link.
After trying this I decided against using it for a number of reasons but want to post the procedure below to implement it.
On the view column Display tab select computed value and enter a formula as follows:
var _row:NotesXspViewEntry = viewEntry;
var _unid = _row.getUniversalID();
return "<a href='0/" + _unid + "?OpenDocument' TARGET='_new'>" + _row.getColumnValue("RequestNum") + "</a>"
On the Display Tab select HTML.
Just adding another option to the mix.
If you set Column Display as 'hidden' you can then put a standard link control in the column. E.g. if the desired column link text was a 'First Name' column, which opened a new tab to the page 'Person.xsp'
<xp:viewColumn columnName="firstName" id="vcFirstNameCol" displayAs="hidden">
<xp:viewColumnHeader value="First Name" id="vchFirstName"></xp:viewColumnHeader>
<xp:link escape="true" text="#{javascript: rowData.getColumnValue('firstName');}" id="link1" value="Person.xsp"
target="_blank">
<xp:this.parameters>
<xp:parameter name="documentId" value="#{javascript:rowData.getUniversalID();}"></xp:parameter>
<xp:parameter name="action" value="openDocument"></xp:parameter>
</xp:this.parameters>
</xp:link>
</xp:viewColumn>