Documentation

This is the early access documentation preview for Custom Views. This documentation might not be in sync with our official documentation.

Component groups

Learn how to reuse UI element combinations across page versions.

Component groups let you to create sets of UI elements that you can use across multiple pages on your website.

For example, you can use component groups if you use the same layout for the header and footer of your pages.

When you add a component group to a page, you can't edit any UI element in the component for that page only. If you need to apply any changes, you must edit the component group but changes will be applied on all pages where the component group is used.

When working in the component group builder, you can start a discussion by using the comment feature on the top menu bar.

Create a component group

To create a component group, follow these steps:

  1. From the Studio home page or from the left menu, go to Templates > Component groups.

    The Component groups pane in the Templates area

  2. Click + New component group: the Create new component group dialog opens.

  3. In the Component group name field, enter the name of the component group.

  4. If you need to add a data source to the component group, click + Add data source filter in the Data source section: the data source filter editor opens.

  5. Click Save: the component group is saved in the Component groups pane.

  6. Click the Edit icon related to the component group you created: the component group builder opens.

  7. Edit the component group as you need. Make sure you only add the UI elements that you want to use across multiple pages on your website.

    The component group builder with a sample component group

  8. To preview the component group click Preview. Then, click Save. In the Save component group? dialog, click Save to confirm the saving. The component group is now available in the page builder.

If in the page builder you use a component group that contains errors, you will not be warned of the errors. Therefore, we recommend checking the component groups regularly to detect and correct any errors.

Edit a component group

Edit a component group layout

To edit the layout of a component group, follow these steps:

  1. From the Studio home page or from the left menu, go to Templates > Component groups.

  2. Click the Edit icon related to the component group to edit: the component group builder opens.

  3. Edit the component group as you need.

  4. To preview the component group click Preview. Then, click Save. In the Save component group? dialog, click Save to confirm the saving.

Changes will update all page versions where the component group is used. Before saving any changes to a component group, make sure you preview your page.

Edit a component group settings

To edit the settings (name and data source filters) of a component group, follow these steps:

  1. From the Studio home page or from the left menu, go to Templates > Component groups.

  2. Click the More icon related to the component group to edit.

  3. Click Settings: the Component group settings dialog opens.

  4. Edit the settings as you need. Then, click Save.

Duplicate a component group

To duplicate a component group, follow these steps:

  1. From the Studio home page or from the left menu, go to Templates > Component groups.

  2. Click the More icon related to the component group to duplicate.

  3. Click Duplicate: the Duplicate component group dialog opens.

  4. Edit the component group name. Then, click Save: the component group is saved in the Component groups pane.

  5. Click the Edit icon related to the component group you created to edit it in the component group builder.

Delete a component group

To delete a component group, follow these steps:

  1. From the Studio home page or from the left menu, go to Templates > Component groups.

  2. Click the More icon related to the component group. Then, click Settings: the Component group settings dialog opens.

  3. In the Component usage section, make sure the This component group isn't used on any pages message is displayed. Then, close the Component group settings dialog.

    If you delete a component group that is used on your pages, it will be removed from those pages and this might break them. Make sure your component group isn't used on a page before deleting.

  4. Click the More icon related to the component group to delete. Then, click Delete: the Delete component group forever? dialog opens.

  5. In the text box, enter DELETE. Then, click Delete.