Interacting with other fields when creating new content

[nicolashmln]

System Information

• Strapi Version: 3.4.1
• Operating System: macOS
• Database: MySQL
• Node Version: 14
• NPM Version: 6.14

---

Hi people!

I have an Article content type with an image field and some tags via a relation. I’ve created a custom field for my need. Here is what I would like to do when I create a new article:

• I upload a new image
• My custom field detect there is a new image and do some processing
• The result of the processing fill the tags

Do you know if there is a way know the data of other fields? Can we fill them programmatically?
At the moment, in the custom field props I only have access to its attributes and data.

I could do vanilla javascript but I’m looking for the strapi way of doing it.

Thank you

[albatrocity]

It depends on how you created the custom field. If you added the custom field by adding/overriding files in the ./extensions/content-manager/admin/src directory, then you can use the useDataManager hook from strapi-plugin-content-manager/admin/src/hooks/useDataManager.

const { modifiedData } = useDataManager();
console.log(modifiedData.id);
console.log(modifiedData.other_field_name);

modifiedData is essentially the current state of the form. I’ve been using this method to access other fields from a specific field’s input component. However, I’m now trying to implement my custom field as a local plugin using the Field API. Using the above method has required me to keep overridden files up to date with new releases, when essentially all I was doing was importing a custom component and putting some case statement around which input component to use. Very labor-intensive and prone to error.

I have not been able to figure out a way to access other fields or the EditViewDataManager context. I need to do something similar to your case where my input component is dependent on data from another field.

Are you using one of these approaches for your custom field, and have you had any luck?

[nicolashmln]

Thank you for your answer. No luck for me yet.

I use a new custom field (so not an overridden field), I tried your method with the useDataManager and as you said it doesn’t work. It seems it creates a completely new Context rather than retrieving the existing one. My React skills are limited to be able to understand everything.

I’ll try to dig a bit deeper and let you know

[albatrocity]

Yeah that’s what I ran into as well. I’m assuming the EditView provider isn’t wrapping custom Field components, which is pretty disappointing. I’ll keep poking around and maybe we can submit a feature request or a PR at some point.

[karvas]

@nicolashmln @albatrocity Hello guys. I also struggle with exactly the same. Did any of you find a solution?

Thank you

[albatrocity]

@karvas not yet. Perhaps we should propose this to the team, or start a PR?

[aminta]

There’s a hook for that:

import { useContentManagerEditViewDataManager } from 'strapi-helper-plugin';

const { modifiedData } = useContentManagerEditViewDataManager()

    useEffect(() => {
        console.log(modifiedData.changedFieldValue)

    }, [modifiedData])

[albatrocity]

Perfect! I haven’t tried this out yet but it looks like what I need. Thank you!

[ruupi]

For Strapi V4 strapi-helper-plugin is deprecated (strapi-helper-plugin - npm). It is possible to use useCMEditViewDataManager hook now like this:

import { useCMEditViewDataManager  } from '@strapi/helper-plugin';

const { modifiedData } = useCMEditViewDataManager ()

    useEffect(() => {

        console.log(modifiedData)

    }, [modifiedData])

Reference: strapi/useCMEditViewDataManager.stories.mdx at main · strapi/strapi · GitHub

[winston0410]

I notice that modifiedData does not load all data. For example relations of a nested component will not be populated, until user toggle open that section. How can we populate field in admin console programmatically?

[Daxur]

Hi!

I was looking for the same thing and found out that this solution works - at least for simple fields. This is just a PoC code.

It is a very late answer but - maybe it will help someone

const { 
    modifiedData 
  } = useCMEditViewDataManager()

  useEffect(() => { 
    console.log(modifiedData)
    
    // HACK: since Strapi does not expose a way to do this nicely, we need to resort to this stuff :/
    if (modifiedData.stock === 111) {
      let el = document.getElementById("unit")
      if (el) {
        var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set
        nativeInputValueSetter.call(el, 'test')
        var inputEvent = new Event('input', { bubbles: true})
        el.dispatchEvent(inputEvent)
      }
    }
}, [modifiedData])

[kulak91]

This useCMEditViewDataManager() hook also exposes onChange function. Why not to use it to set the value instead of hacks?

[Daxur]

@kulak91

useCMEditViewDataManager

Very good point. I simply did not know about this and documentation on this is lacking. I did see it but I really though that it is for another purpose.

And now I found this:

Update modifiedData by injected components logic

System Information

**Strapi Versio **: 4 Operating System: Database: Node Version: NPM Version: Yarn Version:

Hi. I injected a custom component into the content-manager plugin as described in the documentation. There we can use usecmeditviewdatamanager() to get acces to the data with the modifiedData object. But i want to modify that data object with my component’s logic and want to listen to the save action, to do further actions. How can i do that? Thanks.

Good to know this - thank you!