I am trying to add a custom library to our Retool environment which isn’t working for me. I am following the instructions here https://docs.retool.com/docs/custom-js-code.
I am adding library, https://cdnjs.cloudflare.com/ajax/libs/voca/1.4.0/voca.min.js, though after adding I can’t figure out how to access it. What’s the secret here?
For custom libraries, they need to be hosted on a CDN which it looks like you’re good on so far. Depending on the library, you’ll access it inside of {{ }} tags or Run JS Code type queries. For the built-in Moment.js and PapaParse libraries, their functions are accessed with {{ moment() }} and {{ Papa.parse() }}.
A big qualifier here is that all JS in retool runs inside of a sandbox, so if the library won’t work property if any of it’s functions depend on listening to user input, use jQuery, listen to events on the Retool page, etc.
New user. I’m having the same issue. I’ve added the https://cdnjs.cloudflare.com/ajax/libs/voca/1.4.0/voca.min.js library to Organization Settings > Advanced > Libraries, but I can’t figure out how to call the slugify() function from the library.
@alex-w, would you be willing to provide a code snippet indicating where and how to call that function or any other from the voca library the OP mentions?
I want to slugify the value of one of my text inputs, like:
const slugify = require('voca/slugify');
slugify( {{ textinput1.value }} );Hi James!
Just checked out the Voca library, it looks like their functions are all built off of v like v.slugify(). All of the voca methods should be available after adding the library, though it looks like we do still underline the custom libraries identifier in red, while the green highlight and returned value is correct. I'll look into getting that fixed!
You should be able to use any of the methods on their docs. At first glance, I don't see any conflicts with the JS sandbox.
Here are some quick working examples:
New user. I’m having the same issue. I’ve added the (https://sdk.amazonaws.com/js/aws-sdk-2.799.0.min.js) library to Organization Settings > Advanced > Libraries, but I can’t figure out how to call the var AWS = require(‘aws-sdk’);
const provider = new AWS.CognitoIdentityServiceProvider(); function from the library.
@alex-w, would you be willing to provide a code snippet indicating where and how to call that aws sdk library function?
below i am sharing my code
var params = {
UserAttributes: [ /* required /
{
Name: ‘STRING_VALUE’, / required /
Value: ‘STRING_VALUE’
},
/ more items /
],
UserPoolId: ‘STRING_VALUE’, / required /
Username: ‘STRING_VALUE’, / required /
ClientMetadata: {
‘’: ‘STRING_VALUE’,
/ ‘’: … */
}
};
provider.adminUpdateUserAttributes(params, function(err, data) {
if (err) console.log(err, err.stack); // an error occurred
else console.log(data); // successful response
});
Hi @alex I am trying to add npm library nanoid
Documentation shows we have to call nanoid() and it will generate a id. [Reference] (https://cdnjs.cloudflare.com/ajax/libs/nanoid/3.1.9/nanoid.min.js)
I am calling it in js query but its saying nonoid is not defined.
Please help me in this regard.
Hi @SalmanMaqbool,
I know we chatted about this already, but I wanted to post here as well in case someone runs into this --
Here are two potential workarounds:
2. Workaround by importing this library: https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js And then copy & paste the code into Preloaded JS:
window.nanoid=(t=21)=>{let e="", r=crypto.getRandomValues(new Uint8Array(t));for(;t--;){let n=63&r[t];e+=n<36?n.toString(36):n<62?(n-26).toString(36).toUpperCase():n<63?"_":"_"}return e};
See below:
Hello @Tess,
could you guide me how can i use this library https://static.line-scdn.net/liff/edge/2/sdk.js
it can be used in tag as official documentation
Developing a LIFF app | LINE Developers
But after i add the link of js to application level, i can't use it. it is undefined
Thanks
Hi @Yusef It seems like this library may not be compatible. What are you looking to do with the library?
Hi @jamesi not that I know of outside of our JS library import feature 
Can you share more about what your use case is?
Generally speaking, when importing a library, it should work without using require, but there are certainly some libraries that don't well with Retool
I was trying to import the AWS library (cognito) to query user data (email and provider), but it wouldn't load because it required using the require command to load the library.
@jamesi Thanks! Sorry to hear it's not working. My apologies in advance for my unfamiliarity, but is this something that can be done via REST API as a better supported workaround -- similar convo here: http://community.retool.com/t/sensitive-credentials/9021/11
I read through the thread and i'm still not 100% sure how you would import a custom library. So this is the minified link for the library that I got from the CDN on supported libraries: https://cdnjs.cloudflare.com/ajax/libs/react-flow-renderer/10.3.17/umd/index.js
How would I call it in a custom component? I basically want to create a flow chart that consists of custom components but I dont know how to reference it.
I tried adding something below in the iframe code but it doesnt appear to be working.
<script type="application/javascript">
const reactFlow = // how do I call the react-flow-renderer here?
</script
Hi, I'm trying to load these libraries from jsdelivr:
I'm unable to find bech32 or Buffer on the window - is there some other way I'm supposed to be loading and using these scripts?