Directive Models

Accessing Directives

Directives are always part of a ComponentModel. On a component you can access the directives through the directives property which is a DirectiveColletion.

// get hold of a specific directive
const textDirective = componentModel.directives.get('title')

// loop through all directives on a component in the order
// they are defined.
for (const directive in componentModel.directives) {

// loop through each image directive on a component
componentModel.directives.eachImage((imageDirective) => {

// Get the number of directives of a certain type
// on a component.
// Possible types: 'editable', 'image', 'html', 'link', 'include'
const count = componentModel.directives.count('include')

Directive Types


type: ’editable' component template attribute: doc-editable

textDirective.setContent('Lorem Ipsum dolorem...')
const content = textDirective.getContent()


type: ‘image’ component template attribute: doc-image

Minimal Example:

imageDirective.setContent({url: ''})

Most of the time you will want to have optimized delivery with an image service. For this width, height, mimeType as well as the imageService itself have to be specified when setting an url.

Real World Example with image service:

  url: '',
  width: 400,
  height: 300,
  mimeType: 'image/jpeg',
  imageService: '',
  crop: {x: 100, y: 50, width: 200, height: 200},
  origins: [{name: 'uez463x8ie39', identifier: 'hugo'}],
  focalPoint: {x: 234, y:123}

// Update the crop
imageDirective.setCrop({x: 0, y: 0, width: 250, height: 250})

Please notice that the (optional) focalPoint property needs to be within the image width and height bounds. However, the focal point is not necessarily related to the crop. The focal point gives the automatic cropping capabilities a hint what to include in the crop. But the user may still adjust the crop manually which ignores, but still remembers the focal point.


  url: '',
  width: 400,
  height: 300,
  mimeType: 'image/jpeg',
  imageService: '',
  crop: {x: 100, y: 50, width: 200, height: 200},
  origins: [{name: 'uez463x8ie39', identifier: 'hugo'}]

// Update the crop
videoDirective.setCrop({x: 0, y: 0, width: 250, height: 250})


type: ‘html’ component template attribute: doc-html

  html: '<div>Moby Dick</div>'

type: ’link' component template attribute: doc-link

  href: '',
  target: '_blank'

Allowed values for target: ‘_blank’, ‘_self’, ‘_parent’ or ‘_top’


type: ‘include’ component template attribute: doc-include

  service: 'list',
  params: {foo: 'bar'}

// Retrieve the params set on a directive (this includes defaultParams
// specified in the component configuration if they have not been overwritten).

// setParams overwrites all parameters of this include.
includeDirective.setParams({foo: 'bar'})

// addParams merges the specified params with the existing ones
// (including any default params that may have been set in the component
// configuration).
includeDirective.addParams({foo: 'bar'})