Tutorial

Set up a workflow and build a custom component in Retool

This end-to-end tutorial allows you to use all our building blocks in your apps running in production.

You'll learn how to set up a workflow to get an access token from the Weavy API, sync the logged-in user in Retool to Weavy, and render the building block with that user.

This will allow users to find each other when starting a new chat room, mentions in comments and posts, etc.

Have Retool ready, set the parameters to unlock the tutorial, and get started.

Don't have the parameters? Sign up for free, or sign in and set up your environment to get the parameters.

1. Create workflow

Click Workflows in the top menu in Retool and create a new workflow.

After the workflow is created, rename the workflow to Get Access Token in the top bar.

create-workflow

1.1 startTrigger

Set the Test JSON parameters.
Modify Test JSON Parameters - copy and paste below 
{ 
   "uid" : "uid-testuser", 
   "fullname" : "Demo User", 
   "email" : "demo@user.com", 
   "avatar" : "" 
}

1.2 Add code block

Add a code block to the workflow, name it init in the title bar, and add the code below.

This will set the parameters we need to communicate with the Weavy API.

Modify code block 
return { 
    URL: "WEAVY_URL",
    KEY: "********************"
}
Next, connect startTrigger with the code block.

1.3 Add user to Weavy

Add a resource query block to the workflow, name it createuser in the title bar.

This query will add/update the user in Weavy with information from the logged-in user in Retool.

  • Set resource type to RESTQuery (restapi)
  • Set method to PUT
Set the URI to 
{{ init.data.URL}}/api/users/{{ startTrigger.data.uid }}
  • Expand More options
     
  • In Headers add;
    • Key: Authorization
    • Value: Bearer {{ init.data.KEY }}
     
  • For Body, select JSON, and add;
    • name: {{ startTrigger.data.fullname }}
    • email: {{ startTrigger.data.email }}
    • picture: {{ startTrigger.data.avatar }}
     
  • Connect the block with the code block init.
rquery

To ensure it all works, run the resource query by pressing play in the block's title bar.

If successful, you see a Data output with id, uid, display_name, etc.

1.4 Issue access token

Now, we need to get an access token for the user in Weavy.

Add another resource query block to the workflow, and name it getaccesstoken in the title bar.

  • Set resource type to RESTQuery (restapi)
  • Set method to POST
Set the URI to 
{{ init.data.URL}}/api/users/{{ startTrigger.data.uid }}/tokens
  • Expand More options
     
  • In Headers add;
    • Key: Authorization
    • Value: Bearer {{ init.data.KEY }}
     
  • Connect the block with the resource query block createuser

To ensure it all works, run the resource query by pressing play in the block's title bar.

If successful, you should see an access_token in the Data output.

1.5 Return the access token

Last, we need to return the access token to the app.

  • Add a response block to the workflow and name it accesstoken in the title bar.
  • Connect the block to the resource query block getaccesstoken
  • Set Status code to 200 and update the Return body with below;
Return body 
{
  "access_token" : getaccesstoken.data.access_token
}

2. Import workflow

Open up your app in Retool, and select the code tool in the left panel.

  • Import Workflow
  • Name it getAccessToken
  • Select Run query automatically when inputs change
  • Set workflow to Get Access Token
  • Set Workflow parameters to JSON with the following values;
    • email: {{ current_user.email }}
    • fullname: {{ current_user.fullName }}
    • uid: {{ current_user.sid }}
    • avatar: {{ current_user.profilePhotoUrl }}

Save & Run the workflow; if successful, you should see an access_token in the Output.

importworkflow

3. Add custom component

Search for "Custom component" in the components search bar. Drag and drop it onto the canvas and do the following in the inspector:

Check the following boxes for Interaction;

  • Downloads
  • Forms
  • Modals
  • Popups
  • Top-level navigation
  • Storage and cookies

Update the Model with;

Update Model 
{
  "token" : {{ getAccessToken.data.access_token }}
}
And update the IFrame Code with;
Update IFrame Code 
<script src="WEAVY_SCRIPT"></script>    
<script>
    const weavy = new Weavy();
    weavy.url = "WEAVY_URL";
    window.Retool.subscribe(function (model) {
      weavy.tokenFactory = model.token ? async (refresh) => model.token : undefined;
    });
 </script>

<wy-#### uid="wyuid####"></wy-####>
  • Line 10 - You can set UID to whatever you want. It's the unique identification for the building block - for example if you want to have more than one chat in the same view.

4. Take it for a test run

The Custom Component with Weavy should load instantly, but toggle to Preview mode to see the full experience.

Add more custom components with different building blocks to render different functions from Weavy.

On this page
Unlock the tutorial with your Weavy API key.

There's more

Check out the other tutorials for setting up workflows, queries, and more.

All tutorials