[ContentBox 5.3.0]MultiOptions & MultiOptionsUDF broken when selecting multiple options as widget arguments

Communities ContentBox CMS
1

Hi,
recently I tried some contentbox widget development.
For one of my widgets i need the “MultiOptionsUDF” functionality, as the user has to select multiple values.
I noticed two different things here:

1. Missing feature dokumentation
As the internal functions use the HTMLhelper to genereate the multiSelect it is theoreticaly possible to genereate a select with seperated value and name contents. For this to work an array containing structs with a value and name key-value pair hase to be provided by the udf.
This behaviour is unfortunatly not dokumented in the widget documentation (See here)

[{value:"val1",name:"Option 1"},{value:"val2",name:"Awesome Option 2"}]

As this alowes me to use ids or slugs as valus and use titles and names for the user to read it could be benefitially to document this.

2. Broken MultiSelect
When using a MultiSelect and selecting multiple options only the last option is provided to the renderIT function.
I traced this back to the getFormValues function in the instanceHelper.cfm

function getFormValues() {
    var form = $( '##widget-arguments' ).find( 'form' ).serializeArray(),
        vals = {};
    // loop over form fields, and add form field values to struct
    $.each( form, function(){
        vals[ this.name ] = this.value;
    } );
    return vals;
}

This will in the case off multiselects overwrite the previous selected options with the last one.

2

I just opend [CONTENTBOX-1460] - Welcome for the second issue mentioned here.

3

As there is no solution to this problem yet I implemented a temprorary workaround.
The only drawback is, that the argument will be a string if only one option is selected, and an array if multiple options are selected. This is because inside the function getFormValues there was no quick way of detecting if an argument is from a multiSelect.

function getFormValues() {
    var form = $( '##widget-arguments' ).find( 'form' ).serializeArray(),
        vals = {};
    // loop over form fields, and add form field values to struct
    $.each( form, function( ){
        if( vals.hasOwnProperty( this.name ) ) {
            if( !Array.isArray( vals[ this.name ] ) ) {
                let previousValue = vals[ this.name ];
                vals[ this.name ] = [ previousValue ];
            }
            vals[ this.name ].push( this.value );
        } else {
            vals[ this.name ] = this.value;
        }
    } );
    return vals;
}