[New plugin] Modal form - integrate forms into QuickAdd, templater, etc

[danielo515]

Obsidian Modal Form Plugin

Hello Obsidian Community!

I’m excited to introduce the Obsidian Modal Form Plugin. This plugin allows you to define forms that can be opened from anywhere you can run JavaScript. This means you can integrate it with other plugins like Templater or QuickAdd, creating powerful workflows for capturing structured data.

GitHub - danielo515/obsidian-modal-form: Define forms for filling data that...

docs site: Obsidian Modal Form docs

Features

• Forms in a Modal Window: Forms open in a modal window and return the values. You can trigger them from Templater templates, QuickAdd captures, DataviewJS queries, and many other places.
• Form Definition: Define forms using a simple JSON format. Create and manage a collection of forms each identified by a unique name or use inline forms.
• User Interface: A user interface for creating new forms.
• Input Types: The plugin supports a variety of input types including number, date, time, slider, toggle (true/false), free text, text with autocompletion for note names (from a folder or root), and select from a list of fixed values or notes from a folder.

Usage

You can access the plugin’s API from any JavaScript code that has access to the global app object. Here’s an example in a templater template:

<%*
const modalForm = app.plugins.plugins.obsidianModalForm.api;
const result = await modalForm.openForm('example-form');
tR += result.asFrontmatterString()
-%>

Which opens something like this

The openForm method allows you to open a form by name and get back the data. The data can be formatted as a string matching a provided template, as a block of Dataview properties, or as YAML frontmatter.

You can even integrate it into QuickAdd captures, like you can see in this example screenshot:

For more details on how to define a form, please refer to the plugin’s README.

Why this plugin?

Obsidian is a great tool for taking notes, but it also nice for managing data. However, when it’s time to capture structured data, it doesn’t offer many conveniences. This plugin is designed to complement existing plugins and workflows, offering basic building blocks for capturing structured data using forms.

Looking forward to your feedback and suggestions!

2024-05-13
Here is an screenshot of my workflow in case anyone is interested. In one side the template I’m working on, and in the other side, the list of forms with their fields for my reference. That is one of the reasons why I like having the form settings be part of the main UI and not be hidden deep in the settings of obsidian.

[danielo515]

I’m super excited to anounce what I think it is a major millestone for the plugin: dataview integration. This comes with the 1.8.0 release.

This lets you define an input that takes a dataview JS query, and when the input is rendered in the modal form for capturing data, you will get autocompletion for whatever values the dataview query is returning. I think an image it’s worth thousand words, so here are two

And this is how it looks in the form

[KillyMXI]

Great work!

Few suggestions after first minutes of experience:

• link to documentation from the plugin settings page (before the plugin is in the official community plugins list - there is no way I know to get to documentation from within the app);

• Date and Time inputs have wrong format. I suppose this is Obsidian issue (there is open FR thread about that);

• invalid field configuration should probably not prevent the rest of the form from showing. Currently this happens in the example form with multiselects when source folder doesn’t exist (which you can expect to happen often, since you can’t make assumptions about my vault). Ideally, this should show a warning near the field in the form but shouldn’t prevent from submitting the rest of the form.

And another suggestion, not sure if it is already possible:

Passing initial values into modalForm.openForm('example-form') from elsewhere. Imagine I have a script (in QuickAdd or elsewhere) that can query partial results and I want to review and edit them in a form before submitting, or I want to be able to reopen data from existing page in a modal form.
(There are other plugins to make interactive UIs for existing pages but none that would allow to edit new and existing data in the same way.)

[danielo515]

Hey, thanks for the great feedback!

@KillyMXI

• link to documentation from the plugin settings page (before the plugin is in the official community plugins list - there is no way I know to get to documentation from within the app);

Fair point. This is because it is not yet in the community plugins list, so you have no way to see the docs right?

@KillyMXI

Date and Time inputs have wrong format. I suppose this is Obsidian issue (there is open FR thread about that);

Will look into that, thanks

@KillyMXI

Currently this happens in the example form with multiselects when source folder doesn’t exist (which you can expect to happen often, since you can’t make assumptions about my vault).

That is also a fair point. I was not expecting this to happen often, since the way you select the folder offers auto-complete, but I also update folders often, and I don’t like having to fix all the plugins that depend on them, so good point.

@KillyMXI

Passing initial values into modalForm.openForm('example-form') from elsewhere. Imagine I have a script (in QuickAdd or elsewhere) that can query partial results and I want to review and edit them in a form before submitting, or I want to be able to reopen data from existing page in a modal form.

Yes, this is planned. I have to admit that I have not much use for it, but It shouldn’t take much effort. I was even thinking about offering a command to edit current note’s metadata with a form, but I’m not sure about that yet.

[KillyMXI]

@danielo515

@KillyMXI

• link to documentation from the plugin settings page (before the plugin is in the official community plugins list - there is no way I know to get to documentation from within the app);

Fair point. This is because it is not yet in the community plugins list, so you have no way to see the docs right?

I think there is a UX issue in Obsidian in general, regarding how information about the same community plugin is spread across 3 different places in settings.

Even for plugins that are already in the community plugins list I often would prefer to see a link to documentation closer to actual options, when these plugins have especially deep understanding requirements.

I consider this to be one of those plugins, so it would be handy to have the documentation closer. But currently it is even more important.

Of plugins I have currently active, these have documentation links directly on the settings page:

• Modules
• Spaced Repetition
• Templater

I wish it were more common, until Obsidian devs decide and find a way to consolidate all aspects of each plugin management closer together.

[danielo515]

@KillyMXI

Even for plugins that are already in the community plugins list I often would prefer to see a link to documentation closer to actual options, when these plugins have especially deep understanding requirements.

Totally agree with this. For me is supper annoying to have to go to configure the plugin to the settings, to the community plugins to the docs, and then the real usage of the plugin in the main UI.

[obsequious]

This is an awesome idea. I bet lots of people would use this as soon as they hear about it.

I would emphasize that this is critical for mobile use where typing markdown sucks.

[blue_emperor]

Hi. Can you provide some details in the plugin description how values are checked like numbers being numbers? Obviously this isn’t trivial problem because one could want to use complex rules for data checking.

[danielo515]

@obsequious

I would emphasize that this is critical for mobile use where typing markdown sucks.

Yep, that along with the lack of proper labels and overview of tenplating engines was my main motivation

[CheLin]

Hello, this is a great plugin. Then I would like to ask, can I set a default value for this form?

[danielo515]

This plugin started with the idea of being a quite thin layer on top of what obsidian and standard html could offer. It is growing a bit in scope but I’m really keen to stick to that principle.
Luckily, modern html is quite capable this days, and by making a proper use of standard elements you can get quite far. Inputs of type number not only allow you to only input numbers, they will open a specific ketboard in your mobile. Same (or similarly) applies to other input types like date, time, email, selects, etc.
On top of that the plugin provides some obaidian specific inputs like suggesters, multi select and similar that only allow you to select correct values

[danielo515]

Yes, you can. I’m on mobile, will give you an example later

[larryeitel]

I too am excited for this plugin. How about a way to pull multi-select items from the lines of a note as is possible with templatr?

[danielo515]

Could you explain it a bit more? I am not familiar with the feature you are describing.

There is one type of input that allows you to use a dataview query as source for the items you can select. Is that what you mean? For example, you can use dataview to get a list of all the values of a field named “location” and you will get all the locations as suggestion.

If that does not match what you mean, can you elaborate?

[larryeitel]

Then in the note, lines of text become part of select or multi-select.

Metadata Menu is where I use this feature.

I see places where I would prefer to use Modal Form rather than Metadata Menu.

[hansendancen]

This plugin helps a lot, thanks a lot danielo515.

I am using it to select from a folder a specific note (say person).
Query I use: dv.pages(‘“”’).map(p=>p.file.name)
Is it possible to multiselect more than one note (say person in my example)?

[danielo515]

Do you literally get lines of text (except for frontmatter I guess) as suggestions?
Not just list items or anything else? Raw lines of text?

[danielo515]

Not yet, but adding dataview support for multi-select and select is on the list

[danielo515]

Yes, it is now possible in the latest release.
Pick the multi-select input type, and then pick dataview as source.
As a tip, your query can be shorter by doing this:

dv.pages("🧑‍🦰").file.name

It’s part of the magic of dataview

[danielo515]

We are on the official obsidian plugins store!!

I’m super happy to announce that this plugin has been already accepted in the official obsidian plugins store. You can now install it as any other plugin, just search for modal forms in the store and there it is.

Also, I just released a long requested feature: the ability to use dataview as source of multi-select inputs