Skip to main content
More in Learn

Components

All the shapes in Crystallize consist of a collection of components. You can add as many components as required to your shapes.

Querying a Specific Component

Any component can be queried in one of two ways: using the components field or using the component field. The former retrieves every single component contained within the shape whereas the latter fetches the specific components whose id you have specified. Let's first take a look at how each component can be fetched individually.

Single Line

The single line component is one of the most commonly used components. Its recommended use is for when you have to add short entries such as a name or a title. You can query this component as follows:

Rich Text

The rich text component gives you access to common formatting options such as bold, italics, lists, blockquotes, etc. Rich text returns its data in three formats: text, HTML, and JSON. Generally, you would just retrieve one of these. The example query below retrieves all three.

Images

Once you upload an image to an images component, Crystallize optimizes the image size and also generates image formats such as WebP and AVIF. The following query shows how to fetch images components along with their associated URLs and variants. The variants include the image in different sizes, and each size has multiple image formats.

To grab only the first image, you can use the firstImage field. Using this, you can also ask for other information such as altText, caption, metaProperty, createdAt, etc.

Switch Component

The switch component contains a boolean value, either true or false. In the demo tenant, we use this component for blog posts to set whether a post is free for the user to view or not. It can be queried as follows:

Grids

In Crystallize, you can create any number of grids to display your items in a visually pleasing manner. These grids are then easily editable. To fetch a grid, you can use the grids type. In the following query, we are simply fetching the items contained within a grid. To fetch the layout, you can use the layout field in columns.

Videos

To fetch a videos component, the VIdeoContent type is used. You can then retrieve the video and its related information such as the title, thumbnails, etc. as follows:

Properties Table

The properties table contains key-value pairs that can be fetched in the following way:

Paragraph Collection

The paragraphs contained in a paragraph collection component can be fetched using the ParagraphCollectionContent type. You can then fetch all the data within those paragraphs using the ParagraphContent type. The following query gets the rich text content in the paragraph. You can also fetch the title, images, and videos.

Numeric Content

The numeric component can be fetched using the NumericContent type. This type contains two values: the number as well as its defined unit.

Location

The location component can be fetched using the LocationContent type that returns two values: latitude and longitude.

Item Relation

If you have added the item relation component to an item, you can fetch the related items by using ItemRelationsContent. Then you can fetch more information about said items using the fields mentioned in the Query Fields section. The following query fetches all related items and the names of those items.

Date

The date component can be fetched using the DatetimeContent type. It simply returns the selected date and time.

File Component

File components store one or more files that haven’t been transcoded or transformed in any way. The code sample below queries a specific component ID and, for each file it contains, returns the URL where it’s stored (url), its identifier (key), user-defined title (title), and size in bytes (size).

Choice Component

The choice component always returns the value you've chosen. It can be fetched using the ComponentChoiceContent type that returns the selected component which can be further queried using the specific component type. Below, discount can either be a number or a percent value. Since we've chosen the percent value for this item, that is what is returned.

Content Chunk Component

The content chunk component can have multiple components within it. To fetch these, the ContentChunkContent type is used. Once you have the name, you can grab the content similar to what we did in the section above.

People showing thumbs up

Need further assistance?

Ask the Crystallize team or other enthusiasts in our slack community.

Join our slack community