Create button using javascript meta-bind

What I’m trying to do

I’ve been using the buttons plugin until i realized its an abandoned project. With that i could create buttons using the createButton function in javascript. How could i achieve the same effect with meta-bind.

Things I have tried

This code works, but uses the old buttons plugin.

const Buttons = app.plugins.plugins["buttons"]
const el = this.container
function createButton(name, content = name){
    return Buttons.createButton({
      app,
      el: el,
      args: {
        name: name,
        class: "button-cell"
      },
      clickOverride: {
        params: [],
        click: (x) => navigator.clipboard.writeText(content)
      }
    })
  }

I didn’t find any info about how to create buttons programmatically in the plugin docs.

I assume you need to access the plugin with const metaBind = app.plugins.plugins["obsidian-meta-bind-plugin"]; and then try to access the metaBind.api.createButtonFromString() API method to create a button. For that maybe it will be better to ask the plugin developer.

I do have two tricks that can help you, assuming you want to add a button to a table as you asked here.

Button without meta-bind

Based on this solution.

Code:

```dataviewjs
const button = dv.el('button', 'Click me');

button.onclick = () => {
	//Whatever code you want to execute
    console.log('Button clicked!');
};

dv.table(
	["Column 1","Buttons"], 
	[["Bar",button]]
);

```

Output:
column

Using meta-bind inline buttons

Code:

First we add the dataview table to invoke the inline button:

```dataviewjs

const button = "`BUTTON[help-button]`";

dv.table(
	["Column 1","Buttons"], 
	[["Bar",button]]
);

```

And then we define the button with whatever actions and settings we need, adding the YAML hidden property to hide it in Reading View

```meta-bind-button

style: primary
label: Meta Bind Help
id: help-button
hidden: true
action:
  type: command
  command: obsidian-meta-bind-plugin:open-faq

```

Output:
metabind-button

Here’s the example so you can copy it to your vault:
Button.md (506 Bytes)

3 Likes

Hi, thank you for the help. I’ve decided to go with the inline button, because that fits my use-case perfectly.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.