Skuid component include external resources

  • 1
  • Question
  • Updated 2 years ago
  • Answered
How could I include an external js library to use inside the custom component?

{
   "id": "jetpackninja",
   "components": [
      {
         "id": "sayhello"
      }
   ],
   "js": [
      {
         "path": "runtime.js",
         "dropzone": "dropzone.js"
      }
   ],
   "css": [
      {
         "path": "runtime.css",
         "dropzone": "dropzone.css"
      }
   ]
}
Photo of Hasantha Liyanage

Hasantha Liyanage

  • 1,446 Points 1k badge 2x thumb

Posted 2 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
For non-Salesforce hosted resources, you use "referenceType" : "external" with the "path" property being an Absolute URL, e.g.

{
   "js" : [
      {
         "referenceType" : "external",
         "path" : "//cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"
      }
   ]
   "css" : [
      {
         "referenceType" : "external",
         "path" : "//cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css"
      }
   ]
}

For more details, see the "Resource Reference Definition Properties" section of this tutorial:

http://help.skuid.com/m/11720/l/288289-component-packs-and-custom-components
(Edited)
Photo of Hasantha Liyanage

Hasantha Liyanage

  • 1,446 Points 1k badge 2x thumb
Thanks Zach, This helps.

I have another question, 

Is it possible to add multiple sub components to the component?
Thinking of creating a one component pack and have multiple components in it, and then we could have all the company related skuid custom components under one component pack.

Please see the image attached;



Thanks
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
components is an array, just add additional entries for each Component (you'll need to do this in both the skuid_builders.json and skuid_runtime.json manifest files:

"components" : [
   {
      "id" : "sayhello"
   },
   {
      "id" : "foobar"
   }
]
Photo of Hasantha Liyanage

Hasantha Liyanage

  • 1,446 Points 1k badge 2x thumb
Thanks Zach, This worked, Perfect!