Can someone help me with an XPages DataView control for a mobile application?

I'm creating my first mobile interface for one of my xpage applications. My approach is fairly simple in that I'll use dataview controls to show view data and then moveto a document page from there.

My challenge is that I want to display my view data with more than just one value from a summary column. I want to show something like this:

  Q12345 sent on 5/12/2018               v
      ABC MANUFACTURING, CORP.
    RT554039
    RT223091
    RT009873

where the first line contains the expandable details link on the right. The detail section would contain the "RT" numbers. So, by default each entry would display the Quote number, sent date and customer name. And then expanding the entry would show the "RT" numbers.

I found Brad Ballasaitis' blog article at https://xcellerant.net/2013/08/02/xpages-data-views-3-collapsible-details/

but I can't get it work for me. This is what I see instead:

I also don't want the whole thing bold, just the quote number itself.

Here's my code:

        <xe:appPage id="appPage10" resetContent="true"
            pageName="viewByCust" preload="true">
            <xe:djxmHeading id="djxmHeading10" back="Back"
                moveTo="viewCustByRep">
                <xe:this.label><![CDATA[#{javascript:sessionScope.AcctUNID = null;

"Quotes List"}]]></xe:this.label>
                <xp:this.facets>
                    <xp:button value="Home" id="button1"
                        xp:key="actionFacet">
                        <xp:eventHandler event="onclick" submit="true"
                            refreshMode="complete">
                            <xp:this.action>
                                <xe:moveTo direction="Right to Left"
                                    forceFullRefresh="true" targetPage="homePage"
                                    transitionType="slide">
                                </xe:moveTo>
                            </xp:this.action>
                        </xp:eventHandler>
                    </xp:button>
                </xp:this.facets>
                <xp:label id="label9" rendered="false"
                    style="color:rgb(255,0,0);margin-left:50.0px;font-weight:bold;font-size:11pt"
                    value="viewByCust">
                </xp:label>


            </xe:djxmHeading>
            <xp:table style="width:100.0%">
                <xp:tr>
                    <xp:td style="text-align:center;height:30px">
                        <xp:label id="label2"
                            style="font-size:12pt;font-weight:bold" value="#{javascript:sessionScope.ViewKey}">

                        </xp:label>
                    </xp:td>
                </xp:tr>
            </xp:table>
            <xe:dataView id="dataView1" openDocAsReadonly="true"
                rows="100" var="ventry" collapsibleDetail="true"
                disableHideRow="false">

                <xe:this.pageName><![CDATA[#{javascript:sessionScope.BackTo = "viewByCust";
"pageDoc"}]]></xe:this.pageName>
                <xp:this.facets>
                    <xp:panel xp:key="summary" id="panelsumm">
                        <xp:text escape="false" id="computedField23">
                            <xp:this.value><![CDATA[#{javascript:if(ventry!=null){
    var tmpstr = "<h4><a href='PageName.xsp?openDocument&documentId=" + ventry.getDocument().getUniversalID() + "'>";
    tmpstr = tmpstr + ventry.getDocument().getItemValueString('DocNum') + "</a></h4><b></b> sent on asdfasdf<br></br>";
    tmpstr = tmpstr + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + ventry.getColumnValues()[4];
}}]]></xp:this.value>
                        </xp:text>
                    </xp:panel>
                    <xp:text escape="false" id="computedField24"
                        xp:key="detail">
                        <xp:this.value><![CDATA[#{javascript:"RT123<br></br>RT5543<br></br>RT9876"}]]></xp:this.value>
                    </xp:text>
                    <xp:link escape="true" text="More Entries..."
                        id="link1" xp:key="pagerBottom">
                        <xp:this.rendered><![CDATA[#{javascript:sessionScope.AcctSearch==null || sessionScope.AcctSearch==""}]]></xp:this.rendered>

                        <xp:eventHandler event="onclick"
                            submit="false">
                            <xp:this.script>
                                <xe:addRows rowCount="50"
                                    for="dataView2">
                                </xe:addRows>
                            </xp:this.script>
                        </xp:eventHandler>
                    </xp:link>
                    <xe:toolBarButton id="toolBarButton3" label="Search"
                        xp:key="pagerTop">
                        <xp:eventHandler event="onClick" submit="true"
                            refreshMode="partial" refreshId="dataView1">
                        </xp:eventHandler>
                    </xe:toolBarButton>
                    <xp:inputText id="inputText4"
                        value="#{sessionScope.AcctSearch}" xp:key="pagerTopLeft"
                        style="height:30px;font-size:12pt">
                        <xp:eventHandler event="onkeydown" submit="true"
                            refreshMode="partial" refreshId="dataView2">
                            <xp:this.script>
                                <xp:executeClientScript>
                                    <xp:this.script><![CDATA[if (thisEvent.keyCode != '13') {
    return false;
}]]></xp:this.script>
                                </xp:executeClientScript>
                            </xp:this.script>
                        </xp:eventHandler>
                    </xp:inputText>
                </xp:this.facets>
                <xe:this.data>
                    <xp:dominoView var="view2"
                        viewName="SalesQbyCust">


                        <xp:this.categoryFilter><![CDATA[#{javascript:var vkey = sessionScope.ViewKey;
if(vkey==null){
    sessionScope.RepNum;
}
else {
    sessionScope.RepNum + "~" + vkey;
}}]]></xp:this.categoryFilter>
                    </xp:dominoView>
                </xe:this.data>
            </xe:dataView>
        </xe:appPage>

Can someone help me with where I've gone wrong and point me in the right direction to get this working?

(Just to be clear, I'm hoping to have both a 'details expanding' drop down arrow AND the normal 'goto' right arrow for each entry.)

Thanks to both of you guys. I removed the doc reference (that was a hold over from my previous attempts).

I was able to get the look I was after with this computed html in the Summary facet:

if(ventry!=null){
    var docnum = ventry.getColumnValues()[1];
    var custname = ventry.getColumnValues()[4];
    var ndt = ventry.getColumnValues()[5];
    var itemlist = ventry.getColumnValues()[2];  //item~desc+item~desc
    var itmdscarr = itemlist.split("+");
    //just keep the desc (model #s)
    var items = new Array();
    for(x=0;x<itmdscarr.length;x++){
        var tmp = itmdscarr[x];   //item~desc
        var tmparr = tmp.split("~");
        items.push(tmparr[1]);
    }
    var jdt = ndt.toJavaDate();
    var tmpstr = "<font size='3'>";
    tmpstr = tmpstr + docnum + "</font>&nbsp;&nbsp;&nbsp;&nbsp;" + jdt.toDateString() + "<br>";
    tmpstr = tmpstr + "&nbsp;&nbsp;&nbsp;&nbsp;" + custname +"<br>";
    tmpstr = tmpstr + "<font size='2' face='Courier'><UL style='list-style-type:none;margin-top:0px;margin-left:0px'><LI>" + @Implode(items,"<LI>") + "</UL></font>";
}

which gives me this...

I removed the summaryColumn name and simply put this computed field in a panel in the Summary facet. Works like a charm.

Thanks again.