Initial action of Datasource and custom code

[nimaforoughi]

Hello,
Is there any sample code for initial ‘custom code’ section to read data from Postgres db table(the payload is taken from ‘initial Request Payload) and update the panel elements values accordingly?

Your configuration.sql example would be my preference.

The documentations only have custom code for ‘Query’ as the initial acton and nothing for ‘Datasource’

regards
Nima

[vitPinchuk]

Hi, @nimaforoughi
In documentation we have description for Datasource witth initial custom code
1)https://volkovlabs.io/plugins/volkovlabs-form-panel/data-flow/#data-source
2) https://volkovlabs.io/plugins/volkovlabs-form-panel/data-flow/#initial-request-custom-code
and reference to code snipets here
Let us know if this solves your problem or not.

[nimaforoughi]

thank you Vit,
But the page you are talking about only has a screenshot for my type of question which is not working. That’s why I am looking for a working snip of the code.

I have written the below code to read the response from postgres Datasource and parses the id and values then put it the payload.

my payload finally will be like an object with key and values.
But nothing shows on the panel elements, but they turn red only.
The keys of the payload are exactly matching the elements ids

the elements in the panel are multi select.

Can you please assist to diagnose it.

const payload = {};


elements.forEach((element) => {
  if (!element.value) {
    console.log("no value", element.id)
    payload[element.id] = element.value;
    return;
  }
  console.log('found')
  payload[element.id] = element.value;
})


console.log('payload', payload)
// setInitial(payload)


// Get the first frame from the response
let frame = response.data.results.A.frames[0];
// Iterate over the fields in the response
frame.schema.fields.forEach((field, index) => {
  // If the field name exists in the payload
  if (payload.hasOwnProperty(field.name)) {
    // Assign the corresponding values to the payload
    payload[field.name] = frame.data.values[index];
  }
});


console.log('payload after analysis', payload);


setInitial(payload)
console.log('done')
return;

[vitPinchuk]

Hi, @nimaforoughi
setInitial(payload) sets the initial value but does not change the value in the element.
Therefore, when updating and using setInitial, the values in the elements are not changed, but the initial state is changed.

Exmaple:

and Custom Code
I hardcoded testPayload for an example of what happens (in your code sample the same thing happens)

After that my form elements highlights in red color, which shows that the value of the element is different from the initialial value

when I click on submit button I see my initial values

But I believe your goal is to set values for the elements
I made a new panel. I added three multi select elements. Added options for the sample. And set up an initial query.

Put some code for initial code and use onChangeElements. onChangeElements - set up values on elements.
After adding the code you will see that the values obtained from response will be set.

const contextElements = context.panel.elements

if (context.panel.response) {
  const frame = context.panel.response
    .data.results.A.frames[0]

  // map values from response 
  const framevalues = frame.schema.fields.map((value, index) => ({
    field: value.name,
    value: frame.data.values[index]
  }))

// new Elements with values
  const newElements = contextElements.map(element => {
    const frameElement = framevalues.find(frElem => frElem.field === element.id)
    return ({
      ...element,
      value: frameElement.value[0]
    })

    
  })
  console.log('newElements ', newElements)
  // use onChangeElements
  context.panel.onChangeElements(newElements)
}