Upload and Manage 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.

Packs are managed in the Component Packs tab. You access this tab by navigating to Settings > Component Packs.

In this tab, you’ll see a list of available component packs. You can modify the properties of existing packs or delete them. When deleting component packs in Skuid on Salesforce, you must also delete the static resource containing the pack.

Note

While it’s possible to use component pack developed by other builders without knowing code, you may also want to build your own. For more information, see the topics on how to build component packs and how to code custom components.

Upload Component Packs

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

  1. Create a new component pack within the component packs screen. This creates a static resource that Skuid can reference.
  2. Update that static resource pack with the appropriate zip file.

In Skuid

  1. Navigate to Settings > Component Packs.
  2. Click Create.
  3. Fill out the component pack details: - Pack ID: This value must match the ID of the component pack’s manifest files. Check with the component pack developer for the proper value. - First component label: This can be any value, as you’ll be overwriting the boilerplate code created here.
  4. Click Save.

In Salesforce

  1. Navigate to Setup > Develop > Static Resources in Classic or Setup > Platform Tools > Custom Code > Static Resources in Lightning.
  2. Find the static resource created by Skuid, named <packId>Components. Click Edit.
  3. Click Choose File.
  4. Select the zip file for the component pack to upload it.
  5. Set Cache Control to Public.
  6. Click Save.

Your component pack is now uploaded and ready for use.

Properties

From the Component Packs tab, you’ll see a list containing each pack. By default, the list displays the name of the component, the name of the static resource containing the pack, as well as name of the user that created/updated the pack.

Each pack also has the following properties, which can be adjusted by clicking the pack’s list item or by clicking the pack’s dots-vertical More Options menu > Configure.

  • Pack ID: Correlates to the id property within the runtime and builder definitions of your component pack. This field is case-sensitive and must match the component pack ID exactly.

    Warning

    Do not change the pack Pack ID unless you are also able to update the manifest files and any necessary resource files to reflect this change; otherwise, the Composer will not recognize the component pack.

    Note

    If you did not develop this component pack and are seeing issues, verify the component pack id with the developer.

  • Runtime Definition File: Used by Skuid to locate the runtime definition file. Typically skuid_runtime.json. Do not modify unless you are sure these definition files have different names.

  • Builder Definition File: Used by Skuid to locate the builder definition file. Typically skuid_builders.json. Do not modify unless you are sure these definition files have different names.

  • Active: Determines whether or not the component pack is activated and able to be used within the Composer.

  • Load Order: Determines the actual order in which packs are loaded in the Composer, starting from 0. If your component pack contains dependencies that require resources contained in other packs, set it to load after those packs.

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.

  1. Navigate to Setup > Develop > Static Resources in Classic or Setup > Platform Tools > Custom Code > Static Resources in Lightning.
  2. Click the Name of the static resource containing component pack.
  3. Click View file under the Size field.
  4. Save the component pack.

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.

You may need to verify these elements with the component pack’s developer:

  • 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 example:

An error occurred while attempting to load the "<componentPackId>" component pack. The name of your pack does not match the name in the package definition.

This error means that the Pack ID does not match the id field listed in the pack’s manifest files.

For more information, see Building Component Packs.