Composing in Skuid: a Deep Dive¶

What Skuid components, and how do you use them?¶

Components are 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:

• Layout
• Data
• Advanced
• Visualizations

What are Skuid models, and how do you use them?¶

Skuid models connect to data sources and provide their data to Skuid components.

• Create a model and use model conditions to limit which records are pulled from the data source and displayed in Skuid components.
• Use model actions to establish consistent workflows when a model-level event—such as saving or updating the model—occurs.
• Special types of models:
  • Aggregate models collect and group data. (Salesforce and SQL data source types only.)
  • UI-only models and fields can be used to work with data created in runtime or to store temporary values, but does save to a data source’s system.

Using components and models to create pages¶

Put it all together to make satisfying user experiences.

• Use principal and dependent pages to create consistent experiences across pages
• Work with design systems
• Use automatic and customized filters with the Filter Set component
• How to leverage display logic

Use actions and merge syntax for dynamic pages¶

Orchestrate actions that are launched when certain elements on the page change or when an end user triggers an action.

• Learn the ins and outs of using the Action Framework to configure multiple actions.
• Many Skuid actions are facilitated using merge syntax—special markup used to call data from models, data sources, the page itself, and more. Learn about syntax, templates, and dot notation to wield the curly brackets for maximum effect.