Dynamically add / remove items from form field list

Support
17

The task of building my own custom form field is currently out my sight, I’m afraid…

So, I’ve found a way that seems to do what you suggested, I suppose… I’ll try to show you.

First, we declare a new page blueprint that extends the default one, using an @import declaration. This way, anyone can use the geolocation fields in their own page blueprints.

  • blueprints/default_with_geolocation.yaml
extends@:
    type: default

form:
  fields:
    tabs:
      fields:
        geolocation:
          type: tab
          title: PLUGIN_GIS.GEOLOCATION
          import@:
            type: partials/geolocation
  • blueprints/partials/geolocation/geolocation.yaml:
form:
  fields:
    header.markers:
      name: markers
      type: list
      label: PLUGIN_GIS.MARKERS
      sort: false
      fields:
        .name:
          type: text
          label: PLUGIN_GIS.MARKER_NAME
          validate:
            required: true
        .icon:
          type: select
          label: PLUGIN_GIS.MARKER_ICON
        .latitude:
          type: text
          label: PLUGIN_GIS.LATITUDE
          validate:
            required: true
        .longitude:
          type: text
          label: PLUGIN_GIS.LONGITUDE
          validate:
            required: true

Then, with Javascript, we add an observer to the list <ul> and every time an item is added, we append an interactive map. Each item already saved has it’s own map.

Here is the page frontmatter:

title: Test
markers:
    -
        name: test
        icon: null
        latitude: '46.48628983293442'
        longitude: '2.759275841232225'
    -
        name: test
        icon: null
        latitude: '51.51763080199815'
        longitude: '-0.06712918926202739'

Here is the commit with all the changes : Refactoring the backend geolocation feature · 3576faa203 - grav-plugin-gis - reclic.dev vous délivre votre code