193 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
HTML5 Canvas to PNG via RPC
Tue, Jun 21st 2016 7
Eternal fustrations with IBM "Help" - - this time trying to give them money
Mon, May 23rd 2016 9
Simple Example: Bootstrap
Tue, May 3rd 2016 9
Import CSVs into a Notes/XPage database
Thu, Mar 24th 2016 9
REST via Service Bean
Tue, Feb 16th 2016 4
Reversing the display order of a Multi-value field (XPages)
Wed, Jan 13th 2016 9
nhttp preview won't "switch ID"
Mon, Dec 7th 2015 13
Top 10
nhttp preview won't "switch ID"
Mon, Dec 7th 2015 13
dataTable column width
Tue, Jul 14th 2015 9
DirectoryNavigator via Java
Wed, Nov 4th 2015 9
Reversing the display order of a Multi-value field (XPages)
Wed, Jan 13th 2016 9
Import CSVs into a Notes/XPage database
Thu, Mar 24th 2016 9
Simple Example: Bootstrap
Tue, May 3rd 2016 9
Eternal fustrations with IBM "Help" - - this time trying to give them money
Mon, May 23rd 2016 9
StartKeys for categorized viewPanel and number column
Sat, Jul 4th 2015 8
ComboBox - Validate so default value is not selected
Wed, Jul 1st 2015 8
Populate an InputText Date field (that has a calendar picker)
Fri, Jun 26th 2015 8


dataTable with Categories
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
   

I've been using DataTables for a number of things lately, where I need a bit more flexibility than a viewPanel, but I don't want to build it from scratch with a Repeat.

I'm currently working on process where I'm making a nsf to replace a MS Access database. So I'm having to adjust from the relational method. This means I need to use a key to look things up in a view to display the human friendly words rather than the code. So traditional Notes views don't do that. DataTables give me the flexibility I need. For part of this, I have 'events', and these will have one to several classes at each of these events. I want to hide the classes for each event until I click something to make it look neater and to save space.

DataTables don't have a native way to show categories, so I found one. I put a repeat in a column, and populate that repeat with a NotesViewEntryCollection from a value in a row of the DataTable. I tried to use the plus/minus icons like shown here in a great post by Ulrich Krause. But when I paged the icons disappeared. Both of them. So I used the basic idea, and put a link in that was always there to show the classes, and another link to hide them if desired. It works like I desire, so fine.

So this does what I wanted. I'm putting the code below. I have a few things to adjust. First, the classes should be in a table so they display better (I'm not putting it in to make the code a little shorter). Also, the columns resize when the repeat is expanded. Something I'll look into fixing after I post this.

Cheers,
Brian

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:this.data>
        <xp:dominoView
            var="view1"
            viewName="EventName">
            <xp:this.databaseName><![CDATA[#{javascript:var curServer = @Subset(@DbName(),1);
if(@Left(curServer.toLowerCase(), "/") == "cn=svrname") {
    session.getDatabase('
svrname/OU', 'foldername\Data.nsf');
} else {
    session.getDatabase('', '
foldername\Data.nsf');
}}]]></xp:this.databaseName>
        </xp:dominoView>
    </xp:this.data>
    <xp:dataTable
        id="dataTable1"
        rows="30"
        var="rowData"
        value="#{view1}">
        <xp:this.facets>
            <xp:pager
                partialRefresh="true"
                layout="Previous Group Next"
                xp:key="header"
                id="pager1">
            </xp:pager>
            <xp:pager
                partialRefresh="true"
                layout="Previous Group Next"
                xp:key="footer"
                id="pager2">
            </xp:pager>
        </xp:this.facets>
        <xp:column id="column1">
            <xp:this.facets>
                <xp:label
                    value="Event Name"
                    id="label1"
                    xp:key="header">
                </xp:label>
            </xp:this.facets>
            <xp:link
                escape="true"
                id="link1">               
            </xp:link>
            <xp:text
                escape="true"
                id="computedField4">
            <xp:this.value><![CDATA[#{javascript:rowData.getColumnValues()[0];}]]></xp:this.value></xp:text></xp:column>
        <xp:column id="column2">
            <xp:text
                escape="true"
                id="computedField5">
            <xp:this.value><![CDATA[#{javascript:rowData.getColumnValues()[4];}]]></xp:this.value></xp:text>
           
            <xp:this.facets>
                <xp:label
                    value="Date"
                    id="label2"
                    xp:key="header">
                </xp:label>
            </xp:this.facets>
        </xp:column>
        <xp:column id="column3">
        
            <xp:this.facets>
                <xp:label
                    value="Group"
                    id="label3"
                    xp:key="header">
                </xp:label>
            </xp:this.facets>
            <xp:text
                escape="true"
                id="computedField6">
            <xp:this.value><![CDATA[#{javascript:rowData.getColumnValues()[3];}]]></xp:this.value></xp:text></xp:column>
        <xp:column id="column4">           
            <xp:this.facets>
                <xp:label
                    value="Number"
                    id="label4"
                    xp:key="header">
                </xp:label>
            </xp:this.facets>
            <xp:text
                escape="true"
                id="computedField7">
                <xp:this.value><![CDATA[#{javascript:rowData.getColumnValues()[2];}]]></xp:this.value>
                <xp:this.converter>
                    <xp:convertNumber
                        type="number"
                        integerOnly="true">
                    </xp:convertNumber>
                </xp:this.converter>
            </xp:text></xp:column>
        <xp:column id="column6">
        <xp:panel id="mainpanel">   
            <xp:link
                escape="true"
                text="Classes"
                id="link6">
            <xp:eventHandler
                event="onclick"
                submit="false">
                <xp:this.script><![CDATA[var visibility = 'show';
XSP.partialRefreshGet("#{id:mainpanel}", {
params: {'$$xspsubmitvalue': visibility},
onComplete: function () {
    XSP.partialRefreshGet("#{id:secondpanel}", {
        params: {'$$xspsubmitvalue': visibility}});}
});]]></xp:this.script>
            </xp:eventHandler></xp:link>
        </xp:panel></xp:column>
        <xp:column id="column5">
            <xp:this.facets>
                <xp:label
                    value="Courses"
                    id="label5"
                    xp:key="header">
                </xp:label>
            </xp:this.facets>
            <xp:panel id="secondpanel">
            <xp:repeat
                id="repeat1"
                rows="30"
                rendered="#{javascript:context.getSubmittedValue()== 'show'}"
                var="rptRowData">
                <xp:this.value><![CDATA[#{javascript:var curServer = @Subset(@DbName(),1);
if(@Left(curServer.toLowerCase(), "/") == "cn=svrname") {
    var dataDb:NotesDatabase=session.getDatabase('
svrname/ou', 'foldername\Data.nsf');
} else {
    var dataDb:NotesDatabase=session.getDatabase('', '
foldername\Data.nsf');
}

var v:NotesView=dataDb.getView('Class Instance\Event-Course');
var nvec:NotesViewEntryCollection=v.getAllEntriesByKey(rowData.getColumnValues()[2] + '', true);
return nvec;}]]></xp:this.value>
                <xp:text
                    escape="true"
                    id="computedField1">
                    <xp:this.value><![CDATA[#{javascript:rptRowData.getColumnValues()[1];}]]></xp:this.value>
                </xp:text>
                &#160;&#160;&#160;
                <xp:text
                    escape="true"
                    id="computedField2">
                    <xp:this.value><![CDATA[#{javascript:rptRowData.getColumnValues()[2];}]]></xp:this.value>
                    <xp:this.converter>
                        <xp:convertNumber
                            type="number"
                            integerOnly="true">
                        </xp:convertNumber>
                    </xp:this.converter>
                </xp:text>
                &#160;&#160;&#160;&#160; &#160;
                <xp:text
                    escape="true"
                    id="computedField3">
                    <xp:this.value><![CDATA[#{javascript:var cNumV:NotesView=database.getView('Course Number');
var cNVE:NotesViewEntry=cNumV.getEntryByKey(rptRowData.getColumnValues()[1], true);
if(cNVE != null){
return cNVE.getColumnValues()[1];
}
return "Course Name not found";}]]></xp:this.value>
                </xp:text>
                &#160;&#160;&#160;&#160;&#160;&#160;
            </xp:repeat>
            <xp:link
                escape="true"
                text="Close"
                rendered="#{javascript:context.getSubmittedValue()== 'show'}"
                id="link5">
                <xp:eventHandler
                    event="onclick"
                    submit="false">
                    <xp:this.script><![CDATA[var visibility = 'hide';
XSP.partialRefreshGet("#{id:mainpanel}", {
    params: {'$$xspsubmitvalue': visibility},
    onComplete: function () {
    XSP.partialRefreshGet("#{id:secondpanel}", {
    params: {'$$xspsubmitvalue': visibility}});}
});]]></xp:this.script>
                </xp:eventHandler>
            </xp:link>
            </xp:panel>
        </xp:column>
    </xp:dataTable>
    <xp:br></xp:br>
    </xp:view>






---------------------
http://dominoherald.blogspot.com/2015/07/datatable-with-categories.html
Jul 14, 2015
8 hits



Recent Blog Posts
7
HTML5 Canvas to PNG via RPC
Tue, Jun 21st 2016 1:21p   Brian M. Moore
Declan Lynch provided a Signature Capture Control on OpenNTF some time ago. I had downloaded and played with it a bit, but hadn't had a production use for it, but it worked just like it said on the tin - drop it in and use it. Recently I was asked to come up with a way to let people sign into an event using tablets, so a perfect opportunity to pull it out. It was a breeze to add it to the sign-in portion, we display a page on a mobile device and the user can sign in on the canvas. That was the
9
Eternal fustrations with IBM "Help" - - this time trying to give them money
Mon, May 23rd 2016 11:22a   Brian M. Moore
So I find I need to purchase a Domino license again, this happens for independent developers. I make my selection and get taken to what IBM is now calling the "Marketplace" to check out. However the option to enter a credit card to actually pay for my purchase is greyed out. So I call in. There is a wait and a lady answers. She asks the typical questions and then for me to send them an email with a screen shot. I ask for a ticket number so I can track this request (my reopened ticket for Bluem
9
Simple Example: Bootstrap
Tue, May 3rd 2016 8:23p   Brian M. Moore
The Bootstrap library is a great way to do responsive design, and it's been incorporated into the Extension Library so you can use it "out of the box". The problem I've found is that the samples provided are pretty complex. Not too helpful if you are starting out since you have to try to figure out callbacks and a lot of other stuff to get to the points you want. I think overly complex starter examples are a waste. They let the creator think they have provided something without actually hel




Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition