Components

What is a Skuid component?

Components are drag-and-drop elements that define the function and visual structure of your app. Adding components to your page allows you to interact directly with the data you connect to through your Skuid models and data sources.

Skuid components are organized into 4 categories within the App Composer based on end-user needs:

Add components to the canvas

Click the Components icon in the App Elements Pane. Doing so will present a list of components divided into the 4 previously mentioned categories.

Clicking a component within each subset will provide a brief description of the component’s functionality in the Properties pane.

Add components to your pages by clicking and dragging the component into the desired position on the canvas or by simply double clicking the component.

Note

Double clicking will add the component at the bottom of the canvas. You can reposition components in the canvas by clicking and dragging them to a new location.

Component properties

Each component has properties that allow you to select how the data in the component displays, how and when data renders, and the visual appearance of the component.

Once a component has been placed, clicking the component within the canvas will present component properties in the Properties pane of the App Composer Palette. To adjust each property, click on the corresponding tabs within the Properties pane. Doing so will present each component’s editable features.

All components offer a rendering property tab to give you full control over when certain components—and pieces of data—appear in your Skuid app.

Beyond rendering, properties differ from component to component based on primary functionality. For information on component-specific properties, please refer to the documentation content for the individual component.

Using the component reference guide

Skuid’s component reference guide is designed to give you all the information you need to understand how components operate and when to use them.

Throughout this guide, each individual component section is accompanied by an overview of the component’s core functionality, the basic and advanced properties that you can adjust, and an explanation of the component’s primary usage.

The usage descriptions outline some of the most common use cases for components. Use these to familiarize yourself with component functions and their applications within your Skuid apps.

Component packs

Component packs allow you to use custom components—built by you or another developer—within your Skuid site. To learn more about using component packs, see the Manage and Upload Component Packs topic.

Building custom components

Skuid’s standard components cover a broad spectrum of functions that can meet just about any business need. Part of what makes Skuid so powerful, though, is the ability to design and build your own custom Skuid components.

Custom components leverage Skuid’s Javascript API to display and edit data, and build very specific custom workflows. Building a custom component requires development experience and understanding of core concepts, including:

  • The core Javascript objects that work to display a Skuid component:
    • skuid.componentType object
    • skuid.component.Component object
    • skuid.builder.core.Builder object
  • Why Skuid uses these special objects to create custom components
  • How to use optional builder objects

Our custom component documentation offers in-depth explanations of these core concepts and the steps required to start building your own custom components.

Once you’ve mastered the basics of building Skuid components, you can then learn about creating component packs to add your custom components to Skuid’s standard library.