Muiltiple Choice Object Dropdown

General Q&A
1

What would be the best object to use for a multiple select object where the values are driven from a query like a object dropdown?

2

For a multiple-choice selection that is driven from a query, you can make use of edit-boolean in an object table. This will allow you to display data based on a query as you would with an object-dropdown, but will allow users to select multiple objects.

There is one important consideration to make when going down this path. Do you want the selection to be defined in the database? Or do you want the selection to only be visible to the current user that is making the selections? Often times, the selection that is made should only be made visible to the user that is making the selections and should not be visible to other users that may have access to the same data. If this is the case, you will want to make use of LocalDB or define a local array of selected items rather than binding your editable boolean directly to the object. Please see below for an example using a local array that allows a user to select items:

XML:

<!-- Variables go here: -->
<var name="items" type="query:item" />

<!-- Components go here: -->
<object-table label="Items" query="items" empty-message="Your items will appear here">
    <column heading="" display="" fit="shrink">
        <edit-boolean value="$:evaluateSelection($object)" on-change="$:toggleSelected($object, newValue, oldValue)" />
    </column>
    <column heading="Name">{name}</column>
</object-table>

JS:

//  Define global array
var local_array = []; 

// This function is called when the app navigates to this view (using a link)
function init() {
    // initialize any data here that should be available when the view is shown
    view.items = DB.item.where('archived != ?', true); 
}

function toggleSelected(obj, newValue, oldValue){
    // If the object is already selected and in the local_array, remove it from the array
    if(local_array.indexOf(obj.id) > -1){
        local_array.splice(local_array.indexOf(obj.id),1); 
    } else { // Otherwise, add the selected object to the local_array
        local_array.push(obj.id); 
    }
}

function evaluateSelection(obj){
    return local_array.indexOf(obj.id) > -1; 
}
1 Like