Custom code to GET values to fill form elements in Multiselect Option - Needed Information

[Sathyan5]

Hii Everyone,

Thanks for the Plugin, it does amazing work, And I am stuck at doing one of them.

I am using your File upload option to send file to Node-red, there I process the file data and return the values in an Array format containing {label,value}. Then get the values in a different panel and need to show in the Multi-select option.

Here I can see the data in console and it seems to me that the format is matching the requirement. And I followed your documentation to make a code to match the resultant values to the elements, But It's not working for me.

I can able to see the value array in my console, attaching the screenshot for your reference.

-- here it is always showing error in "map". I am not a professional coder, so i don't know exactly where or what the issue is. -- Can you provide any suggestions or directions on how to solve the issue and achieve the requirement.

Thanks in advance for your time.

[vitPinchuk]

Hi, @Sathyan5

So, we can't use async. code in Get Options Code. We will update that in descripton. In your code you try use map method for body.ids but ids not exist in body. Body in your case it is array.

One of the options for how we can update options received from the request it is use Initial Request. I created as example Multi-select option.

As example I use https://jsonplaceholder.typicode.com/users to make get req. In the initial request section I selected the code tab. Afterwards I wrote a little logic to make request and update elements.

const url = "https://jsonplaceholder.typicode.com/users";
const element = context.panel.elements.find(element => element.id === "DropDown3")

async function fetchData() {
  try {
    const response = await fetch(url);
    const body = await response.json();
    console.log('console >>>> body', body)
    const optionsNew = body.map(element => ({
      id: element.id,
      title: element.name,
      label: element.name,
      value: element.username
    }))

    const newElement = {
      ...element,
      options: optionsNew
    }
   console.log('console >>>> newElement', newElement)
    const newElements = context.panel.elements.map(element => {
      if (element.id === 'DropDown3') {
        return newElement
      }
      return element
    })
    console.log('console >>>> newElements', newElements)
    context.panel.onChangeElements(newElements)
  } catch (error) {
    console.log('Error:', error);
  }
}

return fetchData();

I left some console.log() for clarity. Using context.panel.onChangeElements we update our elements. But we need to get options.

Go to Get Options Code in our 'DropDown3' element. And we should add some code:

const element = context.panel.elements.find(element => element.id === "DropDown3") 

if (element?.options) {
  return element?.options
}

Here we find our element and return the options we set in the Initial Request code

After saving the changes you can see that the options have appeared:

You can use my example and see how the data is returned and updated, then you can adapt it to your URL and the date you receive

Thanks

[Sathyan5]

@vitPinchuk

Thanks for your quick response. It was very helpful. I can able to do what i need now.