Twig template

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.

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. 
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>

You can find the complete list of all twig functions defined by Site Studio in modules/cohesion_templates/src/TwigExtension/TwigExtension.php