Integraties

Instellen van specifieke integraties.

Spotbooking

Eigenschappen

In de JSON-beschrijving van het formulier:

CODE

{
  label: "Aanvraag inname openbaar domein",
  name: "spotbooking",
  type: "fieldset",
  customComponentName: "skrSpotbooking",
  fields: [
    {
      name: "spotbookingId",
      label: "Spotbooking id",
      type: "text",
      help: "Kopieer de id vanuit spotbooking naar dit veld",
      helpInLine: true
    }
  ]
}

Mapping functionaliteit

In de frontoffice Spotbooking widget moet de gebruiker een groot aantal velden invullen. Als je binnen het proces al over bepaalde gegevens beschikt (bijvoorbeeld de naam van de aanvrager), dan kan je als configurator die gegevens mappen op de Spotbooking widget velden.

Klik op de knop Koppel formuliervelden. Een dialoogvenster gaat open waar je de mapping kan instellen.

Enkel velden van het juiste datatype zijn selecteerbaar.
Het is niet verplicht om alle velden te mappen.

Achterliggend worden computed expressions (formulier expressies) toegevoegd aan de JSON-beschrijving van het formulier. Je kan deze ook manueel opbouwen, maar let erop dat je mapt naar een veld met het correcte datatype.

CODE

computedExpressions: {
  "sb_firstName": "...", // text field
  "sb_lastName": "...", // text field
  "sb_type": "...", // * see below *
  "sb_companyName": "...", // text field - only relevant in case type company
  "sb_companyNumber": "...", // text field with KBO mask- only relevant in case type company
  "sb_contact_street": "...", // text field
  "sb_contact_housenumber": "...", // text field
  "sb_contact_boxnumber": "...", // text field
  "sb_contact_zipcode": "...", // text field
  "sb_contact_municipality": "...", // text field
  "sb_contact_country": "...", // text field
  "sb_email": "...", // email field
  "sb_telephone": "...", // text field
  "sb_reason": "...", // * see below *
  "sb_reasonDescription": "...", // multiline field
  "sb_periods": "...", // * see below *
  "sb_location_street": "...", // text field
  "sb_location_housenumber": "...", // text field
  "sb_location_boxnumber": "...", // text field
  "sb_location_zipcode": "...", // text field
  "sb_location_municipality": "...", // text field
  "sb_location_country": "...", // text field
  "sb_locationDescription": "..." // multiline field
}

Hieronder volgen enkele bijzonderheden.

sb_reasonDescription en sb_locationDescription matchen in principe enkel met een multiline field (tekstvak), maar je kan dit ook laten werken met een enkelvoudig tekstveld of een vast ingevulde tekst. In dat geval moet je dit manueel aanpassen in de JSON.

Tekstveld:

CODE

"sb_locationDescription": "{
  markup: 'none',
  text: $.myTextField
}"

Vaste tekst:

CODE

"sb_locationDescription": "{
  markup: 'none',
  text: 'my fixed value'
}"

sb_type verwijst naar het type aanvrager. Dit moet ofwel person ofwel company zijn. Je moet hier verwijzen naar een keuzeveld met deze twee opties (opgelet: het keuzeveld mag enkel en alleen deze twee opties hebben), of je kan een vaste waarde opgeven ("{selectedOption: 'person'}").

sb_reason verwijst naar het type reden voor de inname. Je moet hier verwijzen naar een keuzeveld met volgende mogelijke opties (je kan enkele weglaten, maar je kan er geen toevoegen): feest, kermis, markt, speelstraat, wielerwedstrijdOpenCriterium, wielerwedstrijdGeslotenCriterium, andere. Het is ook mogellijk een vaste waarde op te geven ("{selectedOption: 'feest'}").

sb_periods verwijst naar een lijst met objecten. elk object heeft volgende eigenschappen: startDate (datumveld YYYY-MM-DD), startHour (tekstveld met tijdsmasker hhmm), endDate (datumveld YYYY-MM-DD), endHour (tekstveld met tijdsmasker hhmm). Ook hier is het mogelijk om vaste waardes op te geven. Bijzondere opties:

De gebruiker heeft op voorhand één datum (date) geselecteerd. Deze is binnen de computed expressions beschikbaar als $.date. Nu kan je de sb_periods als volgt instellen: {startDate:$.date, startHour:'0000', endDate:$.date, endHour:'2359'}].
De gebruiker heeft op voorhand één of meerdere periodes geselecteerd in een lijst. Deze lijst kan je alsvolgt opzetten.

CODE

{
  "name": "periods",
  "label": "Perioden",
  "type": "list",
  "required": true,
  "visualisation": "compact",
  "initialLength": 1,
  "element": {
    "computedExpressions": {
      "start": "moment($.startDate + $.startHour,'YYYY-MM-DDhhmm')",
      "end": "moment($.endDate + $.endHour,'YYYY-MM-DDhhmm')",
      "startBeforeEnd": "!$$.computedExpressions.start.isValid() || !$$.computedExpressions.end.isValid() || $$.computedExpressions.start.isBefore($$.computedExpressions.end)"
    }
  },
  "fields": [
    {
      "name": "startDate",
      "label": "Startdatum",
      "type": "date",
      "required": true,
      "conditions": [
        {
          "name": "startBeforeEnd",
          "level": "error",
          "expression": "$$.computedExpressions.startBeforeEnd",
          "errorMessage": "Het startmoment moet voor het eindmoment liggen"
        }
      ]
    },
    {
      "name": "startHour",
      "label": "Startuur",
      "type": "text",
      "required": true,
      "maskConfig": {
        "predefinedMask": "time"
      },
      "conditions": [
        {
          "name": "validHour",
          "level": "error",
          "expression": "$.charAt(0)*10 + $.charAt(1)*1 < 24 && $.charAt(2)*10 + $.charAt(3)*1 < 60",
          "errorMessage": "Gelieve een geldig uur in te vullen"
        }
      ]
    },
    {
      "name": "endDate",
      "label": "Einddatum",
      "type": "date",
      "required": true
    },
    {
      "name": "endHour",
      "label": "Einduur",
      "type": "text",
      "required": true,
      "maskConfig": {
        "predefinedMask": "time"
      },
      "conditions": [
        {
          "name": "validHour",
          "level": "error",
          "expression": "$.charAt(0)*10 + $.charAt(1)*1 < 24 && $.charAt(2)*10 + $.charAt(3)*1 < 60",
          "errorMessage": "Gelieve een geldig uur in te vullen"
        }
      ]
    }
  ]
}

Subsidy calculation result

Info volgt.