Summary

The article details a method for integrating a web form within Obsidian to update note frontmatter and trigger various Obsidian actions.

Abstract

The article discusses a novel approach to enhancing Obsidian's functionality by embedding a web form directly into a note. This form can update the frontmatter of the note and initiate other actions within Obsidian. The author provides a demonstration of this feature in action and explains the technical setup involving a form with hidden and visible fields that, when submitted, generates a special URI to communicate with Obsidian. This method leverages the Obsidian Advanced URI plugin to execute templates, which in turn perform operations on frontmatter properties. The article emphasizes the flexibility of this approach, allowing users to create custom UIs for more intuitive interactions and to extend Obsidian's capabilities beyond the limitations of available plugins. It also touches on the broader concept of integrating system commands and web APIs to enhance Obsidian, aligning with the Unix Philosophy of writing modular and interoperable programs.

Opinions

The author believes that creating a custom UI for Obsidian through a web form provides a superior user experience compared to using a series of prompts.
The use of web forms is seen as a way to put more power into the user's hands, enabling them to craft solutions tailored to their specific needs.
The author suggests that this method of extending Obsidian's functionality adheres to the principles of the Unix Philosophy, advocating for programs that do one thing well and work together seamlessly.
There is an implication that reliance on a core set of plugins, rather than a multitude of specialized ones, is preferable for maintaining a flexible and extensible Obsidian setup.
The article promotes the idea that users can enhance their Obsidian experience without waiting for official updates by using the techniques discussed.
The author values the reusability of logic across different text editing applications, highlighting the benefits of externalizing functionality.
A sample vault is offered for purchase, indicating the author's view that the provided information and tools are valuable enough to warrant a monetary exchange.
The author expresses gratitude for the support received from those who have purchased their work, suggesting a commitment to continuous improvement and updates.

Obsidian: Use a Web Form Inside Obsidian to Update Frontmatter and Trigger Other Actions

This article shares how to create a web form inside of a note that can update frontmatter and trigger other Obsidian-related actions. Here’s a demo…

Demo Updating Frontmatter using a web form

To show that this is part of the note, below is an animated GIF toggling between ‘reading view’ and ‘source code’ mode.

How Does It Work?

A web form is added to the page. For example, below is the web form for ‘setting a property value’…

<form action="obsidian://advanced-uri" method="get">
 <input name="commandid" type="hidden" value="templater-obsidian:System/Templates/Runner.md"/>
 <input name="template" type="hidden" value="PropertyActions"/>
 <input name="targetNoteName" type="hidden" value="Property%20File"/>
 <input name="actionName" type="hidden" value="setProperty"/>
 <label for="propertyName">Property name:</label>
 <input name="propertyName" id="propertyName" type="text" value=""/><br/>
 <label for="propertyValue">Property value:</label>
 <input name="propertyValue" id="propertyValue" type="text" value=""/><br/>
 <button type="submit">Set Property Value</button>
</form>

The HTML above adds some visible UI elements to the page, i.e. a textbox for ‘Property Name’ and ‘Property Value’. Other fields are hidden and describe which…:

vault to interact with (vault)
note to edit (targetNote)
Obsidian action to execute (commandid)
template to run (template)
property-action to perform (actionName)

Together these values form an application URI that Obsidian will respond to. This process is described in detail in the previous article.

Just briefly,… this is what the generated URI looks like…

obsidian://advanced-uri
  ?vault=Descriptive%20Updates
  &commandid=templater-obsidian:System/Templates/Runner.md
  &template=PropertyActions
  &targetNoteName=Property%20Note
  &actionName=setProperty
  &propertyName=color
  &propertyValue=blue
  &filepath=Property%20Note

And this is the message flow…

Obsidian will ask the plugin ‘Obsidian Advanced URI’ (OA-URI) to execute a template, which will execute a ‘runner’ template, which itself will execute the target template (template=PropertyActions). The ‘runner template’ saves us from having to configure each template that we want to make accessible. The target template exposes general purpose operations that act on frontmatter properties (e.g. set, delete, add, remove).

Other Actions

This approach could be modified to trigger other Obsidian actions through your own web form. These actions can be simply, that is, those exposed by Obsidian and OA-URI plugin. (Skim-read what capabilities OA-URI has to offer!) Or they can be complex, that is, your own JavaScript which is run within a Templater template (perhaps leveraging Dataview too).

The alternative to this would be to ask the user for values through a series of prompts. Being able to create your own UI allows for more custom elements, e.g. descriptions, images, reference material, etc. All of which help in deciding what to enter. It’s possible that the UI could have dependent fields or draw values from sources outside of Obsidian.

Being able to create your own UI puts the power back in your hands. You are able to craft a solution that solves your problems.

Recap on Triggers

We now have 3 ways to trigger custom actions in Obsidian:

NEW: a custom UI
running a Template
an external application invoking a URI

Final thoughts

In other articles I’ve shared how to invoke system commands and web APIs. All of this combined greatly enhances your ability to extend Obsidian … without being overly reliant on plugins (…just a few core ones).

You are able to add those missing features today without waiting for the next official update. And if you externalize the logic it can be re-used across your other text editing applications (e.g. Neovim, or your favorite editor with CLI capabilities).

In the ideal world, all of the functionality would be inverted and externalized, and re-useable across applications — in keeping with the Unix Philosophy…

Write programs that do one thing and do it well. Write programs to work together. Write programs to handle text streams, because that is a universal interface.

Sample Vault

If you want to download a ready-to-go sample vault, it can be purchased here for $1 or a donation of your choosing…

Download the Sample Vault for $1+

Note: If you previously purchased the ‘Obsidian: A Descriptive Approach’ then you have access to these changes and will keep receiving future updates.

Thank you for supporting my work!

Check out my other Obsidian Articles too.