Populate Select component with CMS data

[mf_de-preval]

I have a model in the Plasmic CMS :

I want to populate a ‘Select’ component with the ‘designation’ field of this model

I made a query and mapped it, which produces the correct results to populate the Select Options :

However, the component does not seem happy with this, and I get an error :

Any idea ?

(I have also tried with the ‘Dropdown’ component, which does not complain but does not display anything …)

[jason]

When you edit the dynamic value, there’s some documentation at the bottom that show the expected values. In your case, you’re returning an array of strings, but you need to return an array of objects with value and label fields.

[mf_de-preval]

Hi Jason,

For some reason, I did not have the ‘hints’ on the bottom of the data picker …

However, I managed to get it working :

$queries.getLocations.data.response.rows.map(row => ({ value: row.id, label: row.data.designation }))

Now, for a more intricate problem :
This Select is part of a form.
Whenever I submit the form, all fields have a Field Key so that I can use an integration.

But It does not seem possible to assign a field key to a ‘Select’ component within my form …
Any smart way of doing this ?

[jason]

Can you show some more details about this, maybe including a project link? I am able to see the value of a Select element within my form.

[alyssa_feola]

When I’ve run into troubles populating the select component, it was because I wasn’t doing it in the right spot.

Make sure you’re doing it in the options part of the props section with the dynamic function as mentioned.

[mf_de-preval]

Hi Jason,

Here is py project ID : 6qmGREkZ3Bnxab58SGq1Fh

You may spot a couple of things :
On the right part, in light blue, I have the form. Submit Button is not used.
The working Button is the one below (‘Raw avec Form Values’)

As mentionned, the form fields have a key value, but not the ‘Select’ component

Last : the form has 3 values (3 fields ‘nom’, ‘tel’, ‘date’).
However, the datapicker does only show 2 of them … But correctly posts 3 values when used in an integration (see aforementionned button).

Thanks for your insights …

[jason]

@mf_de-preval

As mentionned, the form fields have a key value, but not the ‘Select’ component

The key is defined by a “Form Field” component. Please create a new “Form Field” element and move the “Select” into its “children” slot (similar to your other fields like nom, tel, date).

@mf_de-preval

However, the datapicker does only show 2 of them … But correctly posts 3 values when used in an integration (see aforementionned button).

Blank inputs may not show a value in the form value. If you are in interactive mode and set a date, you’ll be able to see the date.