Allt om Lotus Notes & Domino

Make your Notes view columns responsive with Bootstrap in XPages
If you in XPages add a viewPanel or dataTable to display your notes views, Domino will render a HTML table for you.The problem with this is that a table is not very mobile friendly and you problably need to hide columns to make it look decent on a phone or a smaller device.
A better solution is to layout the columns into "cards" instead of rows. so that each row in Notes respresent one "card", and each "card" will be layed out with each Notes column on one row. So one row in Notes is one Bootstrap column card, all we have to do now is to tell bootstrap how many card we want on each row depending on the screen size. When using cards there is no need to hide any information from users with smaller devices.

So I have been experimenting with this, i.e take each column in a view and wrap it into a <div class="col-nn-nn">
This is what I got to work with , a plain view in Notes, you can also get this to work with a categorized view by displaying the categories to the users above the view

And this is my result

Bootstrap layout for large screens , 4 columns

Bootstrap layout for Small & Medium screens, 2 Columns

Bootstrap layout for small screens (phones) 1 column

The below code is all you need for an already bootstraped enabled application,
The repeat will read the columns in your view so it will work on all flat views and as I am using a view data source it is easy to add a pager or to search the view. The first column in the view will be a link to open the document.

You can eaily add a data source to the outer repeat if you for instance have a image in your document and want to display it in a card.

Note: There are room for some performance improvements to this code. but at least it will get you started

Good luck

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="">
<xp:dominoView var="view1" viewName="Companies"></xp:dominoView>
<xp:styleSheet href="/style.css"></xp:styleSheet>
<div class="row">
<xp:repeat id="repeat1" rows="30" var="rowData" disableOutputTag="true" value="#{view1}">
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-6">
<div class="col-inner">
<xp:repeat id="repeat2" rows="30" value="#{javascript:view1.getColumnNames()}" var="colnames" disableOutputTag="true" first="0" indexVar="i">
<xp:text escape="true" id="computedField2" value="#{javascript:colnames}" styleClass="viewlabel"></xp:text>
<xp:link escape="true" text="#{javascript:rowData.getColumnValue(colnames)}" id="link2" rendered="#{javascript:i==0}">
<xp:this.value><![CDATA[#{javascript:"company.xsp?action=openDocument&documentId=" + rowData.getNoteID()}]]></xp:this.value>
<xp:text escape="true" id="computedField1" title="#{javascript:colnames}">
<br />

Apply som style

.col-inner{background-color:#FFF;font-size:10px;border:1px solid #C0C0C0;padding:10px;margin:10px;border-radius:3px}
.col-inner A{font-size:10px;font-weight:bold}

If you make improvements to this code please share it with the XPages community

Relevanta Poster på Notessidan:

Fler Poster om:

Fler bloggar om:


Publicerad 2015-03-28 | Kommentarer: 3 | Läsningar:


Srini ( 2016-08-20 13:39:59 )

bandar judi bola ( 2016-11-18 04:13:36 )

free software download ( 2017-01-10 20:09:50 )

Sök på Notessidan
Thomas Adrian
ThomasCertifierad utvecklare och administratör inom Notes & Domino

Kontakta mig

Senaste Sökningarna på Notessidan
Tor - bild and signatur (R:1)
Tor - värdnamn (R:0)
Tor - användarguide (R:1)
Tor - Sortera and Lista (R:1)
Tor - Processa and XML (R:1)
Tor - datatyper (R:1)
Tor - böcker (R:0)
Tor - tipset (R:7)
Tor - systemkrav and för and lotus and notes and 8 (R:0)
Tor - h�nger (R:0)
Tor - ta and bort and användare (R:0)
Tor - söka and i and flera and databaser (R:0)
Tor - genväg (R:0)
Tor - sort and array (R:7)
Tor - säkerhet (R:0)
Tor - läs and xml (R:0)
Tor - öppna and notes and från and webben (R:0)
Tor - Se and om and mail and lästs (R:1)
Tor - svara and till and avsändaren (R:0)
Tor - fönster (R:0)
Tor - Connection and document (R:8)
Tor - genväg and på and skrivbordet (R:0)
Tor - brev* (R:4)
Tor - dominoserver (R:24)
Tor - mall and blog (R:0)
Tor - Multi-User (R:1)
Tor - Å and ä and ö (R:0)
Tor - cheklista (R:1)
Tor - ecl (R:2)
Tor - gör and tillgänglig (R:7)

Databasstatistik Blogg
Uppdateras var 15:e Minut

Antal Poster:562
Antal Kommentarer: 1024
Alla sidvisningar idag:
Unika Besökare idag:
Databasstorlek: 121Mb
Fixup: 2017-03-30 00:30:48
FT:2017-03-30 02:00:48
DB Procent använd: 99,6
Antal Agenter: 42
Antal Formulär: 65
Antal Vyer: 60
Antal Dokument: 7190
Antal Image Resources: 108
Antal Subformulär: 18
Antal Scriptbibliotek: 11
Totalt Antal Designelement: 573
Antal Attachments: 159
Antal Konflikter: 0
Server version 1: 405
Server version 2: Release 9.0.1FP8|February 23, 2017
Server Plattform: Windows/64
Ändrad: 2017-03-30 02:32:27
Server Tidszon: Z=-1$DO=1$DL=3 -1 1 10 -1 1$ZX=97$ZN=W. Europe
Kommentarsspam Idag: 0
Kommentarsspam Totalt: 8008

Top Sites at

Fight Spam! Click Here!

Listed on BlogShares

Increase website traffic

Top Internet Blogs

Site Checker