Note From Form

Note From Form

⚠️ Breaking Changes in v2.0 Version 2.0 introduces breaking changes that are not backward compatible with previous versions. Templates created for v1.x may need to be updated. Please review the updated documentation below before upgrading.

Obsidian plugin that allows to define form with different type of input fields and JavaScript support that will later be used together with template to generate notes.

It behaves same as Templates Core plugin or From Template but extends its functionality with strongly typed fields, allows initial values and supports user defined JavaScript functions for value generations.

Consider having template like this

---
tags: tag1, tag2
aliases: alias1
date: "{{date}}"
note-from-form: |
  {
    "file-name": "t:My Note {{noteNum}}",
    "file-location": "f:function(view){ return 'My Folder'; }",
    "form-items": [
      {
        "id": "date",
        "type": "dateTime",
        "get": "t:yyyy-MM-DDTHH:mm:ss",
        "form": {
          "title": "Note Date"
        }
      },
      {
        "id": "chapterNum",
        "type": "number",
        "init": "v:1",
        "form": {
          "title": "Chapter number"
        }
      },
      {
        "id": "title",
        "type": "text",
        "form": {
          "title": "Title",
          "description": "Title of Note",
          "placeholder": "My New Note"
        }
      },
      {
        "id": "done",
        "type": "checkbox",
        "form": {
          "title": "Mark as done"
        }
      },
      {
        "id": "category",
        "type": "dropdown",
        "init": "v:[{\"k\":\"work\",\"v\":\"Work\"},{\"k\":\"personal\",\"v\":\"Personal\"}]",
        "form": {
          "title": "Category"
        }
      },
      {
        "id": "noteNum",
        "type": "number",
        "get": "f:function (view) { return moment(view.date).format('x'); }"
      }
    ]
  }
---

# Chapter {{chapterNum}}: {{title}}

Done: {{done}}
Category: {{category}}

After adding template to the index and call for template, following form will be displayed:

And will generate following Markdown and add it to the note named My Note 1727640827748 where 1727640827748 is Unix timestamp of Note Date field. Note will be created in directory named My Folder.

---
tags: tag1, tag2
aliases: alias1
date: 2024-09-29T22:13:47

---

# Chapter 1: This is title

Done: false
Category: Work

Using

1. Install plugin
2. Open plugin settings and set location of template files. Also you can specify obsidian property that will point to template definition:
3. Create set of templates that will be used by plugin to generate input form and new notes. See Template Description;

If template files have no issues Obsidian command palette will be enriched with new commands in format Note From Form: path/to/template, and context menu option will appear for template file. Use commands from command palette to create new note from template:

Use template from commands	Use template from context menu

Template Description

Form and note template are defined as markdown files that supports mustache syntax for values that need to be placed from form. Instructions for form itself are defined as JSON object inside properties. Property name might be defined in plugin settings or be a default value note-from-form.

Form template contains following fields:

• file-name used to define name of the result file;
• file-location used to define folder where new note will be stored;
• form-items used to define content of the input form or compute values for template based on the input or user-defined logic.

file-name

Used to specify name of the file for new note.

This property should be initialized with following format <type>:<value>. type specifies outcome of the value and might be one of the following:

• v. In this case content after : will be used as result. For example v:My File;
• t. In this case post-processed input form will be used as source for mustache template passed after :. For example, t:My Note {{noteNum}};
• f. In this case user defined JavaScript function can be specified. Function accepts only one parameter that is object constructed from all fields defined in form-items after calling get function (see below) for each of them. This might be used in case if result should be computed based on some complex logic not supported by mustache templates. For example, f:function(view) { return "My Value" + moment(Date.now()).format(); }

file-name is optional and if not defined, textbox with input for new file name will be displayed on input form.

file-location

Used to specify location of file with new note in Obsidian vault.

This property should be initialized with following format <type>:<value>. type specifies outcome of the value and might be one of the following:

• v. In this case content after : will be used as result. For example v:/My Folder;
• t. In this case post-processed input form will be used as source for mustache template passed after :. For example, t:My Note {{noteNum}};
• f. In this case user defined JavaScript function can be specified. Function accepts only one parameter that is object constructed from all fields defined in form-items after calling get function (see below) for each of them. This might be used in case if result should be computed based on some complex logic not supported by mustache templates. For example, f:function(view) { return "My Value" + moment(Date.now()).format(); }

file-location is optional and if not defined value specified in plugin settings would be used. In case if plugin settings are missing it, textbox for input will be displayed on input form.

form-items

Is array of items that are defining structure and content of input form and used as source for generating object that will be later used by plugin as source for mustache blocks inside template.

Each item of array may have following structure:

{
	"id": "field Id",
	"type": "field type",
	"init": "init function",
	"get": "get function",
	"form": {
		"title": "title of field on form",
		"placeholder": "for text field shows some placeholder",
		"description": "description of the field on form"
	}
}

get function

get function used to get final result of input and generate model used as source for template mustache blocks. It might be defined in one of three variants:

• v:<value>. This instructs get function to return string value defined after :. For example, v:Hello World! will return Hello World! string and assign it to appropriate field in model used in mustache blocks of template;
• t:<mustache string>. This instructs get function to collect all values defined in form-items and use it as source for mustache template defined in <mustache string>. For example, t:Hello {{who}}! will take field from form-items with id who and use its value for template. Consider, who is set to world then result of t:Hello {{who}}! would be Hello world! string;
• f:<JS function text>. This instructs get function to execute function defined in <JS function text>. For example, f:function(view) { return view.myfield + '+ 1'; }.

Function can be useful to produce values based on user input or values that do not need to be provided by user.

Function accept single argument that is JS object with fields defined in form-items with latest values entered by user and expected to return string. Function have following TS declaration:

function(view: Record<string, any>): string;

[!WARNING] f:<JS function text> use JavaScript eval() call to translate text into executable. Use it carefully!

If not specified, default variant is used that returns string representation of field.

init function

init function used to set initial values of fields declared in form-items. init function might be defined in one of two variants:

• v:<value>. Instructs init function to initialize form field from string specified in <value>. Based on field type appropriate casting will be done;
• f:<JS function text> use JavaScript function defined in <JS function text> to initialize form field.

Function accept no arguments and expect to return object with type equivalent to defined in type. Function have following TS declaration:

function<TFieldType>(): TFieldType;

[!WARNING] f:<JS function text> use JavaScript eval() call to translate text into executable. Use it carefully!

If not specified, default value will be used.

Input type fields

Following field types are supported:

• text
• textArea
• number
• date
• time
• dateTime
• checkbox
• dropdown

text and textArea

Simple single line text input field.

If init function is not set, than empty string used as default value;

If get function is not set, latest user input will be returned.

For this type of field user can specify placeholder inside form field of form-items item.

In model passed as argument to get function field type would be string.

textArea is same to text but provides multiline.

number

Generates field for numeric input.

If init function is not set, than 0 used as default value;

If get function is not set, latest user input will be returned.

In model passed as argument to get function field type would be number.

date, time and dateTime

Generates widget for user input of date, time or date & time.

If init function is not set, current date & time will be used as initial value.

If get function is not set, latest user input will be returned and formatted to string using moment.js. Based on the type different formatting will be used (see moment.js|Format)

• date - L format will be used;
• time - LTS format will be used;
• dateTime - will format time based on system locale.

moment.js can be used inside get or init functions to manipulate date and time values.

This type extends t: definition of get. Instead of mustache template moment.js|Format string can be specified, i.e. t:YYYY-MM-DDTHH:mm:ss.

In model passed as argument to get function field type would be Date.

checkbox

Generate widget with switcher to select between true and false;

If init function is not set, false will be used as initial value.

If get function is not set, latest user input will be returned.

In model passed as argument to get function field type would be boolean.

dropdown

Generates widget with options where one may be selected.

Form item definition may look like this:

{
	"id": "dropdown",
	"type": "dropdown",
	"init": "v:[{\"k\":\"a\",\"v\":\"My A\"},{\"k\":\"b\",\"v\":\"My B\"},{\"k\":\"c\",\"s\":true,\"v\":\"My C\"}]",
	"form": {
		"title": "DropDown",
		"description": "My DropDown"
	}
}

init function must be set for this type. As value it expects array of objects. Object should be following:

{
	"k": "key", 
	"v": "value",
	"s": true // optional
}

If get function is not set, latest v of selected object will be returned.

In model passed as argument to get function field type would be array of 1 element with object that have k and v fields.