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

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *

*