Components

The Ink component pack is the next generation of Skuid components. Flexible, responsive, scalable, and accessible, Ink brings crisp, modern themes to the Skuid page with components that are designed to make it quicker and easier for app builders to create intuitive and engaging user experiences.

Ink is not an “update” to Skuid’s original components, but a totally new component pack. While many Ink components share a name and purpose with their counterparts in the original component pack—for example, the Table component—be aware that Ink components, even those similarly named, have unique properties and functionality.

Warning

Components from the Ink component pack are not interchangeable with those from the Original component pack.

What are Ink components?

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

Double-click models to add configured components quickly

Want to quickly add a Table component or Form to your page? Want that component to have all the fields of your model, instantly? Create a model, add fields to it, and then double-click that model.

Skuid will ask if you want to create a Form 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, modals, and panels.
  • Collaboratively sharing or debugging component configurations by sharing XML.
  • Building highly stylized container components, such as Wrapper and 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 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.