You can add ancillary information to an item called "properties."

This article introduces the types of properties you can add and how to add/edit/delete them.

Read How CMS data works to learn more about a model, item, and collection.


  1. Adding properties

    1. From item list

    2. From item detail screen

  2. Property type

    1. Text property

    2. Image property

    3. Boolean property

    4. Number property

    5. Color property

    6. Reference property

      1. Single-select

      2. Multi-select

  3. Edit/Delete property


1) Adding properties

You can add a property to an item in the CMS dashboard (item list) or CMS item detail page.

  1. Type property name

  2. Select a property type or relation model

  3. Click Add

Because property settings are made per model, when you add or remove properties, changes will be reflected for all items in the same model as well.

a) From item list

Scroll right to the end, and you will see the "+" button.

Click the button, and then click on + Add Property to add a property.

b) From item detail screen

Post type

You can add from + Add Property at the button of the right side of the screen.

Other types

You can add from + Add Property at the button of the property list.

2) Propety type

There are six property types, five property types, and reference property. Each property has its proper usage.

a) Text property

You can add text information to each item.

Text property can be used for strings to display in the text box, URL strings to be used in link settings, etc.

b) Image property

You can upload images to each item.

Connect to an image box on the design editor to display the uploaded images.

c) Boolean property

You can select on/off (true/false) by toggling. It's off (false) in default.

You can change styles or hide elements that have boolean properties set by using the following functions:

For example, as in the image below, the boolean property 'New' is set to items. It's also set the conditional visibility to display only those items with the property in the dynamic list.

d) Number property

Only numbers can be set to this property. Same as text property, the property can be used to display numbers in the text box.

You can also use number property to styles such as margin, height, width, font size, etc.

e) Color property

Set color code as property from a color graph, or enter RGBA values and HEX codes and click Apply.

The favorites palette isn't available here, yet you can use colors from the favorites palette colors that have been added in the design editor.

f) Reference property

If you set any model as a property item, you can use one or more items to refer as ancillary information.

When you add a reference property, you need to select either single-select or multi-select.

i ) Single-select

Only one item can be added to the model and displayed in the design editor.

For example, if a blog has three categories and you want to display categories for each post, you should have a post type model and category type model.

You can add category model items to the article model as single-selected reference properties. Then choose one category for each blog post item.

Next, go to the design editor to place a text box and select CMS property to display the category title dynamically. The detailed steps are as follows.

  1. Go to a page and place a text box from the Add panel on the left screen.

  2. Click on the text field on the box settings panel on the right side of the screen. Choose Title from the category property.

  3. Set a link to a page.

Use single-select when you want to add, and display one property for each item.

ii ) Multi-select

Multiple items can be added to the model and displayed as a list in the design editor.

For example, if you want to set several tags for each blog post, add a model which manages tags and refer to this model in the post type model as multi-select. Then add tags to items in the post-type model.

In the design editor,

  1. Go to a page where you want to place tags and place a text box there.

  2. Click the Tags property in the text field of the box settings panel.

  3. Set a link to a page.

Unlike the single-select property, the multi-select property will be displayed in a list.

Note

  • You can't change the type of the reference property from multi-select to single-select as the multi-select property is displayed in a list and the single-select property is not.

  • Therefore, if you want to switch the types of reference property: multi-select and single-select, you have to create a new one.

Edit/Delete property

You can edit properties from the item list and item detail screen.

Item list

The setting modal will appear when clicking on a property name. You can change the property name from a pencil icon next to the property name and can delete the property by clicking Delete.

Item detail screen (post type model)

The button will appear when hovering over a property name on the right side of the screen. Click the button, then click the pencil icon to edit the name. Delete the property by clicking the delete button there.

Item detail screen (other model types)

A button will appear when hovering over the property. Click the button to access the setting modal, and you can edit the name from the pencil icon. Delete the property by clicking the delete button there.

Note

  • Because property settings are made per model, when you delete properties on the item detail screen or item list, changes will be reflected for all items in the same model as well.

Did this answer your question?