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.

Drag and drop models to add configured components quickly

Want to quickly add a Table component or Field Editor to your page? Want that component to have all the fields of your model, instantly? Create a model, add fields to it, and then drag and drop that model onto the canvas.

Skuid will ask if you want to create a Field Editor or a Table component. When you make a selection and click Create Component, Skuid will add the desired element to the page, populated with all the fields that were added to that model. Now, move fields around, delete fields, set up columns, and configure the component as needed.

You can use any model in the Models tab to add components in this manner.

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.

Using Component Templates

Note

Templates are currently only available for the Deck component.

Within components that support them, choosing a component template will nest a specific set of components within the current component, allowing for a quick and easy component configuration. Once a template is applied to a component, it—and any nested components that have been added within it—can be edited as normal.

Drag and drop the component onto a page, then click Choose a template on the component’s body, which opens a set of selectable template options.

Note

  • The Choose a Template link is only available when the component has no other components nested within it.
  • All components created by a template inherit the model associated with the parent component.

Change or delete a template

To change to a different template, remove all child components within the component.

Note

If all nested components are contained within a single Responsive Grid—as with the Deck templates—you can simply click fa-times-circle Remove on the Responsive Grid containing them to quickly remove all the child components..

Once you’ve removed all components within the container component, click Choose a Template on the body of the component to choose a new template.

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.