A plugin for Obsidian that can create input fields inside your notes and bind them to metadata fields.

Overview

Obsidian Meta Bind Plugin

This plugin can create input fields inside your notes and bind them to metadata fields.

New docs

I am currently working on new docs for this plugin. https://mprojectscode.github.io/obsidian-meta-bind-plugin-docs

How to use

To create an input field you have to write an inline code block or normal code block starting with INPUT. Then in square brackets the type of input field, in round brackets arguments and finally behind a colon the metadata field to bind to.

Examples:

  • INPUT[toggle] will create an unbound toggle
  • INPUT[slider:rating] will create a slider bound to the metadata field rating of this note
  • INPUT[text:task#completedOn] will create a text input bound to the metadata field completedOn of the note with the name task

The plugin also allows further customization with arguments. So the complete syntax looks like this:

INPUT[input_type(argument_name(argument_value), argument_name_2, ...):file_name_or_path#metadata_field]

For more examples see the exampleVault folder.

Input field types

  • slider a slider from 0 to 100 (custom ranges can be set using minValue and maxValue, see below)
  • toggle a toggle element
  • text a text field
  • text_area a bigger text field
  • select a select input field, only for code blocks
  • multi_select a multi-select input field, only for code blocks
  • date a date input field

Arguments

  • class(class_name) adds a css class to the input field
  • addLabels only for slider, adds labels for the min and max values
  • minValue(value) only for slider, sets the min value
  • maxValue(value) only for slider, sets the max value
  • option(value) only for (multi-)selects, adds an option to the select
  • title(value) only for (multi-)selects, adds a title to the select input

How to install

You must manually download the zip archive from the latest release here on GitHub.
After downloading, extract the archive into the .obsidian/plugins folder in your vault.

The folder structure should look like this:

[path to your vault]  
|_ .obsidian  
   |_ plugins  
      |_ obsidian-meta-bind-plugin  
         |_ main.js  
         |_ manifest.json  
         |_ styles.css  

Problems, unexpected behavior or improvement suggestions?

You are more than welcome to open an issue on GitHub.

The sync seems laggy

This is intentional. To reduce the load on your hard drive the plugin ony syncs about 5 times a second. There is a setting to change the sync interval, but I don't recommend changing it.

Contributions

Thank you for wanting to contribute to this project.

Contributions are always welcome. If you have an idea, feel free to open a feature request under the issue tab or even create a pull request.

Comments
  • Links inside input fields feature request

    Links inside input fields feature request

    • [x] The Plugin is up to date
    • [x] Obsidian is up to date

    Describe the bug I'm not sure exactly when or why it became broken, but things were working well for a while. Currently, as far as I can tell either the bindings are broken in reading mode or it's using stale data. Sometimes even editing mode seems to not work until I fiddle with it. Though after messing with it more, I'm beginning to suspect manipulating these at edit time may not be intended? The input controls sort of work when inside of a table while in edit mode - this may not be intended.

    Here's an example of how I'm using the plugin with dataview:

    |                 |                         |                                                                                                                                                  |
    | --------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
    | An integer      | `INPUT[text:text1]`     | `$= parseInt(dv.current().file.frontmatter.text1)`                                                                                               |
    | Another integer | `INPUT[text:text2]`     | `$= parseInt(dv.current().file.frontmatter.text2)`                                                                                               |
    | Add integers?   | `INPUT[toggle:toggle1]` | `$= dv.current().file.frontmatter.toggle1`                                                                                                       |
    | Result          |                         | `$= parseInt(dv.current().file.frontmatter.text1) + (dv.current().file.frontmatter.toggle1 ? parseInt(dv.current().file.frontmatter.text2) : 0)` |
    

    I'm attempting to create an interactable DnD 5e character sheet.

    To Reproduce Steps to reproduce the behavior:

    I haven't been able to replicate the issue on purpose, I can try attaching my vault or something if it would help.

    Occurs on

    • [x] Windows

    Plugin version 0.3.2

    Additional Context I tried pasting the content of the broken note into a new note and it seems to have the same issue.

    feature request 
    opened by Audio951 14
  • Inline code block bug for input types in combination with dataview inline notation

    Inline code block bug for input types in combination with dataview inline notation

    • [x] The Plugin is up to date
    • [x] Obsidian is up to date

    Describe the bug There seems to be a problem for inline code blocks in combination with dataview inline brackets. Whenever I use inline brackets after the first line in a code block the data is not bound and the input is broken. This is true for all inline input types of the meta-bind plugin.

    To Reproduce Steps to reproduce the behavior:

    ```ad-bug
    Correct: [T1::`INPUT[basic_slider][:t1]`]
    
    Incorrect: [T2::`INPUT[basic_slider][:t2]`]
    
    Correct: T3::`INPUT[basic_slider][:t3]`
    ```
    

    Expected behavior Every dataview inline value input acts as T1 given in the example.

    Screenshots image

    Occurs on

    • [x] Windows
    • [ ] macOS
    • [ ] Linux
    • [ ] Android
    • [ ] iOS

    Plugin version 0.3.2

    Additional context Add any other context about the problem here.

    bug 
    opened by Morekon 11
  • Note picker or suggest notes and typing [[

    Note picker or suggest notes and typing [[

    Is your feature request related to a problem? Please describe. I want to be able to link notes

    Describe the solution you'd like I can imagine two solutions:

    • a specific field type called "note picker": that would let you type the name out and search to find the right note
    • or, suggesting notes within a text input once the user types "[[" (but I guess this is much harder to implement)
    feature request 
    opened by Rhydderch 10
  • Make date picker float on top

    Make date picker float on top

    • [x] The Plugin is up to date
    • [x] Obsidian is up to date

    I use Admonitions with a smaller width and would like to integrate the date picker field into them. Unfortunately, the date picker does not hover on top of the Admonition, but is located inside of it. Therefore it's cut off. Could the date picker made to float on top always?

    Expected behavior A clear and concise description of what you expected to happen.

    Screenshots plugin

    Occurs on

    • [x] Windows
    • [ ] macOS
    • [ ] Linux
    • [ ] Android
    • [ ] iOS

    Plugin version 0.2.1

    bug 
    opened by phlind 10
  • Feature Request: Change nested YAML, or lists in Frontmatter

    Feature Request: Change nested YAML, or lists in Frontmatter

    Is your feature request related to a problem? Please describe. I would like to be able to edit keys in lists with this plugin. For example:


    list: item1: true item2: false

    Here, it would be handy if I could toggle item2 to be true for example.

    Describe the solution you'd like I would like a inline code block like: INPUT[toggle:list.item2]. This works the same way as the Dataview plugin, and is easy to use.

    Additional context Add any other context or screenshots about the feature request here.

    feature request 
    opened by Pachtjuilaard 9
  • Syncing makes writing long sentences impossible for inline text inputs in source mode

    Syncing makes writing long sentences impossible for inline text inputs in source mode

    • [x] The Plugin is up to date
    • [x] Obsidian is up to date

    Describe the bug When typing inside a text or text input, the sync messes with the typing experience: a few characters get deleted, which makes writing paragraphs smoothly impossible

    To Reproduce Steps to reproduce the behavior:

    1. create an inline text area input field or a code block
    2. go to source mode
    3. try typing longs sentences
    4. you should notice words getting cut as the field gets updated

    note: I use obsidian syncing

    Expected behavior only update once I stopped writing for x ms.

    Screenshots If applicable, add screenshots to help explain your problem.

    Occurs on

    • [x] Windows

    Plugin version 0.3.0

    Additional context Add any other context about the problem here.

    bug testers wanted 
    opened by Rhydderch 8
  • Suggestion: Adding accessible plugin api functions

    Suggestion: Adding accessible plugin api functions

    This is a suggestion to add API functions accessible via the plugin to meta-bind.

    Changes:

    Adding functions to use the plugin via the app apis:

    • buildInputFieldMarkdownRenderChild (makes a render child)
    • buildDeclaration (builds a declaration from parts)

    Also: Moved error handling for InputFieldMarkdownRenderChild to be more modular. Renamed parse -> parseString to differentiate it from parseDeclaration. Added some comments

    opened by MeepTech 7
  • Have title for all input field types

    Have title for all input field types

    Is your feature request related to a problem? Please describe. It would be great to have a standard title for every field, to maintain a pattern in the layout. I can do something similar with [!INFO], but it has different style from the select.

    Describe the solution you'd like Allow title for every input field tyoe.

    feature request 
    opened by MarceloCajueiro 5
  • Inline `INPUT` doesn't work in callouts (live preview and reading)

    Inline `INPUT` doesn't work in callouts (live preview and reading)

    • [x] The Plugin is up to date
    • [x] Obsidian is up to date

    Describe the bug Inputs that are done with inline code blocks don't work inside callouts whether it'd be in live preview mode or reading view. I originally thought I could have a working slider by putting it in callouts, but the slider doesn't even work in reading mode (while in callout)

    To Reproduce Steps to reproduce the behavior:

    1. Create a callout
    2. Try out any inline INPUT elements

    Expected behavior Callouts to render properly in callouts while in live preview and reading view

    Screenshots image

    Occurs on

    • [x] Windows
    • [ ] macOS
    • [x] Linux
    • [x] Android
    • [ ] iOS

    Plugin version 0.2.0

    bug invalid 
    opened by caasion 5
  • Why the default date is not hardcoded to the current date ?

    Why the default date is not hardcoded to the current date ?

    When initializing a date_picker field, date output is 2022-02-01. It affects plugin benefits for this one.

    it should in my opinion be hardcoded to the date when the field is initialized.

    bug 
    opened by oliviercarizzoni 4
  • All other metadata on page is deleted when selecting a text option

    All other metadata on page is deleted when selecting a text option

    This is the plugin I so much wanted, but when I'm trying it out it deletes all other metadata in frontmatter when selecting a text

    INPUT[select(option(vitt),option(rött),option(rosé),option(mousserande)):typ]
    

    It adds the metadatafield "typ", but delete earlier manually added metadata. Other metadata fields from the plugin stays however.

    Bug or I do it wrong?

    bug 
    opened by Lunkster 4
  • Add example in the docs to get options from file when running with templater

    Add example in the docs to get options from file when running with templater

    Context

    I wanted to load dynamic options when using meta-bind with templater.

    My use case: at the end of the day, I want to track what domestic tasks I did.

    The default way

    Load the INPUT at the templater with the options.

    Problem: every time I need to add a new task to the list, I would have to change the templater with the options, and it's not usable to change the code every time.

    Solution: use a file as the list of options and make templater load the options from it.

    Script

    async function get_options(file) {
      const options_file = app.vault.getAbstractFileByPath(file);
      const result = await app.vault.read(options_file);
      return result
        .split("\n")
        .map((option) => `option(${option})`)
        .join(", ");
    }
    
    module.exports = get_options;
    

    Input

    INPUT[multi_select(
      <% tp.user.meta_bind_options("journals/_props/domestic_tasks.md") %>
    ):Domestic_tasks]
    

    File for the options:

    Breakfast
    Dinner
    Lunch
    Take out the garbage
    Wash the dishes
    
    documentation feature request 
    opened by MarceloCajueiro 4
  • Formatting inline with the current theme...

    Formatting inline with the current theme...

    Is your feature request related to a problem? Please describe. While the functionality of Meta-Bind is AWESOME and a potential game changer, I'm a noob about how to make a select code block appear in the same format as normal text in the minimal theme. Currently, it stands out like a sore thumb!

    Describe the solution you'd like Is there some kind of trick (css snippet, etc.) I could deploy that would allow for a select code block to "blend in" with the Minimal Theme?

    feature request 
    opened by melmaninga 2
  • Add more ways to add CSS classes into the DOM

    Add more ways to add CSS classes into the DOM

    My first use of Meta bind was to make a language selector for code blocks, which uses a select to choose which programming language to display. In order for this to work I utilised the cssClass frontmatter field, as it triggers a change in the DOM element which I then could use CSS to do my changes. However, my input field will overwrite any other values in cssClass, so it would be nice to have an alternative trigger. See forum thread for my current use case, using cssClass.

    Add a cssClass() option

    It would be nice, if one in addition to the class() option which only applies for the input field elements, had a cssClass() option which would insert a class into the DOM at the same level as the cssClass frontmatter field.

    This would both allow for other cssClass values to be preserved, and it would also allow for tagging the DOM in away which would allow for more custom CSS options to be handled.

    Add a way to propagate the option() into a global class

    In addition to the cssClass() would serve as the global flag, one would also need a way to propagate the option() value into the DOM, so maybe an additional parameter to that which would be the cssClass value for that option.

    Example of usage (based on my use case)

    ```meta-bind
    INPUT[select(cssClass(langSelector),
    class(langField),
    option(javascript, langJavascript),
    option(python, langPython),
    option(css, langCss)):chosenLanguage]
    ```
    

    This would then always add langSelector into the main DOM, and if the first option was selected, then it would also add langJavascript into the DOM.

    Then one could use CSS selectors like .langSelector .langJavascript .language-javascript to properly select code blocks in the javascript language, without changing the cssClass in the frontmatter for other uses, and still preserve the chosen language in the frontmatter field: chosenLanguage. (And still also be able to change this particular input field using the .langField selector.

    feature request 
    opened by holroy 0
  • Remove input field after edit

    Remove input field after edit

    Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when I only use a meta-bind code block once inside of a note to set the designation or status, for instance and have to manually delete the field myself to make space for my note.

    Describe the solution you'd like I saw something in the recent commits about the destroy method, but I am not certain this is the same feature. I think it would be very nice to argue inside of a code block to remove the code block after it is changed.

    feature request wontfix 
    opened by conneroisu 1
  • Feature Request: Enable first column as Sunday in Date Picker

    Feature Request: Enable first column as Sunday in Date Picker

    Hello and thank you for creating this plugin. I think a nice feature would be able to display the date picker calendar with Sunday in the first column (currently Monday appears first). I believe the convention for the which day appears first in a calendar view varies regionally.

    An ideal solution would enable a preference (similar to the "Use US date input field order") that allows the user to choose between which day appears first in the date picker calendar view. I checked the popular "Calendar" plugin settings, and that plugin allows users to choose between "Locale default" or any specific day. I'm not sure of a use case for other days besides Sunday or Monday, but that could potentially be useful to some users as well.

    feature request good first issue 
    opened by Chris-Andrews 1
Releases(0.4.0)
An Obsidian plugin to upload your notes' metadata to your database.

Obsidian + PostgreSQL = ❤️ An Obsidian plugin to upload your notes' metadata to your database. Features send the Dataview annotations of a page to a P

Camille Louédoc-Eyriès 33 Dec 19, 2022
A simple to do list webpage where you can log the daily tasks you have to do, mark them as checked, modify them, reorder them and remove them. Made using HTML, CSS and JavaScript.

To-Do-List This Webpage is for an app called To-Do-List which helps you add, remove or check tasks you have to do. It is a simple web page which conta

Zeeshan Haider 9 Mar 12, 2022
An Obsidian plugin for automatically creating notes when linking to non-existing notes

Note Auto Creator for Obsidian Automatically create notes when links are created to them. How to use After enabling the plugin in the settings menu, y

Simon Clement 31 Dec 14, 2022
A Zotero add-on that scans your Markdown reading notes, tags the associated Zotero items, and lets you open notes for the Zotero items in Obsidian.

Zotero Obsidian Citations Adds colored tags to Zotero items that have associated Markdown notes stored in an external folder. Open an associated Markd

Dae 210 Jan 4, 2023
📝 You Can Create Your Own Short Notes With The Help of Sticky-Notes Website.

Hi ?? , I'm Sneh Agrawal A passionate Web developer from India ?? I’m currently working on Chatting Website Chit-Chat ?? How to reach me on My Gmail A

Sneh (Smilyboyy) 1 Feb 23, 2022
Obsidian Web: Connect your browser with your Obsidian notes

Obsidian Web: Connect your browser with your Obsidian notes This is an unofficial Chrome extension for Obsidian that lets you send content from the we

Adam Coddington 97 Jan 3, 2023
A service for sharing encrypted Markdown notes from Obsidian. Notes are end-to-end-encrypted and are only stored temporarily.

?? Noteshare.space Noteshare.space is a service for sharing encrypted Markdown notes from Obsidian. Notes are end-to-end-encrypted and are only stored

Maxime Cannoodt 56 Dec 26, 2022
For data quality enthousiasts (and dataview lovers): manage the metadata of your notes.

Metadata Menu This plugin is made for data quality enthousiasts: access and manage the metadata of your notes in Obsidian. Metadata Menu adds context

mathieu 139 Dec 23, 2022
Create DOM element and bind observables on it.

rx-domh Create DOM element and bind observables on it. Inspired by Binding.scala and react-flyd, I made this. Just a simple todo example: /** @jsx h *

xialvjun 4 Feb 6, 2018
Clojure inside your Obsidian documents!

Obsidian Wielder Clojure inside your Obsidian documents! This Obsidian plugin allows you to use the full power of Clojure directly inside of your docu

Victor Bjelkholm 53 Dec 18, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A plugin for Obsidian (https://obsidian.md) that adds a button to its search view for copying the Obsidian search URL.

Copy Search URL This plugin adds a button to Obsidian's search view. Clicking it will copy the Obsidian URL for the current search to the clipboard. T

Carlo Zottmann 6 Dec 26, 2022
A Bootstrap plugin to create input spinner elements for number input

bootstrap-input-spinner A Bootstrap / jQuery plugin to create input spinner elements for number input. Demo page with examples Examples with floating-

Stefan Haack 220 Nov 7, 2022
When pasting screenshots into obsidian notes, convert the images to jpeg and compress them

obsidian-paste-png-to-jpeg This plugin is inspired by obsidian-paste-image-rename, obsidian-paste-image-rename can be used when inserting images renam

null 19 Nov 15, 2022
Obsidian.md plugin to integrate with Zotero, create literature notes and insert citations from a Zotero library.

Obsidian Zotero Plugin Obsidian.md plugin to integrate with Zotero, create literature notes and insert citations from a Zotero library. Intro How to u

null 156 Jan 6, 2023
This is a Webpack based to-do-list project. With this app, users can add thier daily routine tasks to the list, mark them as complet, edit them or delete them.

To Do List This is a Webpack based to-do-list project. With this app, users can add thier daily routine tasks to the list, mark them as complet, edit

Ali Aqa Atayee 12 Oct 30, 2022
An Obsidian plugin to grab all yaml fields from all files into a dataframe

Metadataframe Metadataframe allows you to get all metadata from your vault into CSV file. With CSV in-hand, you can do any data analysis you want with

null 7 Sep 15, 2022