SMARTBLOCKS: ALTERNATIVE METHODS

Table of contents


Overview

We are also innovating on ideas. This section covers some experimental and even unsupported possibilities for innovators, developers and risk takers. Use at your own risk!

Demonstration

You can view this brief video to see these alternative methods in action. Also, a more practical example in this video.

SmartBlock Button - {{ }} (Experimental)

As a SmartBlock builder, you can insert a button into a block so the button will run a SmartBlock workflow when the user clicks on it. To do this, insert a button using the following syntax:

{{caption:42SmartBlock:workflow name}}

First, you notice the syntax starts with {{ and also ends with }}

Between the {{ }} are three parameters:

Three parameters separated by a :

Caption - the name that will appear on the button. (Do not use caption names that conflict with other Roam features, like: table, kanban, test)

42SmartBlock - this is the directive that tells Roam42 that this button is for a SmartBlock workflow. Please note: this must match exactly, including case.

Workflow Name - the name of your workflow you want the button to run

The Workflow Name must match identically the name of the workflow in your graph

Example:

Imagine in your graph you have defined the following SmartBlock workflow:

#42SmartBlock ExampleButton

Insert this block 1

Insert this Block 2

To make a button that runs this workflow, you would use the above mentioned syntax in the following way:

{{Click Me:42SmartBlock:ExampleButton}}

How it appears:

{{Click Me:42SmartBlock:ExampleButton}}

Notes:

When the button is clicked, the button syntax is removed from the block and then the workflow runs.

Advanced button use - passing in parameters as variables

Optionally you can pass an additional parameter that will be converted to variables that can be retrieved with the SET command. Syntax for this parameter is:

variableName=value

or define multiple variables, separating them with a comma:

variableName1=value1,variableName2=value2,variableName3=value3

The following is an example of a SmartBlock button:

{{Click Me:42SmartBlock:ExampleButton:variableName1=value1,variableName2=value2}}

Note: the parameters are separated by :, however the variables are separated using = between the variable name and variable value, and each variable definition is separated by a ,

If you made it this far, just let me say that I hate writing documentation :-)

Prevent the button from being removed

If you would like the button to remain behind and not be deleted when clicked, add the variable 42RemoveButton=false

{{Click Me:42SmartBlock:ExampleButton:variableName1=value1,variableName2=value2,42RemoveButton=false}}

CSS formatting for a button

Some have customized the appearance of the SmartBlock button. Example CSS:

.block-bullet-view .bp3-button:not([class*="bp3-icon"]):not(.block-ref-count-button):not(.bp3-minimal) {
  background: transparent !important;
  padding: 0;
  line-height: 2em;
  font-weight: 500;
  border-radius: 2em !important;
  box-shadow: 1px 1px 2px 0px var(--bullet-closed-border) !important;  
}

SmartBlocks calling SmartBlocks (Experimental and Unsupported)

A SmartBlock can call another SmartBlock using the command <%SMARTBLOCK:name of SmartBlock%>.

This is an experimental feature that is not currently being supported. This means it works reasonably well, but will fail in many cases. We are not investing the time until we have a v2 API from Roam.

Therefore you should thoroughly test these scenarios.

Also a SmartBlock can be hidden from showing up in the trigger menu by adding <%HIDE%>

Advice

Keep the structure of the SmartBlock flows as shallow as possible

Be aware that IF logic commands can cause the embedded SmartBlocks not to be called depending on the result values.

Support

There is an active community at roamresearch.slack.com channels #roam42 and #roam-js. Stop by if you need help or want to share your ideas.


Up Next: Customization