QUERY BUILDER
The Query Builder extension introduces a new user interface for building queries and outputting the query syntax into the block.
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 the extension doesn't work after using the copy extension button above, try installing manually using the instructions below.
First create a block with the text {{[[roam/js]]}} on any page in your Roam DB. Then, create a single child of this block type three back ticks. A code block should appear. Copy this code and paste it into the child code block in your graph:
var existing = document.getElementById("roamjs-query-builder");
if (!existing) {
var extension = document.createElement("script");
extension.src = "https://roamjs.com/query-builder.js";
extension.id = "roamjs-query-builder";
extension.async = true;
extension.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(extension);
}Finally, click "Yes, I Know What I'm Doing".
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
Contributors
This extension is brought to you by RoamJS! If you are facing any issues reach out to support@roamjs.com or click on the chat button on the bottom right.
If you get value from using this extension, consider sponsoring RoamJS by clicking on the button below!