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
You can add a property to an item in the CMS dashboard (item list) or CMS item detail page.
Type property name
Select a property type or relation model
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
You can add from + Add Property at the button of the right side of the screen.
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
Text property can be used for strings to display in the text box and URL strings to be used in link settings.
When adding a text property, you have to select either wrap or unwrap setting.
If you select wrap, you can press Enter while holding down shift, option or ⌘ key (for windows, shift and alt key) in the properties to wrap text.
You can change the wrap and unwrap settings in the property setting. Changing from wrap to unwrap doesn't automatically remove the line breaks. The <br> will appear at the line break in the CMS dashboard, and the line break will remain in the editor, preview, and publish site. If you manually remove this <br> in the CMS dashboard, the line breaks will be removed.
Text property can be used for link settings as in the picture below. Within a dynamic page and dynamic list, you can set a link on an item-by-item basis.
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.
Color property can only be applied to fill of box and text color.
You can't edit The favorites palette in the CMS dashboard, but you can select colors from the favorites palette 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.
Go to a page and place a text box from the Add panel on the left screen.
Click on the text field on the box settings panel on the right side of the screen. Choose Title from the category property.
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,
Go to a page where you want to place tags and place a text box there.
Click the Tags property in the text field of the box settings panel.
Set a link to a page.
Unlike the single-select property, the multi-select property will be displayed in a list.
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.
You can edit properties from the item list and item detail screen.
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.
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.