Set a localized fields value in a custom component

linobino1

3 weeks ago

9

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 (
    // ...

• 

  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

• 

  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.

• 

  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 :/

• 

  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?

• 

  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

  )

• 

  Tinouti

  3 weeks ago

  Assuming you have drafts enabled, you can pass

  draft: true

  in your query to bypass the validation. 👍

• 

  linobino1

  3 weeks ago

  true! Thanks.

  
  

  
  

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