Xpages MobileControls and Categorized View - xpages

I have downloaded the Xpages mobile Controls from Openntf
and had a problem with the categorized view
I've used the ViewWithCategoriesAndDocument example to show a View with one Category this works fine.
But how do I use a View with multiple Categories?
has someone a Idea?

Are you using 853 and Upgrade Pack 1 that'll give you the Extlib controls along with the new Mobile controls?
If so, use a Data View in a Mobile Page control. There you can add the multiple categories along with a summary and the mobile theme will take care of the rest.
<xe:dataView id="dataView2" pageName="#p03"
openDocAsReadonly="true">
<xe:this.data>
<xp:dominoView var="dominoView1" viewName="yourMultiCategorizedView" expandLevel="1"></xp:dominoView>
</xe:this.data>
<xe:this.summaryColumn>
<xe:viewSummaryColumn columnName="Topic"></xe:viewSummaryColumn>
</xe:this.summaryColumn>
<xe:this.categoryColumn>
<xe:viewCategoryColumn columnName="parentCategory"></xe:viewCategoryColumn>
<xe:viewCategoryColumn columnName="subCategory"></xe:viewCategoryColumn></xe:this.categoryColumn>
</xe:dataView>
Note in the above snippet that expandLevel="1" - this will collapse all the categorized views and make each category and subcategory selectable to expand those rows.

Note that expandLevel="1" doesn't always work right. See
https://www-304.ibm.com/support/entdocview.wss?uid=swg1LO58079
I wasted almost a day trying to get this one to work before I found out.

Related

XPages ApplicationLayout: how to control TitleBar tabs from a view

I am using the Application Layout for an application we are creating. We would like to controls the tabs that appear on the title bar. The tabs are defined in a document, with a french title, english title and NotesID of what will be the default document shown for that tab.
With so many controls available, what would be the best way to achieve that? What kind of control can I use to add to the TitleBar that would end up doing the functionality I am looking for?
One additional thing: I need to add a few drop downs, ideally in the titlebar as well, that will set some values used to control what is displayed in the tabs contents and to control what the search will actually search for (language, province, department). What would be the best approach adding thse drop downs to the titlebar?
And by the way, where do you guys get all that information? I have TLCC's courses, IBM's XPages books (that I have not read from cover to cover, I admit) and I still find it very hard to things more advanced than displaying a view and do come CRUD with documents. There are so many containers that can contain a wide variety of objects... Pretty confusing right now what needs to be in what in order to make this all work together.
Thanks a lot,
Ben
Use xe:repeatTreeNode to create several tabs programmatically in title bar:
create an array of objects with label and unid (UniversalID) from your document in value
define a variable tab for repeat
define a xe:basicLeafNode as children with a label tab.label and a href link with tab.unid
<xe:this.titleBarTabs>
<xe:repeatTreeNode
indexVar="aaa"
value="#{javascript:
[ {label:'aaa',unid:'...id..aaa...'},
{label:'bbb',unid:'...id..bbb...'},
{label:'ccc',unid:'...id..ccc...'}
]}"
var="tab">
<xe:this.children>
<xe:basicLeafNode label="#{tab.label}">
<xe:this.href><![CDATA[#{javascript:
"yourXpages.xsp?action=openDocument&documentId=" + tab.unid;
}]]></xe:this.href>
</xe:basicLeafNode>
</xe:this.children>
</xe:repeatTreeNode>
</xe:this.titleBarTabs>
This will show the labels in title bar and open the assigned document clicking on them.

Color fields in XPages

I have been working on a database in Lotus Domino Designer 8.5, specifically with XPages. I've noticed that I can include a field on a FORM as a color field, with a color picker, but the same functionality is not available within XPages. Basically, the person populating the document would pick a color (Green, Yellow, Red, or Blue), and I would like the field to show that color block. I am fairly new to Domino Designer, so I don't know if I'm missing something or some coding technique, but any advice or guidance would be helpful.
You can use new HTML5 input type of color.
<xp:inputText id="inputText1" type="color"></xp:inputText>
Note: It does not work in Internet Explorer.
I did something like this in an XPages "spreadsheet". Take a look at my blog article at http://www.teamspace.ca/TeamSpace/Blog.nsf/dx/using-xpages-to-develop-complex-reports-part-2.htm
You want to look at CSS.
You should create a stylesheet and then add that style sheet to the page as a resource. Then you simply apply that style to your resource. So you would set in the stylesheet how you want fields to look if they are black. Then you apply that style to any fields you want to have the same color. This allows you to change all fields at the same time by simply modifying the stylesheet, or having styles computed easily.
I will see if I can dig up some code for you.
I would stay away from the individual styling that Domino designer uses.
I did sth like this in an application using XPages and I used this one:
http://www.eyecon.ro/colorpicker/
Very easy to implement to a editbox control on an XPage.

Show custom controls on webpage in other order than layed out in DDE - Xpages

I have a number of custom controls layed out on an xpage. I want these controls to be displayed in the order of a setting in a notes document
So my xpage might look like this in DDE
CustomControl1
CustomControl2
CustomControl3
CustomControl4
but when the custom control is displyed on the webpage the custom controls should be displayed in the following order (based on the setting document)
CustomControl4
CustomControl1
CustomControl2
CustomControl3
anyone have any ideas how to accomplish this (server side)
You can use the xp:switchFacet in combination with a xp:repeat to calculate the order at runtime like this:
<xp:repeat
id="repeat1"
rows="30"
var="rowEntry">
<xp:this.value><![CDATA[#{javascript:var arr = ["Control1","Control3","Control2"];return arr;}]]></xp:this.value>
<xe:switchFacet
id="switchFacet1"
selectedFacet="#{javascript:rowEntry}">
<xp:this.facets>
<xp:panel xp:key="Control1">Control1</xp:panel>
<xp:panel xp:key="Control2">Control2</xp:panel>
<xp:panel xp:key="Control3">Control3</xp:panel>
</xp:this.facets>
</xe:switchFacet>
</xp:repeat>
Instead of the Array arr you can use data based on a document or xsp.propertie. The Output of this code is Control1 Control3 Control2 and in your Designer you have your controls inside switchFacet in following order: Control1 Control2 Control3.
Without knowing the real pain of your project I can only assume that the individual position needs to be defined at runtime, or something like that.
In general: controlling a page's layout is a pure CSS job. On the resulting page almost anything can be positioned almost anywhere within the page's range, and it doesn't matter where it was placed at design time. So, if you enclose your custom controls within their own containers (panels / divs) then you should be all set. You might define positioning classes in CSS and then have some SSJS code decide which class is assigned to what div.
If for example you have a custom control for each day of the week, and you always want to have the current day at the top-most position, then you could define 7 css classes as in ".today", ".todayPlus1", ".todayPlus2" ... ".todayPlus6". Write your positioning rules for each class. And finally compute each panel's styleClass property based on the current week day.

Hiding Category when there are no documents xpages

I have an xpage with a categorized view and the first column shows categories that the user may not have access to see the documents underneath them. So they should be hidden from the view on the web. I am sure there is an easy way to do this using something like......
<xp:viewPanel value="#{view1}" var="rowData" id="viewPanel1" rows="50">
if (rowData.IsCategory()) {
if (rowData.(WHATEVER THE PROPERTY IS THAT SHOWS # OF DOCUMENTS FOR THE CATEGORY)) < 1 {
DON'T SHOW ROW
}
}
But I can't find the property for # of documents. Is there one? If not, then would you use a repeat control to handle empty categories? If that's the proper way to handle this, can you point me to some code example that would handle this using the repeat control. It's one of the trickier concepts for me right now. Thanks in advance.
There's a setting on the view itself (not the view panel, the actual view design element) to suppress empty categories. If you enable that setting for the view, any view panel bound to it should respect the setting.

Using the DataView in XPages Extension Library Mobile Controls

On page 1 of a mobile app I need to display categories from a categorised view. When the user selects a category the app should transition to page 2 showing documents in the selected category. The customer does not want the category to expand/collapse on the first page of the app.
Would I use the DataView for this? Any advice on how best to achieve this?
Thanks.
if something like this http://sutol.mapsys.cz/ (application is in Czech, but you can still see what it is about) is what you need, I can send you the code.
"dopoledne" and "odpoledne" are categories
Yes what you want is a dataview, there is a property to disable collapsing / expanding of the category sections.
My suggestion would be to view either of the remodelled templates "Discussion 853 XL" or "Teamroom 853 XL" that come with the ExtLib, these applications have been modified to add mobile front ends and are great examples of how to build mobile applications
I do something along these lines in mobile pages of XPages Help Application - Contents and Index views both drill down from categories to documents in the category. I think I just use a repeat control.
The one thing to bear in mind is that you cannot currently redirect to the current Mobile Page with different parameters. That's why I switch between two mobile pages that use the same Custom Control for the view.

Resources