hello Howard,

that sounds like something I can use. Can you share the code somewhere?

 

Just to revive the discussion here are some snippets from my current code:

 

Code on my single Page application 

 Hi Patrick,

 

Theres an example close to this in the teamroom template that ships with the extlib. To view a subteam on mobile a list of all the subteam members are added to the page and clickable. the below code is a snippet of the "mobileViewSubteam" custom control in teamroom. It would need to be modified to your view / datasource.

 

Whats happening here is that the previous page adds the subteam to the url, this page searchs for that subteam and opens that domino document, then the reapeat list adds a <xe:djxmLineItem for each of the subteam members and adds a "moveTo" property with a parameter so that the next page can open the profile document for that member, this is all wrapped up in a round rect list to give that mobile styling.

 

Hope this helps.  

 

                  <xp:this.data>

<xp:dominoDocument formName="Subteam" action="openDocument"

var="subteam" ignoreRequestParams="true" computeWithForm="onsave">

<xp:this.documentId><![CDATA[#{javascript://

var db:NotesDatabase = database;

var vw:NotesView = db.getView("xwvAllSubteamsLookup");

var ve:NotesViewEntry = vw.getEntryByKey(param.subteam, true);

var unid = null;

if (null != ve) {

unid = ve.getUniversalID();

}

return(unid);

}]]></xp:this.documentId>

</xp:dominoDocument>

</xp:this.data>

<xe:djxmRoundRectList id="djxmRoundRectList1">

<xp:repeat id="repeatList" value="#{subteam.PriNameSelection}"

var="rowData" indexVar="membersIndex" rows="300" first="0">

<xe:djxmLineItem id="djxmLineItem1" label="#{javascript:rowData}"

moveTo="#profile&amp;profile=#{javascript:rowData}">

</xe:djxmLineItem>

</xp:repeat>

</xe:djxmRoundRectList> 

 I managed to do this using a repeat control around a djxmLineItem. I humbly show you my code for your inspection. It drills down through three categories, Project Name, Phase, Location, and each category has its own appPage, and when you finally get to the document summary text, that uses its own page too. One advantage to doing it this way is you can bookmark any page you want, and it will work. I originally did this using a dataView control with mutiple categoryColumns defined, but I didn't like the way it navigated on the blackberry because, if you were to select a category, and it was at the bottom of a page, then the category would expand out onto the next page which you could not see. The only hint you got that there were subcategories under a category was that a "Next" button would appear on the bottom. I'm including the way Howard Greenberg described doing it as well, which you'll see in the ProjectListOld page. I ultimately didn't use this because you have to use href here instead of moveto, and moveto has the "transition" property you can set to "slide" and I didn't know how to do this with href. I'm sure someone reading this could tell me how. I'm presently having trouble getting the document to open doing it this way, but I have the categories working.

 

dbLookupArray.js is just a javascript lib I created by copying and pasting the code from Tom Steenbergen here http://xpageswiki.com/web/youatnotes/wiki-xpages.nsf/dx/Work_with_DbColumn_and_DbLookup#+DbColumn+and+DbLookup+as+above+but+with+cache+on+request+

 

 <xp:this.resources>

<xp:script src="/dbLookupArray.jss" clientSide="false"></xp:script>

</xp:this.resources>

<xe:singlePageApp id="DetailsMobileApp"

selectedPageName="Details">

<xe:appPage id="detailsHome" pageName="Details"

resetContent="false">

<xe:djxmHeading id="homePageHeading"

label="Project Framework Details">

</xe:djxmHeading>

<xe:djxmLineItem id="djxmLineItem1" moveTo="ProjectList"

label="By Location" transition="slide">

</xe:djxmLineItem>

</xe:appPage>

<xe:appPage id="projectListOld" pageName="ProjectListOld">

<xe:djxmHeading id="projectListHeading" label="Projects"

back="Home" moveTo="Details">

</xe:djxmHeading>

<xe:outline id="outline2">

<xe:this.treeNodes>

<xe:repeatTreeNode var="projectName">

<xe:this.value><![CDATA[#{javascript:@Unique(@DbColumn(@DbName(),"mByLocation",1))}]]></xe:this.value>

<xe:this.children>

<xe:basicLeafNode>

<xe:this.label><![CDATA[#{javascript:return projectName}]]></xe:this.label>

<xe:this.submitValue><![CDATA[#{javascript:return projectName}]]></xe:this.submitValue>

<xe:this.href><![CDATA[#{javascript:"#Phases"}]]></xe:this.href>

</xe:basicLeafNode>

</xe:this.children>

</xe:repeatTreeNode>

</xe:this.treeNodes>

</xe:outline>

</xe:appPage>

<xe:appPage id="projectList" pageName="ProjectList">

<xe:djxmHeading id="djxmHeading4" label="Projects"

back="Home" moveTo="Details">

</xe:djxmHeading>

<xp:repeat id="repeatList" var="rowData"

indexVar="membersIndex" rows="10" first="0">

<xp:this.value><![CDATA[#{javascript:@Unique(@DbColumn(@DbName(),"mByLocation",1))}]]></xp:this.value>

<xe:djxmLineItem id="djxmLineItem2"

label="#{javascript:rowData}" transition="slide">

<xe:this.moveTo><![CDATA[#{javascript:"#Phases&ProjectName=" + rowData}]]></xe:this.moveTo>

</xe:djxmLineItem>

</xp:repeat>

</xe:appPage>

<xe:appPage id="phasePage" pageName="Phases"

resetContent="true">

<xe:djxmHeading id="djxmHeading5" label="Phases"

back="Projects" moveTo="ProjectList">

</xe:djxmHeading>

<xp:label value="Project:  " id="label10"></xp:label>

<xp:text escape="true" id="ProjectName"

value="#{javascript:param.ProjectName}">

</xp:text>

<xp:br></xp:br>

<xp:repeat id="repeat2" rows="30" var="listOfPhases">

<xp:this.value><![CDATA[#{javascript:var pn = param.ProjectName;

var result = @Unique(@DbLookup("","mByLocationNC",pn,2));

var tmpstr = result.valueOf();

try {

var newarr = tmpstr.split(",");

return(newarr)

}

catch(err){

return(tmpstr);

}}]]></xp:this.value>

<xe:djxmLineItem id="djxmLineItem4"

label="#{javascript:listOfPhases}" transition="slide" dir="ltr">

<xe:this.moveTo><![CDATA[#{javascript:"#locationsPage&ProjectName=" + param.ProjectName + "&Phase=" + listOfPhases}]]></xe:this.moveTo>

</xe:djxmLineItem>

</xp:repeat>

</xe:appPage>

<xe:appPage id="locations" pageName="locationsPage"

resetContent="true">

<xe:djxmHeading id="djxmHeading6" back="Back"

label="By Location">

<xe:this.moveTo><![CDATA[#{javascript:"#Phases&ProjectName=" + param.ProjectName}]]></xe:this.moveTo>

<xp:this.facets>

<xp:button value="+" id="button1"

xp:key="actionFacet" style="font-size:24pt">

<xp:eventHandler event="onclick" submit="true"

refreshMode="complete">

<xp:this.action>

<xe:moveTo targetPage="newDocurmentPage"

transitionType="slide" direction="Left to Right"

forceFullRefresh="true">

</xe:moveTo>

</xp:this.action>

</xp:eventHandler>

</xp:button>

</xp:this.facets>

</xe:djxmHeading>

<xp:repeat id="repeat1" rows="40" var="location"

indexVar="locationIndex">

<xp:this.value><![CDATA[#{javascript:var pn=param.ProjectName;

var phase=@Left(param.Phase,2);

var key=pn + "-" + phase;

DbLookupArray("","","","unique","sort","mByLocationByPhase",key,2)}]]></xp:this.value>

<xe:djxmLineItem id="djxmLineItem3"

label="#{javascript:location}" transition="slide">

<xe:this.moveTo>

<![CDATA[#{javascript:"#itemsListPage&ProjectName=" +  param.ProjectName + "&Phase=" + param.Phase + "&location=" + location}]]>

</xe:this.moveTo>

</xe:djxmLineItem>

</xp:repeat>

</xe:appPage>

<xe:appPage id="itemsPage" pageName="itemsListPage"

resetContent="true" preload="true">

<xe:djxmHeading id="djxmHeading7" label="Items"

back="Locations" dir="rtl">

<xe:this.moveTo><![CDATA[#{javascript:"#locationsPage&ProjectName=" +  param.ProjectName + "&Phase=" + param.Phase}]]></xe:this.moveTo>

</xe:djxmHeading>

<xe:dataView id="dataView1" pageName="#detailDocument"

openDocAsReadonly="true">

<xe:this.data>

<xp:dominoView var="mPPL" viewName="mPPL">

<xp:this.categoryFilter>

<![CDATA[#{javascript:param.ProjectName + "-" + @Left(param.Phase,2) +"-" + param.location}]]>

</xp:this.categoryFilter>

</xp:dominoView>

</xe:this.data>

<xe:this.summaryColumn>

<xe:viewSummaryColumn columnName="itemText"></xe:viewSummaryColumn>

</xe:this.summaryColumn>

</xe:dataView>

</xe:appPage>

<xe:appPage id="detailDocumentPage" pageName="detailDocument"

resetContent="true">

<xe:djxmHeading id="djxmHeading2" label="Item"

back="Items">

</xe:djxmHeading>

<xp:panel>

<xp:this.data>

<xp:dominoDocument var="itemDocument"

formName="Item" action="openDocument"

documentId="#{javascript:param.DocumentID}">

</xp:dominoDocument>

</xp:this.data>

<xp:label value="Item:  " id="label2"></xp:label>

<xp:text escape="true" id="computedField1"

value="#{itemDocument.Item}">

</xp:text>

<xp:label value="Final Resolution:  " id="label1"></xp:label>

<xp:text escape="true" id="computedField2"

value="#{itemDocument.meetingNotes}">

</xp:text>

</xp:panel>

</xe:appPage>

</xe:singlePageApp>