Elements field not saving data of element

[pamtbaau]

Using fresh Grav v1.7.29.1 install, I've created a blueprint in Quark using a copy of the demo from the docs on Elements Field. However, the values of the chosen element are not being saved.

user/themes/quark/blueprints/elements.yaml

title: Elements
'@extends':
    type: default
form:
  fields:
    tabs:
      type: tabs
      active: 1
      fields:
        links:
          type: tab
          title: Elements
          fields:
# Rest is copied straight from the docs
            header.elements-demo:
              type: elements
              label: 'Elements Demo'
              size: small
              default: gelato
              options:
                gelato: Gelato Flavors
                color: Color
                planets: Planets
              fields:
                gelato:
                  type: element
                  fields:
                    .items:
                      type: array
                      default:
                        pistacchio: Pistacchio
                        vanilla: Vanilla
                        chocolate: Chocolate
                        stracciatella: Stracciatella
                color:
                  type: element
                  fields:
                    .items:
                      type: textarea
                      rows: 10
                      default: Color (American English) or colour (Commonwealth English) is the visual perceptual property corresponding in humans to the categories called blue, green, red, etc. Color derives from the spectrum of light (distribution of light power versus wavelength) interacting in the eye with the spectral sensitivities of the light receptors. Color categories and physical specifications of color are also associated with objects or materials based on their physical properties such as light absorption, reflection, or emission spectra. By defining a color space colors can be identified numerically by their coordinates.
                planets:
                  type: element
                  fields:
                    .items:
                      type: text
                      placeholder: What are your favorite planets?
                      markdown: true
                      description: 'Find a list of planets from [Wikipedia](https://en.wikipedia.org/wiki/Planet)'

When creating a new page based on the blueprint, only the following, depending on the chosen element, is being saved in the page:

user/pages/03.elemens/elements.md

---
title: Elements
elements-demo: gelato
---

-or-

title: 'Elements'
elements-demo: color

-or-

---
title: Elements
elements-demo: planets
---

[mdestafadilah]

please follow this bug. it's about admin area.

[IamSAB]

There is still some wierd things happening.

• Copy over the doc example an saving works the first time, then with saving again, only the switcher value is saved
• removing "header." nesting, the config is saved as:

  elements-demo: gelato
  0:
  gelato:
  gelato:
    items:
      pistacchio: Pistacchio
  1:
  gelato:
  gelato:
    items:
      vanilla: Vanilla
  2:
  gelato:
  gelato:
    items:
      chocolate: Chocolate
  3:
  gelato:
  gelato:
    items:
      stracciatella: Stracciatella
  4:
  color:
  color:
    items: 'Color (American English) or colour (Commonwealth English) is the visual perceptual property corresponding in humans to the categories called blue, green, red, etc. Color derives from the spectrum of light (distribution of light power versus wavelength) interacting in the eye with the spectral sensitivities of the light receptors. Color categories and physical specifications of color are also associated with objects or materials based on their physical properties such as light absorption, reflection, or emission spectra. By defining a color space colors can be identified numerically by their coordinates.'
  5:
  planets:
  planets:
    items: ''

Seems quite buggy ...

[mahagr]

This should be working as we're using it. But there are going to be some more related fixes in case the elements field is made toggleable.

[pamtbaau]

@mahagr,

This should be working as we're using it.

Have you tested the examples given?

Things appear to have changed a little when using fresh install of latest Grav v1.7.31 :

• The values are now being saved correctly during the first time the page is being saved.
• Subsequent saves show unexpected behaviour.

Using unchanged blueprint from initial post user/themes/quark/blueprints/elements.yaml

Results:

• At initial save all values, including inserts/updates/deletes, are being saved in frontmatter.
• After saving page, made the following changes:
  • Field 'gelato':
  • Added new flavour
  • Removed a flavour
  • Updated a flavour
  • Field 'color'
  • Changed the text
  • Field 'planets'
  • Changed the text
• Saved changes
• Results:
  • 'gelato':
  • New flavour is being saved.
  • Deleted flavour is not being removed from frontmatter.
  • Updated flavour is added as new item. Original still exists in frontmatter.
  • 'color': No changes saved
  • 'planets': No changes saved.

[rhukster]

Form and admin plugins have been updated extensively since this was reported. Have you tried with develop branch of each ?

[pamtbaau]

No, only used latest release. Will clone Admin and Form. Keep you posted.

[pamtbaau]

• Copied existing installation of Grav + Admin 1.7.31
• Removed content of user/plugins/form
• git clone https://github.com/getgrav/grav-plugin-form -b develop .
• Remove content of user/plugins/admin
• git clone https://github.com/getgrav/grav-plugin-admin -b develop .
• Ran above tests: Same behaviour:
  • Initial save of page, all goes well
  • Subsequent saves are incorrect, see previous comment

[rhukster]

I think your issue might be related to the fields in side of element tag. You are using list style . Yaml fields. These should be full header.gelato.pistachio format not .items

[rhukster]

Here’s a sample from seo magic:

        images.type:
          type: elements
          label: PLUGIN_SEOMAGIC.IMAGE_TYPE
          help: PLUGIN_SEOMAGIC.IMAGE_TYPE_HELP
          default: auto
          options:
            webshot: PLUGIN_SEOMAGIC.IMAGE_TYPE_WEBSHOT
            auto: PLUGIN_SEOMAGIC.IMAGE_TYPE_AUTO
            image_name: PLUGIN_SEOMAGIC.IMAGE_TYPE_IMAGE_NAME
            image_attribute: PLUGIN_SEOMAGIC.IMAGE_TYPE_IMAGE_ATTRIBUTE
            'og-image': PLUGIN_SEOMAGIC.IMAGE_TYPE_OG_IMAGE
            media_first: PLUGIN_SEOMAGIC.IMAGE_TYPE_MEDIA_FIRST
            default: PLUGIN_SEOMAGIC.IMAGE_TYPE_DEFAULT
            none: PLUGIN_SEOMAGIC.IMAGE_TYPE_NONE
          fields:
            webshot:
              type: element
              fields:
                images.webshot_feature:
                  type: premium-feature
                  label: PLUGIN_SEOMAGIC.ENABLE_WEBSHOT
                  help: PLUGIN_SEOMAGIC.ENABLE_WEBSHOT_HELP
                  feature: webshot
            auto:
              type: element
              fields:
                images.auto_order:
                  type: array
                  value_only: true
                  size: large
                  label: PLUGIN_SEOMAGIC.AUTO_ORDER
                  help: PLUGIN_SEOMAGIC.AUTO_ORDER_HELP
            image_name:
              type: element
              fields:
                images.image_name:
                  type: text
                  label: PLUGIN_SEOMAGIC.IMAGE_NAME
                  help: PLUGIN_SEOMAGIC.IMAGE_NAME_HELP
            image_attribute:
              type: element
              fields:
                images.image_attribute:
                  type: text
                  label: PLUGIN_SEOMAGIC.IMAGE_ATTRIBUTE
                  help: PLUGIN_SEOMAGIC.IMAGE_ATTRIBUTE_HELP
            default:
              type: element
              fields:
                images.default_image:
                  type: text
                  label: PLUGIN_SEOMAGIC.DEFAULT_IMAGE
                  help: PLUGIN_SEOMAGIC.DEFAULT_IMAGE_HELP

[pamtbaau]

The code being used for the tests are straight from the docs: https://learn.getgrav.org/17/forms/blueprints/fields-available#elements-field.

I'll try your example

[rhukster]

Looks like docs is wrong imho. Need to test properly when I’m on my computer. Phone is not going to cut it.

[rhukster]

Not sure who did those docs but the example looks very broken to me.

[pamtbaau]

TLDR: Nothing is being saved except selected option key.

Here's my test:

• Copied existing installation of Grav + Admin 1.7.31
• Removed content of user/plugins/form
• git clone https://github.com/getgrav/grav-plugin-form -b develop .
• Remove content of user/plugins/admin
• git clone https://github.com/getgrav/grav-plugin-admin -b develop .
• Created user/themes/quark/blueprints/elements.yaml with the following content:

  
  title: Elements
  '@extends':
  type: default
  form:
  fields:
  tabs:
    type: tabs
    active: 1
    fields:
      links:
        type: tab
        title: Elements
        fields:

Copied example from rhukster, but added prefix header.

        header.images.type:
          type: elements
          label: PLUGIN_SEOMAGIC.IMAGE_TYPE
          help: PLUGIN_SEOMAGIC.IMAGE_TYPE_HELP
          default: auto
          options:
            webshot: PLUGIN_SEOMAGIC.IMAGE_TYPE_WEBSHOT
            auto: PLUGIN_SEOMAGIC.IMAGE_TYPE_AUTO
            image_name: PLUGIN_SEOMAGIC.IMAGE_TYPE_IMAGE_NAME
            image_attribute: PLUGIN_SEOMAGIC.IMAGE_TYPE_IMAGE_ATTRIBUTE
            'og-image': PLUGIN_SEOMAGIC.IMAGE_TYPE_OG_IMAGE
            media_first: PLUGIN_SEOMAGIC.IMAGE_TYPE_MEDIA_FIRST
            default: PLUGIN_SEOMAGIC.IMAGE_TYPE_DEFAULT
            none: PLUGIN_SEOMAGIC.IMAGE_TYPE_NONE
          fields:
            webshot:
              type: element
              fields:
                images.webshot_feature:
                  type: premium-feature
                  label: PLUGIN_SEOMAGIC.ENABLE_WEBSHOT
                  help: PLUGIN_SEOMAGIC.ENABLE_WEBSHOT_HELP
                  feature: webshot
            auto:
              type: element
              fields:
                images.auto_order:
                  type: array
                  value_only: true
                  size: large
                  label: PLUGIN_SEOMAGIC.AUTO_ORDER
                  help: PLUGIN_SEOMAGIC.AUTO_ORDER_HELP
            image_name:
              type: element
              fields:
                images.image_name:
                  type: text
                  label: PLUGIN_SEOMAGIC.IMAGE_NAME
                  help: PLUGIN_SEOMAGIC.IMAGE_NAME_HELP
            image_attribute:
              type: element
              fields:
                images.image_attribute:
                  type: text
                  label: PLUGIN_SEOMAGIC.IMAGE_ATTRIBUTE
                  help: PLUGIN_SEOMAGIC.IMAGE_ATTRIBUTE_HELP
            default:
              type: element
              fields:
                images.default_image:
                  type: text
                  label: PLUGIN_SEOMAGIC.DEFAULT_IMAGE
                  help: PLUGIN_SEOMAGIC.DEFAULT_IMAGE_HELP

- Created new page in Admin using template 'Elements'
- Selected every option and entered values in available fields (not all options had fields to enter)
- Saved page:
- Content of page:

---

title: x images: type: webshot

Looks pretty much like initial post... :-(

[rhukster]

The example I gave you was from a 'blueprints' file.. so no header.variable references. To work in a page scenario you need prefix your element fields with header.:

title: Elements
'@extends':
    type: default
form:
  fields:
    tabs:
      type: tabs
      active: 1
      fields:
        links:
          type: tab
          title: Elements
          fields:

# Copied example from rhukster, but added prefix header.

            header.images.type:
              type: elements
              label: PLUGIN_SEOMAGIC.IMAGE_TYPE
              help: PLUGIN_SEOMAGIC.IMAGE_TYPE_HELP
              default: auto
              options:
                webshot: PLUGIN_SEOMAGIC.IMAGE_TYPE_WEBSHOT
                auto: PLUGIN_SEOMAGIC.IMAGE_TYPE_AUTO
                image_name: PLUGIN_SEOMAGIC.IMAGE_TYPE_IMAGE_NAME
                image_attribute: PLUGIN_SEOMAGIC.IMAGE_TYPE_IMAGE_ATTRIBUTE
                'og-image': PLUGIN_SEOMAGIC.IMAGE_TYPE_OG_IMAGE
                media_first: PLUGIN_SEOMAGIC.IMAGE_TYPE_MEDIA_FIRST
                default: PLUGIN_SEOMAGIC.IMAGE_TYPE_DEFAULT
                none: PLUGIN_SEOMAGIC.IMAGE_TYPE_NONE
              fields:
                webshot:
                  type: element
                  fields:
                    header.images.webshot_feature:
                      type: premium-feature
                      label: PLUGIN_SEOMAGIC.ENABLE_WEBSHOT
                      help: PLUGIN_SEOMAGIC.ENABLE_WEBSHOT_HELP
                      feature: webshot
                auto:
                  type: element
                  fields:
                    header.images.auto_order:
                      type: array
                      value_only: true
                      size: large
                      label: PLUGIN_SEOMAGIC.AUTO_ORDER
                      help: PLUGIN_SEOMAGIC.AUTO_ORDER_HELP
                image_name:
                  type: element
                  fields:
                    header.images.image_name:
                      type: text
                      label: PLUGIN_SEOMAGIC.IMAGE_NAME
                      help: PLUGIN_SEOMAGIC.IMAGE_NAME_HELP
                image_attribute:
                  type: element
                  fields:
                    header.images.image_attribute:
                      type: text
                      label: PLUGIN_SEOMAGIC.IMAGE_ATTRIBUTE
                      help: PLUGIN_SEOMAGIC.IMAGE_ATTRIBUTE_HELP
                default:
                  type: element
                  fields:
                    header.images.default_image:
                      type: text
                      label: PLUGIN_SEOMAGIC.DEFAULT_IMAGE
                      help: PLUGIN_SEOMAGIC.DEFAULT_IMAGE_HELP

All the elements/element fields do is hide/show the element based on the selected option in the elements. They always render, and are all saved, no matter what elements item you select. This is purely a UI field that helps to show which fields (contained in element fields) are related to which option (from elements field). That's why all the actual fields (e.g. header.images.default_image need to be setup as if they were just regular fields outside of the whole elements/element setup.

[pamtbaau]

Ouch... My mistake. I just copied your sample assuming it was a page blueprint. Thought you missed the initial header. during copy/paste and I didn't look any further...

Your "page" version works flawless. I'll create a PR for the docs.

Btw. What's the added value of writing the current selected element option (header.images.type in your example) into frontmatter?