QUERY BUILDER

The Query Builder extension introduces a new user interface for building queries and outputting the query syntax into the block. The name of the script is query-builder.

Installation

You could use the Copy Extension button below to individually install this extension. To install, just paste anywhere in your Roam graph and click "Yes, I Know What I'm Doing".

Manual Installation

If instead you prefer to manually install, first create a block with the text {{[[roam/js]]}} on any page in your Roam DB. Then, copy and paste this code block as a child of the block.

var existing = document.getElementById("query-builder");
if (!existing) {
  var extension = document.createElement("script");
  extension.src = "https://roamjs.com/query-builder.js";
  extension.id = "query-builder";
  extension.async = true;
  extension.type = "text/javascript";
  document.getElementsByTagName("head")[0].appendChild(extension);
}

Usage

The script is not configurable.

In a block, type {{query builder}}. Similar to date picker, there will be an overlay that appears next to the query builder button. After specifying different query components that you're interested in searching, hit save to insert the query syntax into the block.

The Overlay is fully keyboard accessible. Each input is focusable and you can tab and shift+tab through them. For the query component dropdown, you could use the following key strokes to navigate:

  • Arrow Up/Arrow Down - Navigate Options
  • Enter - Open Dropdown
  • a - Select 'AND'
  • o - Select 'OR'
  • b - Select 'BETWEEN'
  • t - Select 'TAG'
  • n - Select 'NOT'

On any deletable component, you could hit ctrl+Backspace or cmd+Backspace to delete the icon. Hitting enter on the save button will output the query into the block.

There will also be an edit button rendered on any existing query. Clicking the builder will overlay the Query Builder to edit the existing query!

Playground

Play with the button below to get a sense of how the Query Builder works! Saved queries will get outputted to the neighboring textbox. The demo assumes a Roam Database with only the following three pages:

  • David
  • Anthony
  • Vargas

Demo

Other Extensions