Een dashboard op een getekend scherm zetten

Doel

De pagina bouwen die vroeger een dashboard was — getallen, grafieken, een raster met records en een formulier om er een toe te voegen — als een scherm dat je zelf hebt getekend.

Waarom dit bestaat

Een dashboard bestaat uit tegels, getallen, grafieken en een paar ingebedde recordonderdelen. Een getekend scherm had de eerste twee en niets van de laatste twee, dus het heeft ze nu allebei: een besturingselement Grafiek en een besturingselement Tabelweergave of formulier.

Wat je wint ten opzichte van het dashboardartefact, is dat de opmaak van jou is. De tegels zijn gewone vakken, dus ze kunnen elke grootte en kleur hebben en elke getekende toestand dragen; en de pagina kan navigeren, overlays openen en handlers uitvoeren, want het is een scherm.

Wat je inlevert, is de querybouwer per widget van de tegeldesigner. Een getal is hier één loadRecords, dezelfde regel die elk ander Studio-scherm schrijft.

Een getal is een getelde query

loadRecords("par_ticket", "probe", {
  top: 1,
  where: { par_status: 100000002 },
  countInto: "statusActive"
});

In countInto komt hoeveel rijen overeenkomen — niet hoeveel er terugkwamen. top: 1 houdt dat eerlijk: de telling gaat over alles, en de pagina die niemand leest, is zo klein als een pagina maar kan zijn. probe is een toestandsveld dat je één keer declareert en nooit bekijkt.

Teken dan een grote tekst en koppel de Tekst ervan aan text(state.statusActive).

Tellen wat ontbreekt. where vergelijkt alleen op gelijkheid, dus "de records waarin een veld leeg is" is een eigen optie, empty: een lijst met velden die geen waarde mogen hebben.

loadRecords("pbo_position", "probe", {
  top: 1,
  where: { state: 0 },
  empty: ["pbo_currentoccupant"],
  countInto: "vacant"
});

Dat telt de openstaande functies waarop niemand zit. Het is dezelfde voorwaarde als het filter is leeg van een weergave, dus een tegel en de lijst ernaast zijn het met elkaar eens.

Een grafiek

Zet Componenten → Grafiek neer. Op het tabblad App:

• Grafiek — staven, gestapelde staven, lijn, vlak, cirkel of ring.

• Waarde — een lijst van { label, value }:

  [
    { label: "New", value: state.statusNew },
    { label: "Active", value: state.statusActive },
    { label: "Resolved", value: state.statusResolved }
  ]

De grafiek is van het platform zelf, geen tekening. Dat is belangrijker dan het klinkt: het moeilijke aan een grafiek is de keuze van de schaalstreepjes, overlappende labels en de gegevens waarop niemand heeft ontworpen — een resultaat zonder rijen, één uitschieter die vierhonderd keer zo groot is als de rest, een categorie van negentig tekens. Daarover wordt bij elke weergave opnieuw beslist. Bij een grafiek die je zelf tekende, zou dat één keer zijn beslist, door jou, op basis van de voorbeeldgegevens voor je neus: goed in de designer en fout in productie.

Zet de woorden binnen het besturingselement. Welke tekst je ook binnen een grafiek tekent, die wordt de toegankelijke naam — zonder die tekst kondigt een schermlezer "afbeelding" aan en verder niets. Hij wordt niet over de grafiek heen getekend; een zichtbare titel hoort in het paneel erboven.

Er is geen dubbele as, en die komt er ook niet. Twee meetwaarden op twee schalen in één kader nodigen uit tot een vergelijking die de geometrie niet ondersteunt. Twee meetwaarden van verschillende grootte zijn twee grafieken.

Een raster of een formulier uit een tabel

Zet Componenten → Tabelweergave of formulier neer. Op het tabblad App:

Veld	Is
Toont	De rijen van een weergave, Een formulier voor een nieuw record of Een formulier voor één record
Tabel	gekozen uit de tabellen van de omgeving — typ om te filteren op naam of logische naam
Weergave / Formulier	gekozen uit de weergaven of formulieren van die tabel, of De standaard van de tabel

Wat verschijnt, is het echte werk: het modelgestuurde raster met zijn eigen sortering, zijn eigen paginering, zijn eigen kolomkiezer en zijn eigen machtigingen per record; of het eigen snelle formulier van de tabel, met zijn verplichtingsregels en zijn plug-instappen. Aan geen van beide wordt iets opnieuw getekend; daarom is een veld dat op de tabel verplicht is, hier ook verplicht.

Een formulier voor één record haalt het record uit de koppeling Waarde — een id, meestal van iets wat iemand op hetzelfde scherm heeft gekozen.

Stappen

1. Teken de pagina: een kop, een rij tegels, panelen voor de grafieken en panelen voor de recordonderdelen.
2. Declareer de toestand — één veld per getal, plus probe.
3. Zet elke telquery in de handler Geladen van het scherm, en dezelfde regels achter een knop Vernieuwen.
4. Zet de grafieken en de recordonderdelen neer en vul hun velden in.
5. Geef elk object beperkingen, zodat de pagina het venster vult — de tegels spreiden zich, de grafieken en de recordonderdelen houden hun randen vast.

Importeer eerst het voorbeeld

Studio — Dashboard is deze pagina, kant-en-klaar. Importeer het, druk op Add 24 tickets en bekijk elk besturingselement in de designer naast het resultaat in de shell.

Problemen oplossen

• Het onderdeel zegt dat het niet weet welke tabel. — het veld Tabel is leeg. Opslaan waarschuwt hiervoor in plaats van het te weigeren, zodat je het later kunt afmaken.
• Het onderdeel zegt dat zo'n tabel niet bestaat. — de tabel is verwijderd sinds hij werd gekozen, of de app is geïmporteerd in een omgeving die hem niet heeft. Het veld Tabel toont nog de oude naam; kies er een die de omgeving heeft.
• Het onderdeel zegt dat deze host geen modelgestuurd onderdeel kan tonen. — je kijkt naar het Voorbeeld van de designer, en daar zit geen omgeving achter. Open de app in de shell.
• De grafiek is leeg. — de Waarde is geen lijst van { label, value }. Een rij die niet die vorm heeft, wordt weggelaten in plaats van als nul in de grafiek gezet, dus een verkeerde vorm zie je als een ontbrekende staaf.
• De getallen veranderen niet nadat ik een record heb toegevoegd. — niets heeft de query's opnieuw uitgevoerd. Zet ze achter een knop Vernieuwen, of voer ze opnieuw uit in de handler die het record schreef.
• De getallen veranderden, maar het ingebedde raster niet. — een ingebed onderdeel is het eigen raster of formulier van het platform, en het beheert zijn eigen query, dus jouw query's opnieuw uitvoeren raakt het niet. Sluit de handler af met reloadSurfaces(), dat elke ingebedde tabel en elk ingebed formulier op het scherm opnieuw toont. Doe dat zowel in de handler die de records aanmaakte als in Vernieuwen — vierentwintig nieuwe rijen met een lege tabel ernaast is het meest verwarrende wat een dashboard kan doen.

Gerelateerde scenario's

• Een lijst pagina voor pagina tonen.
• Een scherm laten reageren.