Custom field to set value of another field

[georgobermayr]

Hi,

I try to create a custom field that extends a toggle. Once the toggle is checked, it should set the value of another field by fetching data from an internal API endpoint. My blueprint looks like this:

        handle: overwrite_cast
        field:
          field_name: cast
          default: false
          display: 'Overwrite Cast'
          type: overwrite_production_data
          icon: toggle
          listable: hidden
          instructions_position: below
          read_only: false
      -
        handle: cast
        field:
          collapse: true
          sets:
            cast_member:
              display: 'Cast Member'
              fields:
                -
                  import: cast
          display: Cast
          type: replicator
          icon: replicator
          listable: hidden
          instructions_position: above
          read_only: false
          if:
            overwrite_cast: 'equals 1'

So my custom filed is named overwrite_production_data and the vue.js component looks like this:

<template>

    <div>
        <Toggle :value="value" @input="update" />
    </div>

</template>

<script>
const Toggle = Vue.component('toggle-fieldtype')

export default {

    mixins: [Fieldtype],
    inject: ['storeName'],

    components: {
        Toggle,
    },

    mounted() {
        this.fieldName = this.config.field_name;
        this.collection = 'production';
        this.production = this.$store.state.publish[this.storeName].values.production[0]
        this.endpoint = `https://my-site.test/api/collections/${this.collection}/entries/raw/${this.production}`;
    },

    watch: {
        value: function (value) {
            if (value) {
                this.fetchData();
            }
        }
    },

    methods: {
        fetchData() {
            this.$axios.get(this.endpoint).then(response => {
                const data = response.data[this.fieldName]

                this.$store.commit('publish/base/setFieldValue', {
                    handle: this.fieldName,
                    user: '',
                    value: data,
                })
            });
        },
    },
};
</script>

Basically on toggle I call a custom endpoint that delivers the data and then I commit an event to the Vuex store and set the value of the Replicator field. The data I receive is correct and has the data structure the Replicator field excepts.

The value of the Replicator field looks fine after I commit the new value via Vuex. However the value is not displayed in the Control panel. I have to save the page manually and reload it in order to view the new value of the field.

I think the commit to the Vuex store is not doing everything the Replicator field expects in order to view the data. The Replicator component seems to do a bit more, when a new entry is added via the user interface. Is there any way to trigger this chain of events? Or is there another approach to set the value of a field once something happens in another field?

Thanks,
Georg

[edalzell]

do this on the server side by listening to the entry saving/saved events and setting things there.

[georgobermayr]

Thank you! I could certainly do that, but this would require a manual save and reload from the control panel user to trigger the event. I don't think that's the preferred editing experience here. There is no way to solve this on the client side? The value is already set correctly in the target field, it is just not shown.

[jackmcdade]

You could probably use a field condition to slow a field dependent on the toggle when it’s true, and have the default value be true (or whatever you need) and the value won’t be populated unless the toggle is true. Does that make sense? I’m in a pool at a resort right now just trying to help :)

…

On May 23, 2022, at 1:42 PM, Georg Obermayr ***@***.***> wrote:  Thank you! I could certainly do that, but this would require a manual save and reload from the control panel user to trigger the event. I don't think that's the preferred editing experience here. There is no way to solve this on the client side? The value is already set correctly in the target field, it is just not shown. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.

[georgobermayr]

Thanks Jack for helping me from the pool! Basically, that is what I'm trying to do 😉
The value is set in the Replicator field, however it is not shown in the control panel UI.

This is how it looks like in the Vue inspector:

There is the _id property missing for each object in the array. However if I add it, still nothing is shown. If I save the entry and reload the browser window, the value is shown correctly. So I guess something is not happening correctly inside the Replicator field if I just commit the new value to the Vuex store.

[jackmcdade]

Are you on the latest version?

…

On May 24, 2022, at 10:06 AM, Georg Obermayr ***@***.***> wrote:  Thanks Jack for helping me from the pool! Basically, that is what I'm trying to do 😉 The value is set in the Replicator field, however it is not shown in the control panel UI. This is how it looks like in the Vue inspector: There is the _id property missing for each object in the array. However if I add it, still nothing is shown. If I save the entry and reload the browser window, the value is shown correctly. So I guess something is not happening correctly inside the Replicator field if I just commit the new value to the Vuex store. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.

[georgobermayr]

Yes, version 3.3.12.

[johncarter-]

Did you ever get this working @georgobermayr ?

I'm looking to achieve a similar thing, but same issue occurs for me. Manually refreshing the page works as expected.

[georgobermayr]

Nope. I gave up and implemented something else.

[johncarter-]

Thanks for letting me know. I'm still trying to get it to work, I'll report back if I get it sorted.