Application Launcher

You're viewing version 8.1 of this page. .

A twig file can be used to render a custom component. All field values defined in the custom component form are accessible via the field variable and all dropzones via the dropzones variable.

Important

Field names will be converted to all underscore to be compatible with Twig. Ex: plain-text-area will be
{{ field.plain_text_area }}

Dropzones names will follow the pattern dropzone_[uuid-of-the-dropzone]. You can find the UUID of a dropzone in the canvas property of the form json.
For the example bellow, to render to dropzone, use
{{ dropzones['dropzone_f05eff15_335f_4a16_8cdf_e84c8601e345'] }}

{
  "canvas": [
     {
      "type": "item",
      "uid": "component-drop-zone-placeholder",
      "title": "Component drop zone",
      "status": {
          "collapsed": true
      },
      "iconColor": "content",
      "uuid": "f05eff15-335f-4a16-8cdf-e84c8601e345",
      "parentUid": "root"
    }
  ],
  "disabledNodes": []
}

To add a Twig template to your custom component, add a `template` property to the YAML file and specify the path to the Twig file.

Only one Twig template is allowed per custom component.

You're viewing version 8.1 of this page. .

A twig file can be used to render a custom component. All field values defined in the custom component form are accessible via the field variable and all dropzones via the dropzones variable.

Important

{
  "canvas": [
     {
      "type": "item",
      "uid": "component-drop-zone-placeholder",
      "title": "Component drop zone",
      "status": {
          "collapsed": true
      },
      "iconColor": "content",
      "uuid": "f05eff15-335f-4a16-8cdf-e84c8601e345",
      "parentUid": "root"
    }
  ],
  "disabledNodes": []
}

To add a Twig template to your custom component, add a `template` property to the YAML file and specify the path to the Twig file.

Only one Twig template is allowed per custom component.

You're viewing version 8.1 of this page. .

A twig file can be used to render a custom component. All field values defined in the custom component form are accessible via the field variable and all dropzones via the dropzones variable.

Important

{
  "canvas": [
     {
      "type": "item",
      "uid": "component-drop-zone-placeholder",
      "title": "Component drop zone",
      "status": {
          "collapsed": true
      },
      "iconColor": "content",
      "uuid": "f05eff15-335f-4a16-8cdf-e84c8601e345",
      "parentUid": "root"
    }
  ],
  "disabledNodes": []
}

To add a Twig template to your custom component, add a `template` property to the YAML file and specify the path to the Twig file.

Only one Twig template is allowed per custom component.
Twig template cannot be used in conjunction with the html property.

Various twig functions are available to render field type:

format_wysiwyg

{{ format_wysiwyg(field.wysiwyg['#text'], field.wysiwyg['#textFormat'], '') }}

renderInlineStyle(string styles)

{% set styles %}
  <style>
    .twig-component .inline-style {
      color: {{ field.color_picker }};
    }
  </style>
{% endset %}

{{ renderInlineStyle(styles) }}

renderContent(string entity_type, string view_mode, string entity_id)

<div class="twig-entity-reference">
  {{  renderContent(field.entity_reference['#entity_type'], field.entity_reference['#view_mode'], field.entity_reference['#entity']) }}
</div>

format_wysiwyg

{{ format_wysiwyg(field.wysiwyg['#text'], field.wysiwyg['#textFormat'], '') }}

renderInlineStyle(string styles)

{% set styles %}
  <style>
    .twig-component .inline-style {
      color: {{ field.color_picker }};
    }
  </style>
{% endset %}

{{ renderInlineStyle(styles) }}

renderContent(string entity_type, string view_mode, string entity_id)

<div class="twig-entity-reference">
  {{  renderContent(field.entity_reference['#entity_type'], field.entity_reference['#view_mode'], field.entity_reference['#entity']) }}
</div>

Did not find what you were looking for?

Did not find what you were looking for?