Skip to content

waynevanson/data-entry-obsidian-plugin

Repository files navigation

Data Entry - Obsidian Plugin

An Obsidian.md plugin that turns your metadata into a form.

Feel free to submit issues and discussions with your desires here on GitHub.

This is a passion project used to fit my use case, but generalised enough that it could fit yours too. Show you <3 by supporting this work.

CUrrently haven' had a releasedue to big refactor.

Summary

  • Create your datasource (frontmatter metadata within a file)
  • Create the schema that represents that datasource using JSONSCHEMA.
  • (Optionally) customise how the data is represented as a UI using JSONFORMS.
  • Add a data-entry codeblock with the form configuration
  • Enter read mode and enjoy a form!

For recent additions to this plugin, please visit the changelog

Quick Start

Once the plugin is installed from the community store and enabled, Copy the following into a new file and enter read mode.


---
schema:
  type: object
  properties:
    name:
      type: string
    hobbies:
      type: array
      items:
        type: string
---

```data-entry
datasource:
  file:
schema:
  file:
```



Please Note

  • Although this plugin exists in the obsidian store, it's still a work in progress.
  • UI will look janky because Obsidian overrides some styles. Will start working on this soon.
  • There's a major bug when editing a schema for a note that is already open. Close the note and reopen it to remove the error. This is next priority.

Preview

Click to open

Configuration

Please visit these links for the definitions of JSONSCHEMA and JSONFORMS. JJSONSCHEMA capabilities have been extended with the following formats

The config looks like the typescript interface below:

export interface UserConfiguration {
  datasource: {
    file?: {
      path?: string;
      frontmatter?: string;
    };
  };
  schema:
    | {
        file?: {
          path?: string;
          frontmatter?: string;
        };
      }
    | {
        inline: JSONSCHEMA;
      };
  uischema:
    | {
        file?: {
          path?: string;
          frontmatter?: string;
        };
      }
    | {
        inline: UISCHEMA;
      };
}

Which will resolve with the following defaults, unless changed in the settings.

{
  datasource: {
    file: {
      path: '${CURRENT_FILE}';
      frontmatter: 'data';
    }
  },
  schema:
    file: {
      path: '${CURRENT_FILE}';
      frontmatter: 'schema';
    }
  // actually defaults to null because uischema can be inferred from schema.
  // passing "file" will use the following configuration
  uischema:
    file: {
      path: '${CURRENT_FILE}';
      frontmatter: 'uischema';
    }
}

Developers

Here is some info that we can use.

How it works

Plugin holds the state of our application. Config is read into the plugin when a markdown file contains data-entry. We validate this config, inject some defaults and render the UI via react/preact.

We read many files frontmatter contents for the datasource, schema and uischema if we need to. We use the JSONFORMS react component to render the schema and uischema, keeping track of the data as they fill it in.

Packages

This repository contains multiple packages to ensure concerns are clearly separated.

  • packages/data-entry contains the plugin that users install on their devices.
  • packages/obsidian-mocks contains mocks used to replicate obsidian functionality, as the packages provided by the Obsidian team contains only types and not any implementation for tests.