Quick search i views lavet med en Repeat Control

Views laves bedst med en Repeat Control – her får du meget mere fleksibilitet end med et view. Her vil jeg vise hvordan med laver Quick Search direkte i view’et. Nedenstående eksempel er i øvrigt lavet med Bootstrap – og viser hvordan Quick Search baren automatisk har selected alle de dokumenter der starter med ‘LA’

Løsningen består af 3 dele. Først er datakilden defineret – bemærk at jeg benytter en viewscope variable til at søge i viewet:

<xp:this.data>
	<xp:dominoView var="view1" viewName="CustomerLookup"
		keysExactMatch="false" keys="#{javascript:viewScope.quicksearch}">
	</xp:dominoView>
</xp:this.data>

Søgefeltet er et standard input felt – men benytter viewscope variable som datakilde og laver en partial refresh af mit ‘viewpanel’ (et alm. panel hvori jeg har min repeat control). Der laves et refresh efter hvert keypress:

<xp:inputText id="quicksearch" value="#{viewScope.quicksearch}">
	<xp:eventHandler event="onkeyup" submit="true"
		refreshMode="partial" refreshId="viewpanel">
	</xp:eventHandler>
</xp:inputText>

Tilsidst er der selve Repeat Controllen – den looper direkte på viewet og viser blot de 30 første linjer. Bemærk this.facets sektionen – her kan man defineret en header og footer som kun bliver vist én gang – og kun hvis der er data i viewet. Her er det brugt til at lave en table header.

<xp:panel id="viewpanel">
	<xp:repeat id="repeat" rows="30" var="viewentry"
		value="#{view1}" removeRepeat="true">
		<xp:this.facets>
			<!-- Header -->
			<xp:text disableTheme="true" xp:key="header" escape="false">
				<xp:this.value><![CDATA[#{javascript:'<table class="table table-striped"><thead><tr><th>Firma</th><th>Adresse</th><th>Telefon</th></tr></thead><tbody> '}]]></xp:this.value>
			</xp:text>

			<!-- Footer -->
			<xp:text disableTheme="true" xp:key="footer" escape="false">
				<xp:this.value><![CDATA[#{javascript:'</tbody></table>'}]]></xp:this.value>
			</xp:text>
		</xp:this.facets>

		<!-- Repeated rows -->
		<tr>
			<td>
				<i class="viewicon-069"></i>
				<xp:text escape="false" disableTheme="true">
					<xp:this.value><![CDATA[#{javascript:viewentry.getColumnValue("Firma")}]]></xp:this.value>
				</xp:text>
			</td>
			<td>
				<xp:text escape="false" disableTheme="true">
					<xp:this.value><![CDATA[#{javascript:viewentry.getColumnValue("Adresse")}]]></xp:this.value>
				</xp:text>

Links

Twitter Bootstrap

Med Twitter Bootstrap er det nemt at lave et pænt og responsivt layout der virker på alle skærm størrelser. Et flot eksempel er CollaborationToday.info hvor Per Lausten har lavet Bootstrap delen – alt er selvfølgelig lavet med XPages.

Bootstrap håndterer et fluid grid med 12 kolonner. Udvalgte elementer kan nemt vises/skjules på forskelige devices ved at give dem en class:

  • .visible-phone / .hidden-phone
  • .visible-tablet / .hidden-tablet
  • .visible-desktop / .hidden-desktop

Der følger en del ikoner med som nemt kan indsættes i html koden:

<i class=”icon class name”></i>

Alle ikoner kan ses på Bootstraps hjemmeside

Hvis du vil i gang, så følg nedenstående links – der er både guides, tutorials og tips:

Bootstrap på en XPages

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
	xmlns:xc="http://www.ibm.com/xsp/custom">
	<xp:this.resources>
		<xp:metaData name="viewport"
			content="width=device-width, initial-scale=1.0">
		</xp:metaData>

		<xp:metaData name="charset" content="utf-8"></xp:metaData>

		<xp:styleSheet href="/css/bootstrap.css"></xp:styleSheet>
		<xp:styleSheet href="/css/bootstrap-responsive.css"></xp:styleSheet>
		<xp:styleSheet href="/custom.css"></xp:styleSheet>
	</xp:this.resources>

	<xc:layout_topmenu></xc:layout_topmenu>
	<div class="container">

		<!-- Content row -->
		<xp:callback facetName="facet_1" id="callback1"></xp:callback>
		<!-- end content row -->

	</div>
	<!-- End container -->
	<!-- Placed in the bottom for faster load times -->
	<script type="text/javascript" src="js/jquery-1.8.2.min.js"
		clientSide="true">
	</script>
	<script type="text/javascript" src="js/bootstrap.js"
		clientSide="true">
	</script>
	<xc:ccDebugToolbar load="true" defaultCollapsed="false"
		collapseTo="left" rendered="false">
	</xc:ccDebugToolbar>

</xp:view>

Smart brug af ikoner

I stedet for at gemme hvert enkelt billede som en separate image ressource – så kan alle ikoner samles på et image og blot selectes med CSS. Det er nemmere at håndtere og giver bedre performance (cache).

Jeg har lavet et image med alle Notes ViewIcons og et tilhørende CSS. Herefter kan der indsættes et ikon blot ved at skrive:

<i class=”viewicon-001″></i>

Filerne kan downloades her:

Links til andre icon set