Linklist component event handlers

Have built a linklist driven from results of a query.
I can use the click event handler to control another component AND access the clicked item using {{item}}
ll1

If I want to trigger another query and pass the clicked item into that query then there's no access to the data. Trigger doesn't let me pass additionalScope and the query has no i or item when triggered.
If I runScript from the click handler, it too has no knowledge of the item :
ll2

The autocomplete in the script tag seems to think it should be available, though:

ll3

So how should I trigger my query and pass in the clicked item from the Linklist component?
(I've tried a temp storage option but the timing of the write/read is problematic)

Hey @dcartlidg! Great question :thinking:

I haven't been able to get this to work with the link list component, but there are a few other component that should work! For example, the listbox:

The listbox has a few different selected properties and you can pass them into your query using additionalScope!

See attached app JSON if you want to poke around with my setup! You can import this JSON file by clicking Create new (home page) > From JSON!


listbox-20to-20trigger-20query.json

2 Likes

Great tip, thanks for the idea. Unfortunately it won't resolve my specific use case. I'm wiring up a list of action buttons alongside a reorderable list (as the reorderable list has no way to add events/actions/buttons) and a list view of links has a lot of styling that is hard to remove but a linklist seemed to be the correct choice - it's a list of clickable links after all!
Screenshot of what I've built so far might explain better:
Left column is a linkview - works great unless I want to trigger a query and know what was clicked
Right column is a reorderable list - works great except there's no click handlers
Middle column is a listview - works great except it's virtually impossible to align it to the element on the right and CSS hacks seem fragile and "wrong" to me :smiley:


Feels like I may have to go down some custom component route - have seen some examples in the forums of this - but if I'm doing that why aren't I just writing a React app?! haha :sweat_smile:

@dcartlidge hello! I've been playing around with some options to see what we can do for you here, and it looks like {{ item }} might actually be working in an event handler.

So in my example, I'm passing in {{ item }} as a query param when I open an app from the link list.

And it works!

The {{ item }} does show undefined since it only becomes defined on link/item click.

Is this helpful knowledge for you at all? :sweat_smile: If not, happy to go back to the drawing board!

1 Like

Thanks for looking into this - I've got {{item}} at the event handler level, ie on the component event handler itself, but I can't pass this item or it's id to a query as additionalScope or as i or item or any sort of selectedRow and it doesn't seem to be accessible in a runScript handler (item is not defined)

How can I tell a query what was clicked when the click event happens? :thinking:
Right now I've gone down the route of setting a temporary state, awaiting the promise to return, then firing my query and use the temporary state data. Clunky :frowning:

@dcartlidge Clunky indeed. And I was afraid that might have been the only way...until...I just tested this and it seems to work! Would something like this work for you? :slight_smile:

A "Run script" event handler that runs:

query2.trigger({additionalScope:{
  id_from_scope: {{item}}
}})

{{item}} looks undefined in the event handler and {{id_from_scope}} looks undefined in the query, but that's just how things look unfortunately, since both variables get populated at run time.

Hmmm, this is what I'd had originally and, yes, that would be ideal!
I had tried a run script handler, but neither using item or {{item}} seemed to work. I've tried it again, I think I copied your syntax exactly but must be missing something because I still get an error in the event handler when it fires:

So it doesn't even reach my query (it's a JS query that runs, if that makes any difference to your test case). Can you see something I'm missing? :thinking:
Again, really appreciate your time on this.

Ah, I think that might be happening because of the way your reorderable list is set up. What is your "Data source"? My "Data source" is set to an array of ids, so when I pass an item from the data source into my query, I'm passing in an id (e.g. 2), so my query is able to run successfully when I say select * from users where id = {{id_from_scope}}.

If your data source items don't fit directly into your query (it seems like the error is telling you that the item you're passing in as an Object of some sort), then we'll need to do some parsing in either the event handler or the query. For example, {{ item.id }} if you're passing in an object that containers the id.

Does this sound like it could be the issue? :slight_smile:

1 Like

ahhhh yes, silly me! That's resolved it - you can't pass an object as additionalScope, lesson learned :slight_smile: thank you again

:tada::tada::tada:

So glad to hear it!

I think you can pass it in as an object general, but it probably requires formatting at some point

Anyway, :tada:!