Missing in the documentation: How to preset multiple default values on "select" form fields?

[mesr]

How to preset multiple default values on form fields that allow it seems neither clear nor trivial.

For instance, the reference page for the "Form" component (https://sql.datapage.app/component.sql?component=form), under the title "Example 5", shows a "select" field with two preset values ("Orange" and "Banana"), but no indication is provided as to how this can be achieved.

I personally tried setting the "value" parameter of "select" form fields to a JSON array, a JSON object with "value" keys, an SQL array, an SQL set, as well as multiple individual "value" parameters, and none of those formats have given the expected result.

Could the code sample of that example be completed with the inclusion of the "value" parameter? This would be of great help!

Please and thank you!

[lovasoa]

Hello and welcome to SQLPage !
I'm really sorry you had a bad experience with the documentation. Let's try to improve it together.

The "orange and banana" example has its code right above it:

select 
    'form'                        as component,
    'examples/show_variables.sql' as action;
select 
    'Fruits'         as label,
    'fruits[]'       as name,
    'select'         as type,
    TRUE             as multiple,
    TRUE             as create_new,
    'Good fruits...' as placeholder,
    TRUE             as searchable,
    'press ctrl to select multiple values' as description,
    '[{"label": "Orange", "value": 0, "selected": true}, {"label": "Apple", "value": 1}, {"label": "Banana", "value": 3, "selected": true}]' as options;

The options parameter accepts a json array containing json objects with the following properties:

• label (text): what to display to the user
• value (text): what to send to your application when the user selects the associated label
• selected (boolean): whether the option is selected by default when the page is initially loaded.

I think the one you are looking for is selected.

Do you think we should present it like this in the example on the website ? Or in the short documentation for options, which currently says A json array of objects containing the label and value of all possible options of a select field. Used only when type=select. JSON objects in the array can contain the properties "label", "value" and "selected". ?

Or do you think it's the behavior that is unintuitive, and sqlpage should accept setting default selected values through the value parameter instead of options ?

Your feedback is welcome !

[mesr]

Hello!

Thanks for taking the time to reply to this — I now realize — rather stupid question. I would say that the issue turns out to be a mixture of a slight un-intuitiveness (most other fields use a "value" parameter, and this too is how the user-selected values are read from the widget), and — mostly — a combination of my glasses not being strong enough (a true statement) and just plain dumb overlooking from my part.

This is good enough as an answer for me, and I would certainly not label this a documentation issue anymore. However, if you are still looking for my input on how this could possibly be improved, I would suggest that the list of default selected items be settable through both the "options" and the "value" parameters, as each approach is better suited in different situations. I would not tag this as urgent, though :P

Thanks again, and keep up the good work. A most useful piece of software, indeed.

[DSMejantel]

Hi,
Maybe, this example can be useful in your case to have previously values selected on a edit page :

-- formulaire pour insérer tag
SELECT 
    'form' as component,
    'Mettre à jour' as validate,
    'upload_image_tag.sql?id='||$id as action,    
    'orange'           as validate_color;
    
SELECT 'tag[]' as name, 'Tags' as label, 6 as width, 'select' as type, TRUE as multiple, TRUE as dropdown, TRUE as create_new,
     'Les tags connus sont déjà sélectionnés.' as description,
     json_group_array(json_object(
       'label', tag_image, 
       'value', tag_image,
       'selected', tag.image_id=$id
     )) as options  
     FROM tag
     Left Join image on tag.image_id=image.id 
     AND tag.image_id=$id;