Set a localized fields value in a custom component

default discord avatar
linobino1
3 weeks ago
9

I am building a custom component that fetches some data from an API in different languages. I want to feed another field in the same collection with this data. This field is

localized: true

.



Using

useAllFormFields()

works great for setting another fields value but I don't see a way of setting the value in different locales.



Is there another way or am I missing something?



export const MyField: React.FC<Props> = () => {
  const [fields, dispatch] = useAllFormFields();
  
  // fetch localized data from an API ...
  
  // set another field
  dispatch({ type: 'UPDATE', path: 'title', value: data.titleEN });

  // it would be great if I could do something like:
  dispatch({ type: 'UPDATE', path: 'title', value: {
    en: data.titleEN,
    de: data.titleDE,
  });
  
  return (
    // ...
  • default discord avatar
    arielarial
    3 weeks ago

    Hi @linobino1 , as far as I know, I don't think that's possible. If this is blocking you, a workaround I would try is to use a field hook. You would have to check if the value for the field changed in the last edit and make the API call inside the hook again to get the data, but I think that would work

  • default discord avatar
    linobino1
    3 weeks ago

    Hi @arielarial, thanks. The field hook fires when you submit the form, right?


    I want my custom component to have an input field where you enter a link to an API resource and a "generate" button that loads the resource from the API and fills the data into the forms fields.

  • default discord avatar
    arielarial
    3 weeks ago

    oh, ok! So, if you have a button for that you could do both, I guess. On button press you could:


    - Load API data


    - Use

    useAllFormFields

    to update the data for the field in current language


    - Use Rest API to update the data for the field in other language, not currently selected



    The problem here is that it could led to inconsistency if the user press the button, but then leave the document without saving. There would be a change in the "other" language, but not the current one.


    You could "fix" that by using REST to make the change on both languages, but then it could be misleading to the user. (if they chose to leave without saving, it would be already saved). Maybe there's a way to trigger a document save?



    Anyway, I don't think you will get exactly what you want because of how payload UI works with localization. There's no screen in which both fields are present so that you could update them simultaneously :/

  • default discord avatar
    linobino1
    3 weeks ago

    I thought about using the REST API too, but I don't like that the user doesn't see what's going on. The user will most likely want to manually change some values that were loaded from the external API, so that's important too.



    I think I will now try to create an element on the dashboard that consists of an input for the link to an API resource and a "create" button. It will then create a draft in my collection and redirect to its admin page.



    One other issue I already stumbled upon is, that I cannot skip the server side validation in

    payload.create()

    .


    Some of the collections

    required: true

    fields need to be filled in manually, so it would be nice if I could create a doc without those fields using the Local API.


    This is possible using the UI, so why not with Local API?

  • default discord avatar
    arielarial
    3 weeks ago

    That's nice. Maybe with some digging you could use the modal/drawer component from Payload, that is used for nested editing (

    https://payloadcms.com/blog/launch-week-day-3

    )

  • default discord avatar
    Tinouti
    3 weeks ago

    Assuming you have drafts enabled, you can pass

    draft: true

    in your query to bypass the validation. đź‘Ť

  • default discord avatar
    linobino1
    3 weeks ago

    true! Thanks.



    That would be pretty smooth but I think the budget doesn't allow me to dig so deeply;)

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.