<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PP7S83N" height="0" width="0" style="display:none;visibility:hidden">
Tutorial

Create a Retool app with Weavy components

This tutorial will guide you in creating a workflow and app from JSON templates, quickly getting a proof-of-concept up and running, and gaining an understanding of what Weavy can do for your Retool apps.

1. Weavy API Key

First, we need an API key to communicate with the Weavy backend.

2. Import authentication workflow

This workflow handles the communication between Retool and Weavy API to get the authenticated user in your app, sync it with Weavy, and return an access token.

  • Download WeavyRetoolWorkflow.JSON (link below)
  • Go to Workflows in Retool
  • Click Create New and select From JSON
  • Choose to Upload a file in the modal and then Create workflow
  • All settings are already included, so all you have to do is Deploy (up to the right)
    • If the Deploy button is disabled, it's either already deployed (look for the text Latest version deployed), or some of the settings might not have loaded correctly - refresh, and it should be working.
    • Any message about no triggers configured can be ignored.
Download WeavyRetoolWorkflow.JSON

3. Import app

Now, we're importing an app based on the Basic Layout template in Retool, with Weavy components added.

  • Download WeavyRetoolApp.JSON (link below)
  • Go to Apps in Retool
  • Click Create New and select From JSON/ZIP
  • Choose to Upload a file in the modal and then Create app
Download WeavyRetoolApp.JSON

4. Configure app

In the Code section, we need to update the workflow settings.

  • Click the getAccessToken workflow in the Code panel
  • Update the Select workflow dropdown to WeavyRetoolWorkflow
  • Update the Workflow parameters according to the JSON snippet below.
Copy and paste into Workflow paramaters 
{ 
  "uid" : "{{ current_user.sid }}t", 
  "fullname" : "{{ current_user.fullName }}", 
  "email" : "{{ current_user.email }}", 
  "avatar" : "{{ current_user.profilePhotoUrl }}" 
}
  • Click Save & Run
  • If successful, you should see an access token in the output window
retool-config-app

5. Done!

We now have a complete Retool app running using Weavy components. Select data in the table and see how the right panel updates with collaboration components.

You can also see a messenger icon in the top right corner; click it to open a drawer with our messenger component.

Now, imagine all this in your app!

Web capture_22-8-2024_162729_ubajay.retool.com
On this page

What's next?

Now, let's add our components to your Retool apps and make it a collaborative powerhouse

All tutorials
Ask AI
Support

To access live chat with our developer success team you need a Weavy account.

Sign in or create a Weavy account