Component Sets are used for creating Digital articles in Studio and define which components a user can make use of and how these components behave.
This article describes how to set up Component Sets.
Note: It is assumed here that you are familiar with the concept of configuring components for a Digital article.
A Component Set is used as one of the ways of configuring components in a Digital article.
It defines the following:
- The component types that a user can make use of in a particular article such as a body component, an image component, a custom component, an interactive component, and so on.
|
Example: See this as a template: only include those components that form the basis of the type of story that it is aimed for, such as a news article, a blog post, and so on. Background info: When a Digital article is created it will be based on a Component Set. By setting up multiple Component Sets that each have a different configuration, you can quickly choose the Component Set that contains only those components when creating these templates. This make sure that the user who creates the new article immediately has all required components available without having to add them manually. |
- The functionality of a component type such as if it can be converted to another component type and if so which one, and if it can be made part of another component.
Example: When a component is selected in the Digital editor, one of the options in the Properties panel makes it possible for users to change it to a different type. If certain components are not allowed to be part of an article, converting them can be restricted.
- The properties that appear in the Properties panel for each component type.
Example: This gives you control over which properties users can and cannot modify for a component in the Properties panel of the Digital editor.
- The default look and feel of a component.
Example: Use this to match the appearance of the component to the styling of the publication in which it is used.
- The appearance of the Component window that is used for adding a component to an article: the name and icon of a component, how they are grouped and how the group is named.
Figure: The Component window in a Digital article is used for adding components to the article. It shows all component types that can be added to the article, grouped by component type.
Example: Use this to match the names and icons to the workflow of your Brand, to not show components that are not used for the type of article that is created, and so on.
The following code shows the components that have been made available and their definitions (the code has been shortened to make it easier to read):
{
"name": "dynamic-property-captions",
"description": "Dynamic Property Captions example",
"version": "1.9.0",
"defaultComponentOnEnter": "body",
"components": [ <- This section defines the available components
{
"name": "body", <- The component name
"label": { "key": "COMPONENT_BODY_LABEL" },
"icon": "icons/components/body.svg", <- The component icon
"properties": ["drop-capital", "style", ], <- The component properties
"countStatistics": true
},
{
"name": "container",
"icon": "icons/components/container.svg",
"selectionMethod": "handle",
"allowNesting": "one-level",
"label": { "key": "COMPONENT_CONTAINER_LABEL" },
"properties": ["style", "language", "position", "background-color"]
},
...
"groups": [ <- This section defines the groups in the Component selector
{
"label": { "key": "GROUP_TITLE_LABEL" },
"name": "title", <- the title of the group
"components": ["title", "subtitle"] <- the components in the group
},
{
"label": { "key": "GROUP_TEXT_LABEL" },
"name": "text",
"components": ["intro", "body"]
},
...
],
"componentProperties": [ <- This section defines the values of the properties
{
"name": "style", <- The name of the property
"label": { "key": "PROPERTY_VARIANT_LABEL" },
"control": {
"type": "select", <- the type (here a list)
"dynamicCaptions": true, <- Defines if the value names can be customized in the UI
"options": [ <- This section lists the available properties
{
"caption": { "key": "PROPERTY_STYLE_DEFAULT_OPTION" }
},
{
"caption": { "key": "PROPERTY_VARIANT_STYLE_OPTION", "values": { "0": "1" } },
"value": "_option1"
},
{
"caption": { "key": "PROPERTY_VARIANT_STYLE_OPTION", "values": { "0": "2" } },
"value": "_option2"
},
{
"caption": { "key": "PROPERTY_VARIANT_STYLE_OPTION", "values": { "0": "3" } },
"value": "_option3"
},
]
},
"dataType": "styles"
},
"conversionRules": { <- This section defines if components can be converted into other component types
"body": { <- This body component can be converted into a title and headline component
"title": "auto",
"headline": {
"type": "simple",
"map": {
"title": "text"
}
},
"slideshow": { <- This slideshow component can only be converted to an image component
"image": {
"type": "from-container",
"container": "slideshow"
}
},
...
"shortcuts": {
"conversionComponents": [
"product",
"title",
"subtitle",
"headline",
"hero",
"body",
"footer",
"quote",
"crosshead",
"image"
]
},
"scripts": ["scripts/vendor.js"]
} How it works
A Component Set is a set of files containing the configuration of the component types, the Component window, and the Properties panel. These files are bundled in a ZIP file.
Component Sets are uploaded and managed through the Management Console of Studio.
Multiple Component Sets can be set up, each with their own configuration.
Example: One Component Set could be set up containing only those components that are needed for a news article, another for a blog post, and so on.
A Component Set is assigned to an article template; each template can have only one Component Set assigned.
When a Digital article is created, it is based on an article template. The Component Set that is assigned to the template is used to define the components that a user can make use of in that article. Using this method, controlling the available components for a Digital article can be done for each individual article.
Example: A Component Set is created containing only a Title, Header, and Body component. A Digital article template is created named 'Basic article'. When a user now creates a new Digital article based on the 'Basic article' template, the created article only contains a Title, Header, and Body component.
A default Component Set containing default components is provided by WoodWing as part of Studio. Additional sets can be created as needed and can also include Custom components and interactive components.
An uploaded Component Set can be replaced by a new set. Any article (template) that made use of the previous set will automatically have the new set assigned.
The process
The process involves the following steps:
- Creating a Component Set
- Uploading the Component Set to Studio
- Assigning the Component Set to an article template
- Testing the setup
1. Creating a Component Set
Instructions for creating a Component Set can be found on Github: https://github.com/WoodWing/csde-components-boilerplate.
The Component Set will be created as a ZIP file.
Follow the provided documentation to do one or more of the following:
- Define the component types that the user can make use of in a particular Digital article. Use the default Component Set as a basis and/or create custom or interactive components as needed.
- Define how the component types should be grouped in the Component window, how to name each group, and which icon to use for each component type or property.
- Create as many Component Sets as needed.
Styling the components
Styling the components of a Digital article is done by applying a Style to the article. In this style, the styling for each component type is defined.
When a component that has been added to an article needs to be styled in a different way than other components of the same type in the article, a predefined style can be applied in the form of a 'Style variant'. This is done by choosing the variant in the Properties panel for the component.
Figure: A list of Style variants for a component (here the Intro component).
Defining Style variants is also done in a Component Set. (See the description for the 'select' control.)
Changing the names of options in lists
Properties that are defined as type 'select' appear as a list of options to choose from in the Properties panel.
Instead of defining these names in the Component set, a component can also be configured in such a way that changing these names can be done through the Look and Feel panel in Studio. This feature is known as 'Dynamic captions'. Changing the names can be done on a per component basis: for the same property you can configure different captions, for example for a body or intro component.
Step 1. Define the property as a list and enable dynamic captions:
"type": "select",
"dynamicCaptions": true,Step 2. Define the options that should appear in the list.
|
Example: Here, a list of options are defined for a property named Style: |
Step 3. Once an article based on the Component set is available, access the Look and Feel panel and click the Edit icon of the style that is applied.
Step 4. Click the Rename icon next to the component selection list.
The Rename property captions panel appears.
Step 5. From the property list at the top, choose the property for which you want to rename the options in the list.
The fields for the available names (captions) for the selected property appear.
Step 6. Change the names as needed and when done, click Apply.
Using custom styles
The Component set can be configured to provide the Digital editor user the capability to define custom styles which are available in the custom publish channel when publishing the article.
These can be used as input for styling the article properly, specific for the publish channel.
Editing can be done through the Style editor in the Look and Feel panel where they appear as tabs.
For more information, see the boiler plate.
Note: Currently, the only supported format is JSON. Optionally, default content for the custom style can be set through the Component set.
2. Uploading the Component Set to Studio
To make a Component Set available in Studio, it needs to be uploaded. This is done in the Component Set page of the Management Console.
Step 1. In Studio Server, access the Management Console by clicking Integrations > Studio.
Step 2. In the menu, choose Component Sets.
Figure: The Component Sets page in the Management Console of Studio.
Step 3. Do the following:
- Click Add New to add a new Component Set.
- Modify an existing Component Set by renaming, disabling or deleting the current set, or by uploading a new set.
|
Notes:
|
3. Assigning the Component Set to an article template
Making the components that are defined in the Component Set available in a Digital article is done by assigning the Component Set to an article template. See Setting up article templates for Studio.
Note: Once a Component Set has been assigned, it cannot be replaced by another. This also means that once an article template is assigned to a Conversion Rule, it cannot be changed by another article template.
Tip: To assign a different article template to an existing Component Set, duplicate the Component Set by using the Create Duplicate button and assign a different article template to the new Component Set.
When the Digital article is created, it is based on the article template and will only contain those components that are defined in the assigned Component Set.
4. Testing the setup
Test the setup by creating a new Digital article.
On opening, it should contain the components that were added in the template that the article is based on.
Click the plus-sign to open the Component window and verify that all groups and components are present as configured.
Add one or more components and verify in the Properties panel that their properties are as configured.
Comment
Do you have corrections or additional information about this article? Leave a comment! Do you have a question about what is described in this article? Please contact Support.
0 comments
Please sign in to leave a comment.