Manage and Upload Component Packs

Component packs, as their name implies, are zipped archives of one or more custom components for use within Skuid. Making use of component packs— whether they are developed by your team, yourself, or Skuid developers across the web—is a great way to extend the power of your Skuid implementation.

To properly use component packs, you must be familiar with how Skuid recognizes them, specifically:

  • How to use the Component Packs tab to view your existing packs
  • Uploading new packs as static resources
  • Creating new entries for those pack static resources in the component pack table

The Component Packs tab

How do you know what component packs are installed in your instance of Skuid?

What if you need to modify an installed component pack—change the Load Order or make a pack inactive?

You can do all of this on the Component Packs tab:

  1. In the main Skuid menu, click Configure.
  2. Select the Component Packs tab.

In this tab, you’ll see a list of available component packs.

The Component Pack tables has seven columns: an actions column, the "Name" column, the "Resource Name" column, the "Resource Namespace" column, the "Pages available in" column, the "Load Order" column, and the "Active" checkbox column.

Note

In Skuid on Salesforce, by default, Skuid displays a list of essential Skuid component packs:

  • skuidcore
  • skuidvis
  • skuidmobilecore
  • skuidvismobile

You cannot delete these component packs; they contain the primary Skuid components library, the standard visualization components, and their Skuid Mobile counterparts. These essential component packs are also included in Skuid Platform, but do not display in the Component Pack list.

Basic Component Pack Fields

From the Component Packs tab, you’ll see a table with the following fields. Each field serves a purpose in telling Skuid how to properly use the component pack.

In Skuid Platform [[]]

  • Name is the id property of your component pack as it appears in the manifest files. Note that this field is case-sensitive and must match the component pack ID exactly.

Note

If you did not develop this component pack, check with the developer for the correct name.

  • Ensure that the Activate checkbox is checked to enable the pack.
  • Load Order determines the actual order in which packs are loaded in the App Composer. If your component pack contains dependencies that require resources contained in other packs, set them to load after those packs.
  • The File Name is the name of the uploaded static resource.
  • Created By indicates who created the static resource.
  • Last Modified By indicates who last edited the component pack.

In Skuid on Salesforce [[]]

  • Name is the id property of your component pack as it appears in the manifest files. Note that this field is case-sensitive and must match the component pack ID exactly.

Note

If you did not develop this component pack, check with the developer for the correct name.

  • Resource Name is the name of the static resource you created.
  • (Optional) A Resource Namespace is required if the component pack’s Javascript resource includes a namespace.
  • Under Pages available in, indicate if the components are available for desktop pages, mobile pages, or both.
  • Load Order determines the actual order in which packs are loaded in the App Composer. If your component pack contains dependencies that require resources contained in other packs, set them to load after those packs.
  • Ensure that the Activate checkbox is checked to enable the pack.

Modifying fields on the component packs list

Edit fields

To change names, load order, page availability, or make a component pack active or inactive:

  1. Click Edit fa-pencil.
  2. Make your changes.
  3. Click Save.

Warning

  • The pack’s Name is an id property specific to the manifest files—critical files that govern the component’s JavaScript. Do not change the pack Name unless you are also able to update the manifest files and any necessary resource files to reflect this change; otherwise, the App Composer will not recognize the component pack.
  • If you change the name of the static resource in Salesforce, you must also change the Resource Name here to prevent errors.

Delete a component pack

  1. Click Delete fa-times-circle. The record will be flagged for deletion and highlighted in red.
  2. Click Save.

Additional properties in Skuid on Salesforce

Click Additional Properties fa-wrench to open a drawer with the following properties:

  1. Runtime Definition File

    • Edit the field to identify the correct file within the component pack. | Typically skuid_runtime.json.
  2. Builder Definition File

    • Edit the field to identify the correct file within the component pack | Typically skuid_builders.json.
  3. Cache Package Definition

    • Check this box to store the component pack’s files in the server-side cache for a performance boost. (With the files already loaded in memory, data will be accessed faster.)

    Note

    If you check the Cache Package Definition box, you must click the Update Cache button (see next section) anytime you update the component pack so that your Skuid UI will reflect the changes you’ve made.

Update the cache
  1. If you checked the Cache Package Definition box on the component pack, click Update Cache fa-cloud-upload to update the cache so that any changes to the component pack are reflected in the App Composer and runtime.

Add new component packs

While you are free to create your components and build your own component packs, you can also use component packs assembled by others within your own Skuid org—without any code.

To add a new component pack, follow the steps below:

For Skuid Platform [[]]

  1. In the Skuid main menu, navigate to Configure > Component Packs.
  2. Click fa-sign-in Add Component Pack.
  3. In the Add Component Pack dialog, click fa-cloud-upload Upload and navigate to the component pack zip file you want to use.

Your component pack is now uploaded and ready for use.

Note

You cannot “update” an existing component pack.

  1. Create an updated zip file using the same name as the existing component pack.
  2. Click fa-sign-in Add Component Pack, and choose the updated zip file. The new version will overwrite the current version of the same name.

For Skuid on Salesforce [[]]

Enable component packs

First, you’ll need to enable component pack usage in Skuid’s configuration settings.

You’ll only need to do this once.

  1. In the main Skuid menu, click Configure, and then select the Component Packs tab.
  2. Check the box next to Use Component Packs. In most cases, this box is checked by default.

Note

If you’re updating Skuid from a previous version, then this may be unchecked.

And that’s it! Skuid will now recognize any properly formatted component packs listed in its component pack library.

Upload Component Packs

In order for Skuid to recognize and utilize your component pack, you’ll need to do two things:

  1. Upload that zipped file to a Salesforce static resource that Skuid can access.
  2. Create a reference to that static resource within Skuid’s component pack list.

In Salesforce

  1. Navigate to Setup > Develop > Static Resources.
  2. Click New.
  3. Enter the name of the Salesforce static resource containing your component pack zip file.
  4. Click Choose File to upload the file.
  5. Set Cache Control to Public.
  6. Click Save.

Once you’ve uploaded your component pack as an accessible static resource, it’s time to let Skuid know it’s available for use.

In Skuid

  1. In the main Skuid menu, click Configure
  2. Select the Component Packs tab.
  3. In the Component Pack tab, click fa-plus-circle at the top of the table to add a new component pack.
Be sure to use plus sign—also known as the Add New Component Pack button—create a new row within your Component Pack table.

Note

Do not click fa-plus-circle New Component Pack. This begins a different workflow designed to give examples for building component packs, not uploading already-built packs.

  1. In the Component Pack table, fill in the necessary component pack fields.
  2. Click Save.

Your component pack is now uploaded and ready for use.

Export Component Packs

If your component pack is no longer available on your local drive, or if you have modified the pack since using it within your org, you may want to export that component pack for use with other orgs.

To do so, you’ll need to download the component pack’s file.

In Skuid Platform [[]]

  1. In the Skuid main menu, click Files.
  2. In the Files list, click fa-file View File next to the component pack name. This allows you to download the zipped pack to a location of your choosing.

In Salesforce [[]]

  1. Navigate to Setup > Develop > Static Resources.
  2. Click the Name of the static resource containing component pack.
  3. Click View file under the Size field.
  4. Save the component pack to a location you will remember.
  5. Repeat the steps as listed in Add new component packs.

Troubleshooting

Component packs are assembled using several files that refer to each other and must be properly formatted to work correctly. If different aspects of your custom component are not working then you may need to troubleshoot the construction of the component pack.

As a Skuid administrator, your ability to verify these elements may be limited, but if you’re having problems with an uploaded component pack, confirm with its developer that:

  • the paths indicated in the manifest files are correct
  • the runtime and manifest files are mapped correctly
  • the name of the component pack matches the id property of the component pack in the manifest files
  • the resource name matches the name of the static resource

For more information, see Building Component Packs.