Components

What is a Skuid component?

Think of components as the building blocks of a Skuid page, drag-and-drop elements that define the function and visual structure of your app. Adding components to the page allows users to interact directly with the data the page connects to through Skuid models and data sources.

Different types of components do different things: some manage the way the page is laid out, some display data on the page, and some add elements, like images or charts, that help visualize data. In the Composer’s Elements pane, Skuid’s components are organized into categories based on the component’s function:

Add components to the canvas

Add from the Elements pane

Click the Components icon in the Elements pane to present a list of components divided into the four categories. Clicking a component within each subset provides a brief description of the component’s functionality in the Properties pane.

Add components to your pages by doing one of the following:

  • Click on the component from the Elements > Components pane, then drag and drop it into the desired position on the Skuid Page.
  • Double-click the component from the Elements > Components pane. This will add the component at the bottom of the canvas. (You can reposition components by clicking and dragging them to a new location.)

Add from the model

There is an additional way to add a Table or Field Editor component to a page:

  • Double-click a model and, in the Create Component dialog box, select Table or Field Editor, then click Create Component.

You can use any model in the Models tab to add a Table or Field Editor in this manner.

Once selected, Skuid adds the desired component to the page, populated with all the fields included in that model. Move fields around, delete fields, set up columns, and configure the component as needed.

Cut, Copy, Paste, and Clone Components

To save time building new pages, you can cut, copy, paste, and clone components within a Skuid page. These features are especially useful when:

  • Quickly creating multiple components with nearly identical properties.
  • Moving components between a page’s main area in the canvas and interior elements, including drawers, popups, and panels.
  • Collaboratively sharing or debugging component configurations by sharing XML.
  • Building highly stylized container components, such as Wrapper and Responsive Grid, that you want to use multiple times in a given page.

Using Cut, Copy, Paste, and Clone

Each time a component is cut, copied, or cloned, all selected models, fields, Action Framework actions, and modified properties carry over to the new component.

To use cut copy, paste, and clone functions, select a component anywhere in the canvas and use any of the following shortcuts:

  • Cmd/Ctrl + Shift + C: Copy the component’s XML

  • Cmd/Ctrl + C: Copy the component for pasting within the canvas

    Cmd/Ctrl + D: Clone selected component

  • Cmd/Ctrl + X: Cut selected component

  • Cmd/Ctrl + V: Paste a copied or cut component

Note

A dashed border will momentarily appear around a selected component to indicate it has been copied.

Cloned components are automatically inserted into the canvas below the original component. Pasted components appear below the currently focused position in the canvas. These components can then be repositioned by dragging and dropping, or modified based on their standard properties.

Components nested within container components (like the Wrapper) may also be copied or cloned.

Note

Only whole components may be cut, copied, pasted, and cloned. Pieces of components—such as tabs or buttons—cannot be cut, copied, pasted, or cloned.

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 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.