Sending data to javascript functions

[sbecks]

I’m working on a new project and looking to use some different JS libraries for multi select etc. I want to be able to initialise multiple pickers from a single call.

Slim Select

I have it working really well using static events:

onupdated="newSlim(selects=[{id:'#selectCommunities', placeholder:'Link Communities:', data:'content.listCommunities.data.listCommunities', selected:'content.data_detailSite.data.queryCommunities.values(`id`)'},{id:'#selectResources', placeholder:'Link Resources:',data:'[]', selected:'[]'}])"

Running this function:

function newSlim(selects) {
        // console.log(selects);
        const idArray = (selects);
        idArray.forEach((select) => {
            let el = document.querySelector(select.id);
            // console.log(dmx.parse(select.data));
            new SlimSelect({
                select: select.id,
                closeOnSelect: false,
                placeholder: select.placeholder,
                data: dmx.parse(select.data),
            })
            // console.log(dmx.parse(select.selected));
            el.slim.set(dmx.parse(select.selected))
        })
    }

I would rather be app using Flows for this, not least to control timing and to be easier to manage. I can get it working via Flows for a single multiselect by setting params for each variable, but I can’t work out how to pass to flow params as an object to initialise more than one multiselect in one go. I’ve tried lots of ways of structuring the params (object with variables, arrays etc), and different syntax in dmx event but haven’t managed it yet…

I guess my question is can I, and if so how do I, pass info structured like this to a flow, for use in a JS function?

onupdated="newSlim(selects=[{id:'#selectCommunities', placeholder:'Link Communities:', data:'content.listCommunities.data.listCommunities', selected:'content.data_detailSite.data.queryCommunities.values(`id`)'},{id:'#selectResources', placeholder:'Link Resources:',data:'[]', selected:'[]'}])"

[mebeingken]

If I understand the situation properly, you can send an object as a parameter to the flow, and then that parameter can be passed the a javascript function.

Basic example:

When clicked, this button:

<button id="btn1" class="btn" dmx-on:click="flow1.run({myObject: serverconnect1.data.users})">Button</button>

passes an array of users from a server connect to this flow:

which passes the parameter to this function:

<script>
    function myTest(object) {
        console.log(object);
    }
</script>

Which is then displayed in the console:

[sbecks]

Thanks Ken…so the object is manually created with the aim of introducing some dynamic elements in once I’ve go this bit working.

I vaguely recalled the need to replace ’ with ` which has helped…this:

dmx-on:click="flowMultiSelect.run({object: [{id:`#selectCommunities`, placeholder:`Link Communities:`, data:`content.listCommunities.data.listCommunities`, selected:`[]`},{id:`#selectResources`, placeholder:`Link Resources:`,data: `content.listCommunities.data.listCommunities`, selected:`[]`}]})"

now passes the data to javascript and I can log it, but it’s then wrapped in curly braces which prevents the function from working. So next question! How to remove the {{ }} from the data as it’s parsed, or ideally not have them sent in the first place?

[mebeingken]

Maybe it would be easier to create a data store element, setup the object structure, and then add an item to the store where you can set all the various elements. Then just point to the data store to get the entire object.