Tutorial
Dropbox file chooser in your Retool app
Prerequisites
You will need:
- A Weavy API key
- A Retool account
You will need:
Before you can work with Weavy, you'll need to sign up for an account or sign into your existing account.
For our Weavy component to work, we need an access token from the authentication workflow.
Go to Code
in the left panel, click the +
and select Import Workflow
getAccessToken
WeavyRetoolWorkflow
from the Select Workflow dropdownWorkflow parameters
according to the JSON snippet below.Workflow paramaters
{
"uid" : "{{ current_user.sid }}",
"fullname" : "{{ current_user.fullName }}",
"email" : "{{ current_user.email }}",
"avatar" : "{{ current_user.profilePhotoUrl }}"
}
Run behavior
to Automatic
Save & Run
Make sure you have imported the authentication workflow into Retool following our tutorial before adding Weavy features to your app.
Search for Custom component
in the components search bar.
Drag and drop it onto the canvas and do the following in the inspector:
For Content
;
Model
IFrame Code
Check the following for Interaction
;
Model
with;Model
in the inspector - copy and paste this code
{
"token" : {{ getAccessToken.data.access_token }}
}
In the IFrame code for the custom component, we'll initiate the Weavy context and pass the access token to the token factory for authentication.
Once authenticated, we can render the files component from Weavy.
IFrame Code
in the inspector - copy and paste this code
<script src="WEAVY-URL/uikit-web/weavy.js"></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>
<style>
:root {
--wy-theme-color: #3170F9;
--wy-border-radius:8px;
font-family: "Inter var", sans-serif
}
html, body {
padding: 0px;
margin:0px;
height:100%;
}
</style>
<div style="height:100%;display:flex;background:#fff">
<wy-files uid="weavy-retool-files"></wy-files>
</div>
Replace WEAVY-URL
with your backend URL.
You haven't selected an API key. If you do - code snippets and files you download will automatically be updated with API key and backend URL.
The Custom Component
with the Files component should load instantly - but toggle to Preview mode
to see the full experience.
Note that this is fully working now and available for all your users if you want - Dropbox support added, just like that.
We need an API key to communicate with Weavy for authentication, etc
Select what technology you want to ask about
Get answers faster with our tailored generative AI. Learn more about how it works
This is a custom LLM for answering your questions. Answers are based on the contents of the documentation and this feature is experimental.
To access live chat with our developer success team you need a Weavy account.