Bind button to a different note in dataviewjs

[Nitero]

Is your Feature Request Related to a Problem?

So I've found this issue which has a solution for how a text field can affect a different note.

This also works in a dataviewjs query to change the metadata of the specific note, for example to change the rating of a movie. However I can't get the same to work with buttons, since they can't really be created inline at the moment? Or is there a way to do this that Im missing? Seems like you can only create the buttons outside of js and then there is no way to change the binding target depending on what element in the dataviewjs query you are on

Describe the Feature you'd Like

I would like to define an inline button in dataviewjs so that I can have something like a "complete" button

dv.table(["Rating","Finish"],
  dv.pages()
    .where(p => p.type === "Movie")
    .sort(p => p.rating)
    .map(p => {

      //this works
      const rating = "`INPUT[number:" + p.file.name + "#rating]`";

      //doesnt work, no way to pass in binding to p.file.name?
      const finish = "`BUTTON[finish-button]`";

      return [rating,finish];
    })
);

Additional Context

I guess using the toggle works alright as a workaround for the button, but the downside is that you cannot properly label it apart from the table heading, so you can't really have multiple toggles in a cell either since you won't know which one does what

[mProjectsCode]

You would need to generate a button block for each inline button. You could mark all those button blocks as hidden and generate them somewhere else in the note.

[Nitero]

Can you give some more info on how you would do that? Not sure if it would work all that well tbh, especially since movie notes will be added/removed from this particular query based on their status so the hidden buttons would need to change frequently

[mProjectsCode]

You would need a second dataview query that generates the same results and use those results to generate the button blocks. I don't really have time to write an example for you.

[Nitero]

oh I didnt think of that, but isnt that suboptimal for performance? and you'd potentially also have to maintain two queries?

[Nitero]

alright it actually works with one query, its just not very pretty... would still be nice if it worked the same as for other input fields

let buttonMarkdownBlocks = [];

const movies = dv.pages()
    .where(p => p.type === "Movie")
    .sort(p => p.rating)
    .map(p => {
        const rating = "`INPUT[number:" + p.file.name + "#rating]`";
        const buttonId = `${p.file.name}-finish`;
        const finish = `\`BUTTON[${buttonId}]\``;
        
        // Generate the button Markdown block
        const buttonMarkdown = `\`\`\`meta-bind-button
label: "Finish ${p.file.name}"
hidden: true
id: "${buttonId}"
style: default
actions:
  - type: updateMetadata
    bindTarget: "${p.file.name}#finished"
    evaluate: true
    value: true
\`\`\``;
        
        buttonMarkdownBlocks.push(buttonMarkdown);
        return [rating,finish];
    });

dv.table(["Rating","Finish"], movies);
dv.paragraph(buttonMarkdownBlocks.join('\n\n'));

[yinleifu]

@Nitero This is exactly what I have been looking for, for days, yes, it's not pretty, but Meta Bind is the only plugin I have found that allows me to change two front properties with one button (resetting both to zero). To get that button into a dataview table was like pulling teeths. Now I can do it, thanks to you. Absolut genius!

[shui-dun]

Can work, but I found that the rendering performance is very low.

[Nitero]

Yea it gets pretty laggy with big queries... now I instead put the buttons inside of the queried note, this way I can just hover it and can click the button in the preview

[mProjectsCode]

This is also more a question, so I will convert this into a discussion.