Meta Bind & JS Engine: Creating multiple buttons and using them inline within a JS Engine table

[I-Pch]

Hi there 😊 !

I am a fairly new user of Meta Bind and JS Engine and I've been exploring the features of both plugins over the past few weeks.

I have a very specific (and probably advanced 😅 ) use case in mind and for the final result of what I'm trying to build with Meta Bind & JS Engine, I wanted to possibly be able to create different notes in different folders by clicking on a Meta Button stored in the rows of a JS Engine generated table 🙈 ...

The big issue with that idea was that the buttons, while doing generally something similar, fundamentally needed to be different/unique (different fileName & folderPath).
Another issue was that, iirc, only inline codes work in md tables so I also needed to use inline buttons which would require, for each button, a different button id I could reference ...

All of this meant that I couldn't really use a manually created Button Templates and instead, as everything depends on the content of each row in the JS Engine table I ultimately want to create, well, I also needed to create the desired buttons "in place" within the JS Engine code block generating the table 😅 ...

Thinking this could potentially help someone (or give some ideas, leads to follow), I thought I'd share how I got it all working 😊 ...

---

Method 1: JS Engine & Meta Bind's API

~~~js-engine
/**
 * 1 — Initial Setup 
 **/
 
// 1.1 — Summoning Meta Bind
const mb = engine.getPlugin('obsidian-meta-bind-plugin').api;

/**
 * 1.2 — Function used to create the needed buttons which will then be called as inline buttons in the table. 
 * The value of each argument passed to the function (lb, t, i, fn, fdp) are determined later on, 
 * in the for loop down below.
 * The whole function has been inspired by one of the examples kindly provided by mProjectsCode (TY!) 
 * [See: Ref. 1 (in the table below)]
 * 
 * Note: Everything could probably be done in the for loop though... I didn't test, but it "felt" easier this way :) 
 **/

function createSomeButtons(lb, t, i, fn, fdp) {
    
    /** 
     * Object storing the configuration of the button
     * [See: Ref. 2]
     **/
	
    const buttonConfigDeclaration = {
        label: lb,
        icon: 'activity',   // Lucide.dev 'activity' icon's name [See: Ref. 3]
        style: 'primary',
        tooltip: t,
        id: i,
        hidden: true,
        actions: [
            /**
             * Action 1:
             * Checks if the folder in which the note will be created exists (using Obsidian's API method 
             * 'getFolderByPath()' [See: Ref. 4]) and creates it, if necessary (using Obsidian's API method
             * 'createFolder()' [See: Ref. 5]).
             * Action meant to avoid ENOENT errors I ran into while testing ^^ ... 
             * (Errors due to fact that the folder(s) didn't exist beforehand)
             **/ 
            {
                type: 'inlineJS',
                code: `!app.vault.getFolderByPath('${fdp}') ? await app.vault.createFolder('${fdp}') : '';`
            },
            // Action 2: Create note in folder (No mystery here ^^)
            {
                type: 'createNote',
                fileName: fn,
                folderPath: fdp,
                openNote: false
            }
        ]
    };
    
    /**
     * Object storing the 'button options' Meta Bind's API 'createButtonMountable()' method requires. 
     * [See: Ref. 6 & 7]
     * For some info about the 'isPreview' key, see: Ref. 8 (Discord message)
     **/
     
    const buttonOptions = {
        declaration: buttonConfigDeclaration,
        position: undefined,
        isPreview: false
    };
    
    // Create a button... [See: Ref. 6]
    const button = mb.createButtonMountable(context.file.path, buttonOptions);
    // Return the button (as a 'MountableMDRC') [See: Ref. 9] 
    return mb.wrapInMDRC(button, container, component)
};

/**
 * 2 — JS Engine Table Setup 
 **/
 
// Creates an array of "table length" (-> 10 rows)
const rows = [...Array(10).keys()];

// Array storing the headers of the resulting table
const headers = [
    "<center><h6>Row Number</h6></center>",
    "<center><h6>Folder Path</h6></center>",
    "<center><h6>File Name</h6></center>",
    "<center><h6>Inline Button</h6></center>"
];

// Empty array to store the created buttons (they won't be rendered anywhere)
// (Populated by the for loop)
let buttons = [];
// Empty array to store the body of the table (i.e.: the values of each row)
// (Also populated by the for loop)
let body = [];

// For each upcoming row of the table...
for (let i = 0; i < rows.length; i++) {
    
    const row = rows[i];
    
    const rowNumber = `${row + 1}`;
    const rowNumbPad = rowNumber.padStart(2, '0');
    const fileName = `Note ${rowNumbPad}`;
    const folderPath = `Meta Bind/${fileName}`;
    const buttonLabel = `Create ${fileName}`;
    const buttonTooltip = `... in ${folderPath}`;
    const buttonId = `MBCreateNote${rowNumbPad}`;
    const inlineButton = "`" + `BUTTON[${buttonId}]` + "`";  
    
    // Create each button passing the needed arguments to the function...
    // + push each resulting button to the 'buttons' array
    buttons.push(
        createSomeButtons(buttonLabel, buttonTooltip, buttonId, fileName, folderPath)
    );
    
    // Push the values of each row to the 'body' array
    // (these values needs to be stored in an array)
    body.push(
        [
            `<center>${rowNumber}</center>`,
            `<center>${folderPath}</center>`, 
            `<center>${fileName}</center>`, 
            `<center>${inlineButton}</center>`
        ]
    );
};
//console.log(buttons)

/**
 * 3 — JS Engine Markdown Builder 
 * (Effectively put the table together)  
 **/
 
//Creates a JS Engine markdown builder [See: Ref. 10]
const mdBuilder = engine.markdown.createBuilder();
// Asking the builder to create the desired table
mdBuilder.createTable(headers, body);
// Final step: Return the builder
return mdBuilder
~~~

References

Ref. N°	Ref. Link
1	Meta Bind's GH repo > exampleVault > Meta Bind API.md
2	Meta Bind's Documentation > Button Properties
3	Lucide.dev > 'Activity' icon
4	Obsidian's Dev Docs > Vault.getFolderByPath()
5	Obsidian's Dev Docs > Vault.createFolder()
6	Meta Bind's Documentation > API > createButtonMountable()
7	Meta Bind's Documentation > API > ButtonOptions
8	Discord message (isPreview)
9	Meta Bind's Documentation > API > wrapInMDRC()
10	JS Engine's Documentation > Examples

Resulting table

JS.Engine.-.MB.-.Table.and.buttons.mov

Some things to note though 😇 :

• As shown in the small screen-recording above, in this state, the names of note the buttons create are not dynamic: I mean, the 1st button will only create a note titled Note 01 in the folder Meta Bind/Note 01 on a very first click... and on a 2nd click, it'll create a note titled Note 01 1 still in the folder Meta Bind/Note 01 (following the same principle mentioned here )
• There's another way to get to the same result through a meta-bind-button code block (I've got it working too, but I need to refactor what I wrote and didn't have the chance to get to it (yet) 😇) (See below 😊 )

---

Method 2: Using JS Engine to generate meta-bind-button code blocks

The buttons here don't create new notes (I wanted to try something a bit different 😊 ) but they send a small notice...
The principle is the same though: Creating different/unique buttons and use them inline, in a JS Engine generated table.

~~~js-engine
/**
 * 1 — Initial Setup 
 **/
 
// Creates an array of "table length" (-> 3 rows)
const rows = [...Array(3).keys()];
// Maps the rows to create the labels of the buttons
const buttonLabels = rows.map(r => `'Message ${r + 1}'`);
// Array storing the icon of each button
const buttonIcons = ['bell', 'sun', 'sparkles'];
// Maps the rows to create an id for each button
const buttonIds = rows.map(r => `MBgreetingsNotice${r + 1}`);
// Array storing the content of each notice each button will send on click
const buttonNotices = [
    'Hello World!',
    'Have an amazingly wonderful day!',
    'I wish you a fanstatic time on this beautiful evening!'
];

//Creates a JS Engine markdown builder
const mdBuilder = engine.markdown.createBuilder();

/**
 * 2 — For loop: 
 * To create 'meta-bind-button' code blocks (which will then create the needed hidden buttons so they can be 
 * referenced as inline buttons in the table) & the rows of the table.
 **/

// Empty array to store the 'meta-bind-button' codeblocks
// (Populated by the for loop)
let buttons = [];
// Empty array to store the body of the table (i.e.: the values of each row)
// (Also populated by the for loop)
let body = [];

for (let i = 0; i < rows.length; i++) {
    
    const rowNumber = `<center>${rows[i] + 1}</center>`;
    const buttonLabel = buttonLabels[i];
    const buttonIcon = buttonIcons[i];
    const buttonId = buttonIds[i];
    const buttonNotice = buttonNotices[i];
    const inlineButton = "<center>`" + `BUTTON[${buttonId}]` + "`</center>";
    // Language of the codeblock to mdBuilder needs to create
    const lang = "meta-bind-button";
    /* Content of the code block
     * You may wonder (:D):
     * "Why using an array to store each line of the code block instead of a single template literal/string ?"
     * Answer: For easier whitespace control and re-reading purposes :)
     **/
    const content = [
        "style: default",
        `label: ${buttonLabel}`,
        `icon: ${buttonIcon}`,
        `id: ${buttonId}`,
        // Important: Otherwise the buttons will be rendered above the table
        "hidden: true",
        "actions:",
        " - type: inlineJS",
        `   code: 'new Notice("${buttonNotice}", 5000);'`
    ].join("\n");
    
    // Create a 'meta-bind-button' code block
    const mbCodeBlock = mdBuilder.createCodeBlock(lang, content);
    //Push the code block to the 'buttons' array
    buttons.push(mbCodeBlock);
    // Push the values of each row to the 'body' array
    // (these values needs to be stored in an array)
    body.push([rowNumber, inlineButton]);
};

/**
 * 3 — Last steps...  
 **/

// Array storing the headers of the resulting table
const headers = [
    "<center><h6>Row Number</h6></center>",
    "<center><h6>Inline Buttons</h6></center>"
];

// Asking the builder to create the desired table
mdBuilder.createTable(headers, body);
// Final step: Return the builder
return mdBuilder
~~~

Resulting table

JS.Engine.-.MB.CB.-.Table.and.buttons.mov

---

Another thing to note 😄 :

I am no JavaScript/Meta Bind/JS Engine expert 🙈 (but getting slowly better I think 😄 )... and while everything seem to work as expected from my side of the screen, if you spot any errors I could have made, please let me know, so I can:

1. Learn a thing or two 😄
2. Update the code 😊

---

Well, that's finally it 😄 !
Sorry for the length 🙈 ... and thank you for reading 🙌 !

Thank you so so very much to mProjectsCode for building such wonderful plugins 🙌 and also, for their patience, kindness and help as I'm learning how to use them !!!