Canvas comes with a library of ready-made blocks for supported applications , - but you may find that you have specific needs that are not covered by these blocks.
While you can customize any blocks block directly in the workflow, or just use a generic ‘Code’ block, it is usually better to create a new block template with the new functionality:
A block template
...
makes it easy to reuse code, and to deploy changes and improvements across all workflows where
...
the block template is used.
Block templates allow you to create block questions, which lets the user quickly customize how the block works via settings shown in the UI, without
...
To create a new block template head to the Workbench section:
...
needing to edit the code.
In this article we will take you through all the steps needed to create and test a new block template.
In this article we We will create a new block for the Test application (which is registered to our account), which “Test” application:
...
The block will return an array of employee names from the Test app API
...
.
The block will have ‘block questions’, which lets the user select between returning first names only, last names only, or both combined.
| Info |
|---|
The “Test” app provides dummy data for testing purposes. Feel free to add it to your account, no credentials are needed. |
Sections in this article:
| Table of Contents |
|---|
1) Create the block in ‘Workbench’
To create a new block template, head over to the Block Workbench:
...
Here you can find all publicly available blocks made by ConnectMyApps, as well as any private blocks belonging to your organization:
...
Click “Add new block”.
You will then be presented with the “Block creation wizard”:
...
Select the application you will be creating a block for, in this case the “Test” app
(Optional) For testing purposes, you may choose to select which app/credentials registered in your account you wish to use to test API calls while configuring the block template. If you have added the Test app to your account (under ‘Applications') you can select it here.
Click “Next”.
Give your block a clear name and description:
...
Click “Finish”.
You will now be presented with the block template editor.
...
The editor has four tabs:
The Configuration Managermanager tab lets you create block questions, which are settings that can easily be changed by without the need for coding to customize the block.
The Code Editoreditor tab is where you write and debug the code for the block.
The Input Modelmodel editor tab lets you define the schema/model that the block accepts/expects as input.
(This information is used by the Mapper block to fill out field names and types in the mapping table.)The Output Modelmodel editor tab lets you define the schema/model that the block gives as output.
(This page is often left blank, as the Mapper block can dynamically create the output model by sampling the output data from the block.)
Sections in this article:
| Table of Contents |
|---|
Configuration Manager
The Configuration Manager tab lets you configure the block settings (aka “block questions”) that will be shown to users of the block:
By adding block questions to the template you can create easily configurable settings for users of the block. The settings are shown in the template editor UI (under the “Working Area” tab), and can easily be changed by anyone without the need for coding, and without the need to customize the block.
In the next steps we will go through each of these tabs.
2) Creating block questions
The Configuration manager tab lets you define the block questions that will be presented when the block is added to a workflow.
| Tip |
|---|
Reasons to use block questions:
|
About the fields:
The Title is a short description of the setting
The Information field can be used to provide additional info to the user. It is shown when hovering the pointer over the ℹ️ icon in the block settings
...
The Tag name provides field specifies the name of the variable containing for the settings, which for use in the block code. This variable can be accessed in by calling the block code via getVariables() function in the blo
The Control type field lets you select the input type for the setting.
...
You can see a preview of the block options on the right hand side.
...
, which also lets you set a default value for the block
...
template:
...
...
3) Editing the block code
The Code Editor tab is where you enter the actual code that will be used by the block:
...
For more information about block development see:
Development on CanvasYou can debug the block code by pressing F12 and clicking the bug icon, as shown here:
Running blocks in the debugger
...
4) Specifying the input model
The Input Model tab lets you define the schema/model in JSON format that the block accepts/expects as input. This information is used by the Mapper block to fill out field names and types in the mapping table.
...
Here is instead an example of an input model from a different block:
...
...
Similar to the Input Model, the Output Model lets you define the schema/model that the block gives as output. This page is often left blank, as the Mapper block can dynamically create the model by sampling the output data from the block.
5) Committing changes and publishing the template
Block templates in Canvas are version controlled. This enables you to potentially make changes to blocks across many workflows, without having to edit each individually. This works the same way as previously described for workflow templates:
...