Web components

Web component model

Web CMS Components are the building block of the pages that are displayed for the end user. Support is provided for a user friendly way of manipulating the content of those components via the back end.

WebCmsComponentType

WebCmsComponent

WebCmsComponent

persisted entity

WebCmsComponentModel

WebCmsComponentModelService and WebCmsComponentModel WebCmsComponentType

The persisted entity is implemented by WebCmsComponent, but usually you will want to work with the WebCmsComponentModel. The latter represents the entire strongly typed model ready for rendering, whereas the former only has the raw attributes.

converted to a WebCmsComponent by a WebCmsComponentModelWriter converted from a WebCmsComponent by a WebCmsComponentModelReader

include::chap-web-components-base-types.adoc[]

Activating component support

Any WebCmsObject - this includes all assets and components themselves - can have web components linked to it. Enabling components for WebCmsObject implementations: wire WebCmsObjectComponentViewsConfiguration: registerComponentsAssociation

Rendering components

Creating shared web components

Table 1. Shared web components
Name Type Mandatory Description Default Value

Component Type

Component Type

Yes

Type of the component, selectable from the list of predefined component types.

None

Title

String

Yes

The name of the component. Displayed in the admin section.

None

Name

String

Yes

The unique identifier with which you can approach the component in your Thymeleaf template. Should be unique, and can be auto-generated based on Title

None

Using components in your controllers

A WebCmsComponentModelHierarchy is attached to the ApplicationContext of the current request and allows components to be looked up in the various scopes. By default the global and domain scope are registered. Using the WebCmsComponentModelHierarchy, it is possible to register additional scopes, attach/replace/remove components to a scope and define aliases for a scope.

The WebCmsComponentModelHierarchy is used to retrieve components in the thymeleaf dialect and is used to search for components in various scopes.

Note: The WebCmsComponentModelHiercharchy is a request scoped bean, so it can simply be autowired. It should however not be wired inside a controller handler method as it has a parameterless constructor.

Example of registering a custom component to the asset scope:

@Controller
@RequiredArgsConstructor
public class MyController {

  private final WebCmsComponentModelHierarchy componentModelHierarchy;

  @WebCmsArticleMapping(articleType="blog")
  public void myHandler(){
    WebCmsComponentModelSet componentModelSet = new WebCmsComponentModelSet();
    TextWebCmsComponentModel text = new TextWebCmsComponentModel();
    text.setContent("some text");
    text.setName("my-custom-component");
    componentModelSet.add(text);
    componentModelHierarchy.registerComponentsForScope(componentModelSet, "asset");
  }
}

Placeholders

WebCmsPlaceholderContentModel

include::chap-web-components-content-markers.adoc[]

include::chap-web-components-defining-component-types.adoc[]

Importing components

Single value importing

The TextWebCmsComponentModel and ImageWebCmsComponentModel support updating existing components using a single attribute value.

This is the same as assigning the following property:

Component type Property

TextWebCmsComponentModel

content

ImageWebCmsComponentModel

image
Example: the following 2 import blocks would be equivalent
assets:
  article:
    - title: My article
      wcm:components:
        body:
          content: Update the article body text
assets:
  article:
    - title: My article
      wcm:components:
        body: Update the article body text