Smart forms voor WebGIS App

In WGP Beheer bestaat de mogelijkheid om geavanceerde functies voor de formulieren van WebGIS App te configureren. Deze geavanceerde formulieren voor de app heten in WGP de smart forms. De smart forms worden geconfigureerd met de JSON-code op het tabblad Smart forms van pagina Formulieren beheren en zijn gebaseerd op Apaca forms (een open source engine voor het genereren van HTML5-formulieren).

WGP smart forms ondersteunen voor de WebGIS App de volgende functies:

• velden voor de invoer van foto's (veldtype camera)
• datumselectie met behulp van een kalender (datumkiezer), met de mogelijkheid om het datumformaat in te stellen (veldtype wgpdatepicker)
• het opslaan van de huidige gebruiker, eventueel als verborgen veld (veldtype currentuser)
• het automatisch aanvullen van de invoer van een veld gebaseerd op de domeinwaarden (veldtype wgpautocomplete)
• keuzelijsten waaruit meerdere waarden geselecteerd kunnen worden (veldtype select met attribuut multiple ingeschakeld)
• het opnemen van een complete tabel in een tekstveld (veldtype table)
• het zetten van een handtekening (veldtype signature)

Werkwijze

Je kunt in WGP Beheer voor de WebGIS App op de volgende manier een smart form configureren:

1. Maak eerst op de normale manier een formulier aan voor het bewerken van een kaartlaag. Zie hoofdstuk Formulieren van de Handleiding WGP Advanced.
2. Wijzig dit formulier en ga op pagina Formulier beheren naar tabblad Smart form.

3. Selecteer Importeer configuratie. De WGP-instellingen van het formulier worden vertaald naar JSON-code en deze code verschijnt in het zwarte canvas onder Configuratie slim formulier. Deze code wordt gebruikt om met Apaca forms een HTML5-formulier te genereren. De JSON-code heeft een schema-gedeelte waarin de velden van het formulier worden gedefinieerd en een options-gedeelte waarin de eigenschappen van de velden worden beschreven.

   Het importeren van een configuratie overschrijft alle JSON-code op tabblad Smart forms.

    Voorbeeld JSON-code

   Hieronder zie je een voorbeeld van de JSON-code voor een eenvoudig geïmporteerd formulier met drie velden, een tekstveld 'label', een datumveld 'date' en een integerveld 'state'. Het schema-gedeelte definieert het tabblad als een object met velden en geeft voor de velden aan onder welke naam ze te zien zijn en welk datatype ze hebben. Het options-gedeelte beschrijft dat het datumveld het formaat "jaar-maand-dag" gebruikt en dat de datum met de datumkiezer van WGP wordt geselecteerd.

   {
     "schema": {
       "type": "object",
       "title": "Tabblad 1",
       "properties": {
         "label": {
           "type": "string",
           "title": "Tekst"
         },
         "date": {
           "type": "string",
           "title": "Datum",
           "format": "date"
         },
         "state": {
           "type": "integer",
           "title": "Nummer"
         }
       }
     },
     "options": {
       "fields": {
         "label": {},
         "date": {
           "label": "Datum",
           "type": "wgpdatepicker",
           "picker": {
             "usetime": false,
             "format": "YYYY-MM-DD"
           },
           "inputGroup": {
             "after": {
               "icon": "icon icon-calendar-1"
             }
           }
         },
         "state": {}
       }
     },
     "view": {
       "locale": "nl_BE"
     }
   }

4. Voeg de specifieke functies aan de JSON-code toe. Gebruik tekstvelden voor foto's, huidige gebruiker, automatisch aanvullen, selectie van meerdere waarden en het zetten van een handtekening. Gebruik datumvelden voor de datumkiezer en het instellen van het datumformaat.

5. Selecteer Opslaan. 
6. Controleer de geïmplementeerde functie met Toon voorbeeld smart form. Bijvoorbeeld:
   
   

Zie voor de beschrijving van de specifieke formulierfuncties de volgende pagina's:

Gerelateerde pagina's

• Page:
  Gebruik van formulieren
• Page:
  Meldingen