Add `always_save` field config to allow overriding of conditional field data flow

[jesseleite]

As documented here, field conditions have the following data flow behaviour:

Only visible fields are submitted with your form data. This allows you to control data flow, and conditionally apply validation to visible fields when needed.

We've talked about this a bunch, but never implemented it. This PR allows a user to override the default data flow behaviour on conditional fields with a setting:

Note: You could already override this data flow behaviour by using a revealer field (as mentioned in the revealer docs), but this allows you to override data flow behaviour on any conditionally hidden fields, regardless of how your conditions are set up.

Closes https://github.com/statamic/cms/issues/6386

[niktwenty3]

Hey @jesseleite - Pulled your branch under my local vendor folder to test and it doesn't appear to work as expected.

To test I created a simple alignment interface. It consists of a button group that has 3 breakpoint options (Small, Medium, Large) and 3 button groups for each one of those breakpoints that control alignment.

In my test I set the position for the SM breakpoint to left, MD to center, and LG to right.

When I hit the save button on the backend it only saves the last visible option.

I'm adding my fieldset yaml bellow and the page content yaml of my test.

title: Align
fields:
  -
    handle: align_control
    field:
      options:
        sm: Small
        md: Medium
        lg: Large
      display: 'Align control'
      type: button_group
      icon: button_group
      listable: hidden
      instructions_position: above
      visibility: visible
      always_save: true
  -
    handle: pos_sm
    field:
      options:
        left: Left
        center: Center
        right: Right
      display: 'Position SM'
      type: button_group
      icon: button_group
      listable: hidden
      instructions_position: above
      visibility: visible
      always_save: true
      if:
        align_control: 'equals sm'
  -
    handle: pos_md
    field:
      options:
        left: Left
        center: Center
        right: Right
      display: 'Position MD'
      type: button_group
      icon: button_group
      listable: hidden
      instructions_position: above
      visibility: visible
      always_save: true
      if:
        align_control: 'equals md'
  -
    handle: pos_lg
    field:
      options:
        left: Left
        center: Center
        right: Right
      display: 'Position LG'
      type: button_group
      icon: button_group
      listable: hidden
      instructions_position: above
      visibility: visible
      always_save: true
      if:
        align_control: 'equals lg'

---
id: 91f2c3b5-8e75-4a0a-b458-74c2fd80b778
blueprint: pages
title: 'Test align'
updated_by: 731a1049-8fd7-4fed-9d24-3b14c51810ca
updated_at: 1659000923
align_control: lg
pos_lg: right
published: true
---

I have some Vue experience so I'll try to take a deeper look at the validation js file to see if I can get more information but right now I have to switch to other work :)

[jesseleite]

Pulled your branch under my local vendor folder to test and it doesn't appear to work as expected.

@niktwenty3 Did you also build the JS though?

[niktwenty3]

Yes, I thought about that too after my initial comment. Now that I had some more time I run npm run production in vendor/stamatic/cms/ to rebuild the modules. Still, the same end result. But, if it works on your end, then I'm definitely missing something.

Still looking into it, but, I did take screenshots from the Vue Dev tools just in case and I'm adding them here.

[jesseleite]

But, if it works on your end, then I'm definitely missing something.

@niktwenty3 I just tried your fieldset example, and it seems to save fine for me...

pos_sm: left
pos_md: center
pos_lg: right

Once you rebuild the JS, it needs to go in public/vendor/statamic. When working in sandbox apps, I symlink my assets in, so that I can npm run watch from my cms repo, etc...

[niktwenty3]

If it works on your end, then it's definitely me. I tried your setup above but I still didn't get it to work on my end. I'll start a fresh project tomorrow morning to make sure I didn't miss anything.

Pasting bellow my setup just to be safe.

Steps I took:

1. Cloned statamic CMS repo
2. Installed required npm modules
3. Run npm run watch and then npm run frontend-watch to build the app
4. Created symbolic links like your example

www-data@5f54c328a0fc:/app/cms$ git status
On branch feature/always-save-field-config
Your branch is up to date with 'origin/feature/always-save-field-config'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   package-lock.json

no changes added to commit (use "git add" and/or "git commit -a")
www-data@5f54c328a0fc:/app/cms$ ls -la ../vendor/statamic/
total 12
drwxr-xr-x  3 www-data www-data 4096 Jul 28 21:36 .
drwxr-xr-x 63 www-data www-data 4096 Jul 26 12:37 ..
lrwxrwxrwx  1 www-data www-data    8 Jul 28 21:36 cms -> /app/cms
drwxr-xr-x  3 www-data www-data 4096 May  4 18:41 stringy
www-data@5f54c328a0fc:/app/cms$ ls -la ../public/vendor/statamic/
total 8
drwxr-xr-x 2 www-data www-data 4096 Jul 28 21:37 .
drwxr-xr-x 3 www-data www-data 4096 Jun 29 20:25 ..
lrwxrwxrwx 1 www-data www-data   23 Jul 28 21:37 cp -> /app/cms/resources/dist
lrwxrwxrwx 1 www-data www-data   32 Jul 28 21:37 frontend -> /app/cms/resources/dist-frontend

YAML file after I save.

---
id: 91f2c3b5-8e75-4a0a-b458-74c2fd80b778
blueprint: pages
title: 'Test align'
updated_by: 731a1049-8fd7-4fed-9d24-3b14c51810ca
updated_at: 1659044513
align_control: lg
pos_lg: right
published: true
---

[niktwenty3]

Good morning :) Woke up, made some killer coffee and tried again with a fresh install.

Yet still for some reason it does not work on my end.

Here is what was done.

1. Created a new statamic project using the CLI - statamic new feature-test (no starter-kit)
2. Cloned statamic CMS
3. Switched to the feature/always-save-field-config branch
4. Installed different version of node-sass npm install [email protected] since on my end it has an issue with the version that's packaged and will not build otherwise and then run npm install for the other dependencies
5. Built the app npm run production and npm run frontend-prod
6. Created symlinks
7. Checked to see current version on the backend and if the new "Always Save" option is there - (Latest version - Always Save showed up)
8. Edited the "Pages" blueprint and added my fields
9. Created new page on the backend, tried to save SM|Left MD|Center LG|Right but it would always only save the last visible on the UI option

Saved data

---
id: 9604a11d-c001-46a3-b7c8-886ca667ed39
blueprint: pages
title: Test123
author: b0355744-477a-45e6-a5de-748576c781dc
updated_by: b0355744-477a-45e6-a5de-748576c781dc
updated_at: 1659077415
align_control: md
pos_md: center
published: true
---

Pages blueprint

title: Pages
sections:
  main:
    display: Main
    fields:
      -
        handle: title
        field:
          type: text
          required: true
      -
        handle: align_control
        field:
          options:
            sm: Small
            md: Medium
            lg: Large
          display: 'Align control'
          type: button_group
          icon: button_group
          listable: hidden
          instructions_position: above
          visibility: visible
          always_save: true
      -
        handle: pos_sm
        field:
          options:
            left: Left
            center: Center
            right: Right
          display: 'Position SM'
          type: button_group
          icon: button_group
          listable: hidden
          instructions_position: above
          visibility: visible
          always_save: true
          if:
            align_control: 'equals sm'
      -
        handle: pos_md
        field:
          options:
            left: Left
            center: Center
            right: Right
          display: 'Position MD'
          type: button_group
          icon: button_group
          listable: hidden
          instructions_position: above
          visibility: visible
          always_save: true
          if:
            align_control: 'equals md'
      -
        handle: pos_lg
        field:
          options:
            left: Left
            center: Center
            right: Right
          display: 'Position LG'
          type: button_group
          icon: button_group
          listable: hidden
          instructions_position: above
          visibility: visible
          always_save: true
          if:
            align_control: 'equals lg'
  sidebar:
    display: Sidebar
    fields:
      -
        handle: slug
        field:
          type: slug
          localizable: true
      -
        handle: parent
        field:
          type: entries
          collections:
            - pages
          max_items: 1
          listable: false
          localizable: true

Webserver directory

Folder cms is the downloaded repo.

www-data@23c7023c0b8a:/app$ ls -la
total 496
drwxr-xr-x 15 www-data www-data   4096 Jul 29 06:32 .
drwxr-xr-x  1 root     root       4096 Jul 29 06:27 ..
-rw-r--r--  1 www-data www-data    220 Mar  3 20:37 .editorconfig
-rw-r--r--  1 www-data www-data   1075 Jul 29 06:25 .env
-rw-r--r--  1 www-data www-data   1011 Mar  3 20:37 .env.example
-rw-r--r--  1 www-data www-data    134 Mar  3 20:37 .gitattributes
-rw-r--r--  1 www-data www-data    211 Mar  3 20:37 .gitignore
-rw-r--r--  1 www-data www-data     67 Jul 29 06:26 .lando.yml
-rw-r--r--  1 www-data www-data    181 Mar  3 20:37 .styleci.yml
-rw-r--r--  1 www-data www-data   1834 Mar  3 20:37 README.md
drwxr-xr-x  7 www-data www-data   4096 Mar  3 20:37 app
-rwxr-xr-x  1 www-data www-data   1686 Mar  3 20:37 artisan
drwxr-xr-x  3 www-data www-data   4096 Mar  3 20:37 bootstrap
drwxr-xr-x 10 www-data www-data   4096 Jul 29 06:33 cms
-rw-r--r--  1 www-data www-data   2082 Mar  3 20:37 composer.json
-rw-r--r--  1 www-data www-data 379560 Jul 29 06:25 composer.lock
drwxr-xr-x  3 www-data www-data   4096 Mar  3 20:37 config
drwxr-xr-x  8 www-data www-data   4096 Mar  3 20:37 content
drwxr-xr-x  5 www-data www-data   4096 Mar  3 20:37 database
-rw-r--r--  1 www-data www-data    616 Mar  3 20:37 package.json
-rw-r--r--  1 www-data www-data   1202 Mar  3 20:37 phpunit.xml
-rwxr-xr-x  1 www-data www-data   1689 Mar  3 20:37 please
drwxr-xr-x  6 www-data www-data   4096 Jul 29 06:25 public
drwxr-xr-x  9 www-data www-data   4096 Jul 29 06:34 resources
drwxr-xr-x  2 www-data www-data   4096 Mar  3 20:37 routes
-rw-r--r--  1 www-data www-data    563 Mar  3 20:37 server.php
drwxr-xr-x  7 www-data www-data   4096 Mar  3 20:37 storage
-rw-r--r--  1 www-data www-data    252 Mar  3 20:37 tailwind.config.js
drwxr-xr-x  4 www-data www-data   4096 Mar  3 20:37 tests
drwxr-xr-x  2 www-data www-data   4096 Jul 29 06:31 users
drwxr-xr-x 62 www-data www-data   4096 Jul 29 06:25 vendor
-rw-r--r--  1 www-data www-data   1260 Mar  3 20:37 webpack.mix.js

www-data@23c7023c0b8a:/app/cms$ git status
On branch feature/always-save-field-config
Your branch is up to date with 'origin/feature/always-save-field-config'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   package-lock.json
        modified:   package.json

no changes added to commit (use "git add" and/or "git commit -a")

Symlink for CMS

www-data@23c7023c0b8a:/app$ ls -la vendor/statamic/
total 12
drwxr-xr-x  3 www-data www-data 4096 Jul 29 06:35 .
drwxr-xr-x 62 www-data www-data 4096 Jul 29 06:25 ..
lrwxrwxrwx  1 www-data www-data    8 Jul 29 06:35 cms -> /app/cms
drwxr-xr-x  3 www-data www-data 4096 May  4 18:41 stringy

Symlinks for CP/Frontend

www-data@23c7023c0b8a:/app$ ls -la public/vendor/statamic/
total 8
drwxr-xr-x 2 www-data www-data 4096 Jul 29 06:36 .
drwxr-xr-x 3 www-data www-data 4096 Jul 29 06:25 ..
lrwxrwxrwx 1 www-data www-data   23 Jul 29 06:36 cp -> /app/cms/resources/dist
lrwxrwxrwx 1 www-data www-data   32 Jul 29 06:36 frontend -> /app/cms/resources/dist-frontend

The only thing I can tell I might be doing different is installing node-sass so that I can build the app. Other than that I have no idea why I can't get it to work on my end xD - Still I'm determined to figure it out :)

[niktwenty3]

Update - managed to get it working on the fresh install. No idea why though. :/

I'll put my details here for future prosperity.

After I had done all the steps in the previous comment I went and run npm dev on /app. But since I had symbolic links for cms, cp, and frontend, it messed my CP a bit(1). The pages item disappeared from the collections menu. I logged into my container, removed the symlinks, rebuilt the cms files in /app/cms, and then recreated the symlinks. Now it works and everything looks ok. :/

It's definitely a me thing xD - I'll try to port it now on the main project :)

(1) npm in installed on my local system (Win11/WSL2) but the symlink paths are on the container I'm using for my tests.

[niktwenty3]

Final comment, I swear xD. Got it working on our main project - rebuilding the files on the root folder on our end was the missing piece. Thanks a lot for the time and replies on this :).

We've been wanting to move away from WP for a long time, but, we also wanted to give more design options for marketing people on the backend. With this, we can flesh out a pretty decent page builder for them to toy around :)

PS. Screenshot of some of the components that are being put together.

[jesseleite]

Got it working on our main project - rebuilding the files on the root folder on our end was the missing piece. Thanks a lot for the time and replies on this :).

All good, glad to hear!

[jasonvarga]

@jesseleite Can you resolve the merge conflict? It's from #6443