Elements field not saving data of element

Question

Elements field not saving data of element

pamtbaau opened this issue 3 years ago · comments

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 · Answer 1 · Wed Feb 09 2022 11:59:47 GMT+0800 (China Standard Time)

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

Simon Bösch · Answer 2 · Thu Feb 17 2022 06:11:50 GMT+0800 (China Standard Time)

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 ...

Matias Griese · Answer 3 · Sat Mar 26 2022 04:04:07 GMT+0800 (China Standard Time)

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 · Answer 4 · Sat Mar 26 2022 16:00:03 GMT+0800 (China Standard Time)

@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.

Andy Miller · Answer 5 · Sun Mar 27 2022 01:13:20 GMT+0800 (China Standard Time)

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

pamtbaau · Answer 6 · Sun Mar 27 2022 01:15:24 GMT+0800 (China Standard Time)

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

pamtbaau · Answer 7 · Sun Mar 27 2022 01:35:30 GMT+0800 (China Standard Time)

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

Andy Miller · Answer 8 · Sun Mar 27 2022 01:40:21 GMT+0800 (China Standard Time)

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

Andy Miller · Answer 9 · Sun Mar 27 2022 01:43:00 GMT+0800 (China Standard Time)

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 · Answer 10 · Sun Mar 27 2022 01:44:36 GMT+0800 (China Standard Time)

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

Andy Miller · Answer 11 · Sun Mar 27 2022 01:48:25 GMT+0800 (China Standard Time)

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

Andy Miller · Answer 12 · Sun Mar 27 2022 01:58:41 GMT+0800 (China Standard Time)

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

pamtbaau · Answer 13 · Sun Mar 27 2022 02:21:15 GMT+0800 (China Standard Time)

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... :-(

Andy Miller · Answer 14 · Sun Mar 27 2022 03:55:28 GMT+0800 (China Standard Time)

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 · Answer 15 · Sun Mar 27 2022 12:49:48 GMT+0800 (China Standard Time)

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?