Import Demo Project Package into Retool

App Building
,
1

I'm trying to use the following library in my Retool App: GitHub - mrmarkfrench/country-select-js: A quick jQuery-based country picker based on https://github.com/Bluefieldscom/intl-tel-input.git

I understand that in order to build this component, I would have to 'Create' a Custom Component or a Custom HTML component and write some custom code to get it to mimic the functionality provided in the demo on the library's page.

I have started an experiment to try to get this to work but I have been struggling with it.
In particular, I'm having trouble with the following:

  • Importing the .js libraries in the Custom Component -> I have added https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js for jQuery and https://cdnjs.cloudflare.com/ajax/libs/country-select-js/2.1.1/js/countrySelect.min.js for the country select package, but I'm not sure if this is the correct way to import them.
  • Importing the .css and .png files. I'm not sure how to reference these in the Retool App since they aren't downloaded and integrated into the package that contains my Retool App.

Would it be possible to get some pointers re: the above?

Also, in general, is there a way to import/convert a demo project such as https://github.com/mrmarkfrench/country-select-js/archive/master.zip, which is in HTML, CSS, and JavaScript, into a Retool App?

2

Hi @shubham Thanks for reaching out about this!

Hmm, it looks like this code will require some modification to work within Retool. You'll notice browser console errors related to the jQuery link. Our docs have more info about supported libraries: https://docs.retool.com/docs/custom-js-code. Updating that jQuery script to this seems to resolve: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> :crossed_fingers:

Generally speaking, you can add Javascript functions and css styles to <script> and <style> tags (respectively) within your custom component code.

For example, I've added the code from demo.html, countrySelect.js (in a script), countrySelect.css (in a style tag), and demo.css (in a style tag) to my custom component below:

image
image1920×790 91.6 KB

I added the images using the base64 approach documented here: background-image | CSS-Tricks - CSS-Tricks