Page Comparison

  {# Het veld foto bevat de foto-url's. #}
{% set foto_arr = foto|split(';') %}
{# Pas breedte aan indien nodig. 306px past goed bij standaard feature info in zijbalk. #}
{% set container_width = '306px' %}
{# Pas ook dit aan naar smaak. #}
{% set thumb_height = '100px' %}




<p style="margin-bottom: 0.2rem"><strong>Gemeld door: </strong>{{ username }}</p>
<p style="margin-bottom: 0.2rem"><strong>Datum: </strong>{% if datum %}{{ datum | date('d-m-Y') }}{% else %}Onbekend{% endif %}</p>
<p style="margin-bottom: 0.2rem"><strong>Omschrijving: </strong>{{ omschrijving }}</p>
<p style="margin-bottom: 0.2rem"><strong>Type melding: </strong>{{ type_melding }}</p>
<p style="margin-bottom: 0.2rem"><strong>Subtype melding: </strong>{{ subtype_melding }}</p>
<p style="margin-bottom: 0.2rem"><strong>Afhandelen door: </strong>{{ afhandelen_door }}</p>
<p style="margin-bottom: 0.2rem"><strong>Afgehandeld: </strong>{% if afgehandeld %} Ja {% else %} Nee {% endif %}</p>
<p>&nbsp;</p>

{# Hieronder staat de div waar de foto's mee getoond worden. #}
<h3>foto's</h3>
<div style="width:{{container_width}};display:flex;flex-wrap:wrap;">

  {% for foto_url in foto_arr if foto_url %}
  {% set link = foto_url|split('|') %}

  <a target="_blank" href="{{link.1}}" style="margin:0.3rem;min-width:46%;height:{{thumb_height}};background-image:url({{link.1}});background-size:cover;background-position:center"></a>
  {% endfor %}
</div>

Uitleg:

De waarde uit het attribuutveld ‘foto’ wordt eerst omgezet naar een array (variabele foto_arr) met daarin de afzonderlijk foto-strings:

foto_arr = [
“bestandsnaam|link_naar_bestand“,
“bestandsnaam|link_naar_bestand“
]

Vervolgens wordt er onderaan het template ‘gelooped’ over de waardes in foto_arr, en worden deze vervolgens weer gesplit in een variabele link met een bestandsnaam (link.0) en bestandslink (link.1) onderdeel.

{
    "title": "Vul hier de titel van het formulier inApp meldingen",
    "type": "object",
    "required": [
        "username",
        "type_melding"
    ],
    "properties": {
        "username": {
            "type": "string",
            "title": "Gebruiker",
            "default": null
        },
        "datum": {
            "type": "string",
            "format": "date"
        },
        "type_melding": {
            "type": "string",
            "title": "Type melding",
            "enum": [
                "Vrije melding",
                "Schade",
                "Gevaarlijke situatie"
            ],
            "default": "Vrije melding"
        },
        "afgehandeld": {
            "type": "boolean",
            "default": false
        },
        "foto": {
            "type": "string",
            "title": "Foto",
            "default": null
        }
    },
    "dependencies": {
        "type_melding": {
            "oneOf": [
                {
                    "properties": {
                        "type_melding": {
                            "enum": [
                                "Vrije melding"
                            ]
                        },
                        "omschrijving": {
                            "type": "string",
                            "title": "Omschrijving"
                        }
                    }
                },
                {
                    "properties": {
                        "type_melding": {
                            "enum": [
                                "Schade"
                            ]
                        },
                        "subtype_melding": {
                            "type": "string",
                            "title": "Schadetype",
                            "enum": [
                                "Graverij door dieren",
                                "Graverij door mensen",
                                "Sinkhole",
                                "Beschadigde brug",
                                "Wegdek beschadigd",
                                "Erosie",
                                "Vandalisme",
                                "Stormschade",
                                "Overig"
                            ]
                        },
                        "omschrijving": {
                            "type": "string",
                            "title": "Omschrijving Schade"
                        }
                    },
                    "required": [
                        "omschrijving",
                        "subtype_melding"
                    ]
                },
                {
                    "properties": {
                        "type_melding": {
                            "enum": [
                                "Gevaarlijke situatie"
                            ]
                        },
                        "subtype_melding": {
                            "type": "string",
                            "title": "Soort situatie",
                            "enum": [
                                "Stoplicht kapot",
                                "Boom omgevallen",
                                "Glas op de weg",
                                "Olielek",
                                "Gaslek",
                                "Wateroverlast",
                                "Beschadigde verkeersborden",
                                "Overig"
                            ]
                        },
                        "omschrijving": {
                            "type": "string",
                            "title": "Omschrijving gevaar"
                        }
                    },
                    "required": [
                        "omschrijving",
                        "subtype_melding"
                    ]
                }
            ]
        }
    }
}

{
    "ui:order": [
        "username",
        "datum",
        "tijd",
        "type_melding",
        "subtype_melding",
        "omschrijving",
        "foto",
        "afgehandeld"
    ],
    "datum": {
        "ui:widget": "date",
        "ui:options": {
            "yearsRange": [
                1980,
                2030
            ]
        }
    },
    "foto": {
        "ui:widget": "cameraWidget",
        "ui:options": {
            "title": "foto's"
        }
    },
    "afgehandeld": {
        "ui:widget": "checkbox"
    },
    "omschrijving": {
        "ui:widget": "textarea"
    }
}

Uitleg:

In het formulierschema zijn een aantal velden opgenomen:

• username

• datum

• type_melding

• afgehandeld

• foto

maar ook het veld

• subtype_melding

Het veld type_melding bevat een keuzelijstje met 3 opties:

"Vrije melding",
"Schade",
"Gevaarlijke situatie"

De instellingen en weergave van het veld subtype_melding zijn afhankelijk van de ingevoerde waarde bij het veld type_melding.

Als er bijvoorbeeld “schade” is gekozen als type melding, verschijnen er de volgende sub-types:
"Graverij door dieren",
"Graverij door mensen",
"Sinkhole",
"Beschadigde brug",
"Wegdek beschadigd",
"Erosie",
"Vandalisme",
"Stormschade",
"Overig"

In het onderdeel UISchema staan de instellingen voor de gebruikers interface.

Bovenaan staat de volgorde van de invoervelden in het formulier (ui:order)

Voor verschillende velden worden zogenaamde ‘widgets’ gebruikt die de vormgeving van het formulier bepalen:

• "ui:widget": "date"
  Dit zorgt voor een datumpicker in het formulier.

• "ui:widget": "textarea"
  Hiermee wordt een tekstinvoerveld groter weergegeven, als invoervak voor meerdere regels

• "ui:widget": "cameraWidget"
  Dit is een veld dat in de Onemap App 2 knoppen toont, 1 voor het maken van een foto met de camera, en 1 voor het kiezen van één of meerdere foto’s uit de fotogalerij.