Grav-plugin-admin: Conditional field - Set condition to other/sibling fields

Created on 24 Aug 2018 · 5Comments · Source: getgrav/grav-plugin-admin

In the blueprint file for a template i would like to use a repeater/list field,
that has a select field with options,
and conditional fields that evaluate the users selected choice to displays fields accordingly.

I would like to use this for long articles, where the user could add/switch different types of components

How do i set a condition to the value of the select field (in repetition)?
As the code is now, only the select is visible and the conditionals have no effect.

        header.field.selection:
          type: list
          style: vertical
          label: Repeater/list with conditional field selection
          fields:
            .select: # this select sets the boolean for the conditional fields
              type: select
              size: long
              classes: fancy
              label: Select the type of field you would like to add
              options:
                tinymce: Textarea
                slideshow: Slideshow
                testimonial: Testimonial
                video: Video
            .tinymce:
              type: conditional # if Textarea was selected render the tinymce fields
              condition: "header.field.selection.select is same as('tinymce') ? 'true' : 'false'"
              fields: 
                .fieldName:
                  type: text
                  label: Tinymce
            .slideshow:
              type: conditional # if slideshow was selected render the slideshow fields
              condition: "header.field.selection.select is same as('slideshow') ? 'true' : 'false'"
              fields: 
                .fieldName2:
                  type: text
                  label: Slideshow
            .testimonial:
              type: conditional # if testimonial was selected render the testimonial fields
              condition: "header.field.selection.select is same as('testimonial') ? 'true' : 'false'"
              fields: 
                .fieldName3:
                  type: text
                  label: Testimonial
            .video:
              type: conditional # if video was selected render the video fields
              condition: "header.field.selection.select is same as('video') ? 'true' : 'false'"
              fields: 
                .fieldName4:
                  type: text
                  label: Video

question

Source

Genenenenaam

All 5 comments

The conditional field is not something that works 'live' based on other fields, it's simply can execute a PHP function when being serviced and make a determination then. Anything else would require Javascript to run.

rhukster on 29 Aug 2018

😄1

Thanks rhukster.

I managed to make a 'Flexible Content Field'** (like Advanced custom fields in Wordpress). You can see the code here

** Define groups of sub fields (layouts) and add, edit, and re-order them to create highly customized content!

Genenenenaam on 29 Aug 2018

👍1

Would love to see something like this a core field in Form plugin :) PR perhaps??

rhukster on 30 Aug 2018

@rhukster
Pull request has been made for the branch ‘feature/flexible-form-field’.
Status:

Field selection template is usable. Added fields are saving and loading correctly.
Js & Css still needs to be added.
example-fieldselection.yaml is added.

I do need some help on:

The sorting of fields isn’t being saved in frontmatter.

tnx

(im on the slack channel as 'genenenenaam')

Genenenenaam on 31 Aug 2018

@rhukster

is there some dependency on the 'sorting of list items' and the name of the field template 'list.html.twig' ?

I did a test and it seems:

if you make a new folder 'fieldselection' on the same level where the 'list' folder is located.
duplicate the file 'list.html.twig', rename it to 'fieldselection.html.twig' and place that inside the 'fieldselection' folder.
if you now make a blueprint where you use a 'list' field type, but you give it a type of 'fieldselection'.
(which shouldn't make a difference, hence both types have the same code contents)
The re-ordering doesn't work for the type 'fieldselection', but it does for the type 'list'.
(Same for deleting an item)

I believe the answer to this can resolve my issue with the current state of the new feature.

Genenenenaam on 31 Aug 2018

Was this page helpful?

0 / 5 - 0 ratings