Custom JS Views from Template Files

[kaelri]

Hi! I've been working on a new feature for Dataview, and I wanted to share it with you and solicit feedback before submitting a pull request.

Basically: I loved Dataview’s queries, and I wished I had more power & flexibility in displaying the query results, since the default tables & lists are a bit limited. Then I discovered the JavaScript API, which solves that problem—now I've got some pretty complex HTML-generating logic going on! But that means I have a big chunk of free-floating JavaScript code floating in the middle of my Markdown file, which is unpleasant for many reasons.

So: this feature creates a new JS API render method, dv.loadView(), which loads a JS function from a file, executes it and displays the output as HTML. Example:

let query = dv.pages( '#sometag' );

dv.loadView( 'hello-world', query );

This would look for a template file inside the vault, under .obsidian/dataviews/hello-world/view.js. If that file exists, the contents are evaled (essentially) to an anonymous function. It then runs that function, passing dv and whatever input was passed from the code block, and treats whatever comes out as HTML:

viewFunction = new Function( 'dv', 'input', fileContents );

html = viewFunction( this, input );

Additionally, if .obsidian/dataviews/hello-world/view.css exists, it will load that file separately and render it inside a <style scoped> tag.

As a result, my Markdown files are kept clean and (mostly) code-free, and I've got a little "view" module that I can easily reuse in multiple pages, copy to another vault, or post & share.

Here's my fork with these additions. I also published a test vault containing a few examples.

Is this valuable? Is this the right approach? Any suggestions or corrections? I'd love to hear your thoughts.

[chhoumann]

I've been wishing for something like this for a while now. Looks great!

[blacksmithgu]

This looks awesome, love the feature! The only things I would bring up are nitpicks (maybe renaming dv.loadView() to dv.view()), so I'd be happy to bring this into base Dataview if you make a PR.

[kaelri]

Woo, thank you! I'll make that change and submit.

[ShahriarKh]

Looks great! any updates?

[blacksmithgu]

This has been a feature for about 3 months, implemented as dv.view(); you can check the documentation for a brief explanation of it.

[ShahriarKh]

Oh... I see it! 😂 I'm just getting started with Obsidian since last night.