Button for a specific command: Longform

Help
1

Hello everyone,

I have a question. I’m currently designing the homepage for my vault, and I would like to add a button for a specific command.

It’s about Longform—I want the button to take me directly to my project, just like the command “Longform: Jump to project” does.

Is this even possible?

I already tried creating a solution with the help of an AI, but unfortunately, it didn’t work. My JavaScript knowledge is very basic—I know what const, let, if, and while mean and how to use them, but that’s about it. So, I’m a complete beginner :laughing:.

// Button erstellen
const buttonContainer = this.container.createEl("button", {
    text: "Zu Longform-Projekten wechseln",
    cls: "longform-button",
});

// Stil für den Button
buttonContainer.style.backgroundColor = "#4CAF50"; // Grüne Farbe
buttonContainer.style.color = "white";
buttonContainer.style.padding = "10px 20px";
buttonContainer.style.border = "none";
buttonContainer.style.borderRadius = "5px";
buttonContainer.style.cursor = "pointer";
buttonContainer.style.fontSize = "14px";
buttonContainer.style.margin = "10px 0";

// Hover-Effekt
buttonContainer.addEventListener("mouseover", () => {
    buttonContainer.style.backgroundColor = "#45a049"; // Dunkleres Grün
});
buttonContainer.addEventListener("mouseout", () => {
    buttonContainer.style.backgroundColor = "#4CAF50"; // Zurück zu normalem Grün
});

// Klick-Event hinzufügen
buttonContainer.addEventListener("click", async () => {
    try {
        // Longform-Befehl ausführen
        const longformCommand = "longform:jump-to-project"; // Der spezifische Befehl für Longform
        const commandExists = app.commands.listCommands().some(cmd => cmd.id === longformCommand);

        if (commandExists) {
            // Befehl ausführen
            await app.commands.executeCommandById(longformCommand);
            new Notice("Longform-Projekte erfolgreich geöffnet!");
        } else {
            new Notice("Longform-Befehl wurde nicht gefunden. Stelle sicher, dass das Plugin installiert und aktiviert ist.");
        }
    } catch (error) {
        console.error(error);
        new Notice("Fehler beim Öffnen der Longform-Projekte. Siehe Konsole für Details.");
    }
});
2

Any commands can be chained to clickable buttons/icons using the Commander plugin, which enables the user to assign icons to various areas of the workspace.

Editing Toolbar is slightly less user friendly and has a bug that makes the CPU overloaded (but now 3.0 apparently fixed that problem).

I recommend the above option, possibly with icons added on the Status Bar. No need to make buttons manually.

But!
…if the button MUST be on a homepage, in an md file, then the Meta Bind plugin can be of help.
So, based on the example button from the docs, your one would possibly look like:

```meta-bind-button
style: primary
label: Jump to Project
action:
  type: command
  command: longform:jump-to-project
```
2 Likes
3

Thanks Yurcee, of course, it’s much easier and better for me.

1 Like