NOTESSIDAN

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="http://www.ibm.com/xsp/core">
<xp:this.data>
<xp:dominoView var="view1" viewName="Companies"></xp:dominoView>
</xp:this.data>
<xp:this.resources>
<xp:styleSheet href="/style.css"></xp:styleSheet>
</xp:this.resources>
<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>
&#160;
<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:link>
<xp:text escape="true" id="computedField1" title="#{javascript:colnames}">
<xp:this.value><![CDATA[#{javascript:rowData.getColumnValue(colnames)}]]></xp:this.value>
<xp:this.rendered><![CDATA[#{javascript:i>0}]]></xp:this.rendered>
</xp:text>
<br />
</xp:repeat>
</div>
</div>
</xp:repeat>
</div>
</xp:view>


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}
.viewlabel{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:

Technorati:

Delicious:
Publicerad 2015-03-28 | Kommentarer: 11 | Läsningar:

Kommentarer

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 )

RoshaanAsghar ( 2017-06-04 19:31:57 )

Aimee Stevenson ( 2017-07-25 10:49:45 )

Aimee Stevenson ( 2017-07-25 10:51:16 )

IDM Crack ( 2017-10-08 19:50:00 )

idm crack ( 2017-10-10 19:15:15 )

ansar Ali ( 2017-10-19 17:58:12 )

John ( 2017-10-29 18:19:11 )

jojn ( 2017-10-29 18:20:00 )



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

Kontakta mig







Senaste Sökningarna på Notessidan
Sön - sharepoint (R:1)
Sön - räkna and antal and besökare (R:0)
Sön - browser (R:17)
Sön - stoppar and mail (R:1)
Sön - korrupt (R:3)
Sön - böcker (R:0)
Sön - kalendern (R:12)
Sön - feature (R:15)
Sön - print and mime (R:2)
Sön - länka (R:0)
Sön - databasen (R:94)
Sön - access (R:47)
Sön - outlook (R:15)
Sön - webanvändare (R:0)
Sön - google and maps (R:6)
Sön - juffe (R:2)
Sön - uidoc.print (R:1)
Sön - java and lotusscript (R:26)
Sön - besök (R:0)




Databasstatistik Blogg
Uppdateras var 15:e Minut

Antal Poster:562
Antal Kommentarer: 1048
Alla sidvisningar idag:
Unika Besökare idag:
Databasstorlek: 134,5Mb
Fixup: 2017-11-18 00:30:52
FT:2017-11-15 18:33:24
DB Procent använd: 99,6
Antal Agenter: 42
Antal Formulär: 65
Antal Vyer: 60
Antal Dokument: 7025
Antal Image Resources: 108
Antal Subformulär: 18
Antal Scriptbibliotek: 11
Totalt Antal Designelement: 575
Antal Attachments: 159
Antal Konflikter: 0
Server version 1: 405
Server version 2: Release 9.0.1FP9|August 14, 2017
Server Plattform: Windows/64
Ändrad: 2017-11-18 01:27:37
Server Tidszon: Z=-1$DO=1$DL=3 -1 1 10 -1 1$ZX=97$ZN=W. Europe
Region:
Kommentarsspam Idag: 0
Kommentarsspam Totalt: 10809


BlogRankers.com

Top Sites at iWEBTOOL.com

Fight Spam! Click Here!

Bloggtoppen.se

Listed on BlogShares

Increase website traffic

Top Internet Blogs

Site Checker