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 the shapes. The image below displays the list of components as well as the components contained by the Article shape defined in the demo tenant.

Article Shape

Querying a Specific Component

Any component can be queried in 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 component. 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 components 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.

Image

Once you upload an image, Crystallize optimises the image size and also generates image formats such as WebP and AVIF. The following query gets the image components, its url and the 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 has a boolean value - either true or false. In the demo tenant, we use this component for the 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 grid 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.

Video

To fetch a video, the VIdeoContent type is used. You can then retrieve the video and its related information such as the title, the 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. Similarly you can also fetch the title, the images and the videos.

Numeric Content

The numeric content components can be fetched using the NumericContent type. This type contains two value - the numeric value as well as its defined unit.

Location

The location component added to any item can be fetched using the LocationContent type that returns two values - the latitude and the longitude.

Item Relation

If you have added the item relations component to an item, you can fetch the related items using the ItemRelationsContent which returns the items. 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 then the name of those items.

Date

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

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 queries 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 we 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