Article Teasers

With release-2021-03 a simpler way to setup teasers is introduced. It is based on Includes and the possiblity to define the UI with a paramsSchema.

This guide assumes that you are familiar with the possibilities to register an Include Service and how to use it in a Component.

Include Service

Here is an example includes configuration to consider for the editable teaser usecase:

  name: 'teaser',
  // this will render a UI in the document editing sidebar to let the User select a document with
  // the contentType `regular` to link to.
  paramsSchema: [{
    handle: 'article',
    type: 'li-reference',
    config: {
      referenceType: 'document',
    ui: {
      label: 'Teaser'
  rendering: {
    type: 'function',
    render (params, options) {
      // contains the id of the linked document
      // you want to render the teaser here. Either as HTML or use the possibility of Embedded Documents

Teaser Component

  name: 'teaser-include',
  label: 'Teaser',
  iconUrl: 'URL to an SVG icon',
  directives: [{
    name: 'teaser',
    type: 'include',
    // refer to the include service handle
    service: 'teaser',
    // extend the config for li-reference type input
    paramsSchemaExtension: [{
      // refer to the handle of the services paramsSchema property
      name: 'article',
      // configure base filters for the article search modal
      config: {
        // only document of contentType 'regular'
        contentType: ['regular'],
        // only published documents
        published: true
  html: `
    <div doc-include="teaser">
      <div>Link an Article</div>