Een lijst pagina voor pagina tonen

Doel

Een tabel twintig rijen tegelijk tonen, iemand erin laten zoeken, en er Vorige en Volgende onder zetten die weten wanneer ze moeten stoppen.

Waarom dit bestaat

Een getekende lijst laadt wat je erom vraagt. Vraag om alles en een tabel van negenhonderd rijen komt in één antwoord binnen en scrolt eindeloos; vraag om twintig en niets op het scherm kan zeggen of die twintig de laatste twintig zijn of de eerste van negenhonderd.

Dus kreeg de query er twee dingen bij: een pagina (skip), en een plek voor het aantal (countInto).

Eén query doet het allemaal

loadRecords("par_case", "cases", {
  top: num(getState("pageSize")),
  skip: getState("page") * num(getState("pageSize")),
  contains: { par_name: getState("query") },
  orderBy: "par_name",
  countInto: "caseTotal"
});

num(…) staat er omdat het paginaformaat uit een vervolgkeuzelijst komt, en elk besturingselement dat een keuze biedt, geeft de woorden terug in plaats van het getal — zie Het paginaformaat hieronder.

Onderdeel	Is
top	hoeveel rijen deze pagina bevat
skip	hoeveel er eerst worden overgeslagen — rijen, geen pagina's
where	paren van veld en waarde die exact moeten overeenkomen, allemaal
contains	paren van veld en deeltekst — wat een zoekvak nodig heeft
orderBy / descending	de volgorde
countInto	een toestandsveld voor hoeveel rijen er in totaal overeenkomen, los van de pagina

skip telt rijen in plaats van een paginanummer, omdat top al in rijen is. Een scherm dat beide bijhoudt, zou ze met elkaar in overeenstemming moeten houden, en hoe dat misgaat, merk je niet: iemand wijzigt het paginaformaat, vergeet de pagina terug te zetten en belandt op pagina 7 van een lijst die er nu 3 heeft.

Een lege waarde in contains draagt niets bij, dus je kunt je zoekvak rechtstreeks doorgeven. Een vak waarin niemand heeft getypt, betekent alles, niet rijen die de lege tekenreeks bevatten.

countInto is gratis. De query van het platform telt toch al, dus om het totaal vragen kost geen tweede verzoek. Een scherm zonder knop Volgende laat het weg en betaalt niets.

Stappen

1. Declareer de toestand die de lijst nodig heeft: cases ([]), caseTotal (0), page (0), pageSize ("20" — de eigen waarde van de vervolgkeuzelijst, dus woorden), query ("").

2. Zet de query hierboven in de handler Geladen van het scherm.

3. Teken Vorige en Volgende, en koppel hun Ingeschakeld:

   • Vorige — state.page > 0
   • Volgende — (state.page + 1) * num(state.pageSize) < state.caseTotal

4. Hun handlers verschuiven de pagina en voeren de query opnieuw uit:

   setState("page", getState("page") + 1);
   loadRecords( … the same query … );

5. Teken het bijschrift. Een getal kan niet rechtstreeks aan een zin worden toegevoegd — BS Lang weigert een tekenreeks en een getal te mengen en zegt Only number or string — dus omhul het:

   "Showing " + text(state.cases.length()) + " of " + text(state.caseTotal)

6. Teken het zoekvak als een tekstvak gekoppeld aan state.query, en geef het een handler voor wijziging die teruggaat naar pagina nul en de query opnieuw uitvoert. Een tekstvak legt zijn waarde vast wanneer je het verlaat of op Enter drukt, dus dat is één query per zoekopdracht in plaats van één per letter.

Het paginaformaat

Eén vervolgkeuzelijst, aan het rechtereinde van de rij, met 10, 20, 30, 40, 50, 100 en 200:

• Teken een vak, maak er een besturingselement Vervolgkeuzelijst van, en typ de formaten in de lijst met opties.
• Koppel de Waarde ervan aan state.pageSize — een gewoon toestandspad, zodat wat iemand kiest wordt teruggeschreven voordat er iets anders wordt uitgevoerd.
• Geef het een handler voor wijziging die de pagina terugzet op nul en de query opnieuw uitvoert.
• Zet de woorden Paginaformaat in het vak in plaats van ernaast. Wat je in een besturingselement tekent, wordt de tijdelijke aanduiding en de naam die een schermlezer aankondigt; een bijschrift ervoor herhaalt wat de ongeopende vervolgkeuzelijst al zegt.

Het geeft de woorden terug, niet het getal. Elk besturingselement dat een keuze biedt, doet dat — dus state.pageSize bevat "20", en om ermee te rekenen heb je num(…) nodig:

num(state.pageSize) * state.page

Zonder dat weigert BS Lang het paar en zegt Only number or string, wat dezelfde regel is waardoor een bijschrift text(…) nodig heeft — de twee zijn tegengestelde richtingen van dezelfde omzetting. num(…) geeft 0 voor alles wat geen getal is, dus een onaangeroerde kiezer kan het scherm niet breken.

Ga altijd terug naar pagina nul wanneer de vorm van de lijst verandert — een nieuw paginaformaat, een nieuwe zoekopdracht. Een gefilterde lijst die op pagina zeven bleef staan, toont niets, en leest als een kapotte zoekfunctie.

Zoeken in een kiezer

Dezelfde contains maakt een zoekveld bruikbaar. In het voorbeeld Support desk heeft de kaart van de contactkiezer een eigen tekstvak, waarvan de handler voor wijziging dit opnieuw uitvoert:

loadRecords("contact", "contacts", { top: 8, orderBy: "fullname",
  contains: { fullname: getState("contactQuery") } });

Dat is het antwoord van de omgeving, geen filter over de acht rijen die al in de kaart staan — en dat is het verschil tussen een kiezer en een kiezer die alleen kan vinden wat hij al heeft opgehaald.

Wat hier niet is

Er is geen of. contains neemt meerdere velden en combineert ze met EN, en dat is niet wat een zoekvak over drie kolommen betekent. Zoeken in een van meerdere velden is waar een filter ophoudt één regel in een handler te zijn en de querydesigner wordt die het platform al heeft.

Problemen oplossen

• Het bijschrift zegt Only number or string. — er wordt een getal aan een zin toegevoegd. Omhul het met text(…). Dezelfde melding bij een som is het omgekeerde probleem: de woorden van een besturingselement worden als getal gebruikt, dus omhul die met num(…).
• Het paginaformaat doet niets, of de lijst wordt leeg wanneer het verandert. — state.pageSize bevat de woorden van de vervolgkeuzelijst. top en skip hebben er num(…) omheen nodig.
• Volgende wordt nooit uitgeschakeld. — niets schrijft het totaal. Voeg countInto toe aan de query.
• Zoeken vindt niets na de eerste pagina. — de zoekhandler zet page niet terug.
• De lijst voert bij elke toetsaanslag opnieuw een query uit. — de handler zit op iets wat per teken wordt geactiveerd. Zet hem op de wijziging van het vak, die wordt geactiveerd wanneer je het verlaat.

Gerelateerde scenario's

• Een scherm laten reageren.
• Een Studio-app tekenen.