Twig Components

Overview core twig components. Now we are using Symfony ux twig components, in the feature we may use live components.

The following components can be used in views/actions and dashboards.

!> Both components support overwriting the blocks, so the emsch templates must be loaded with EMSCH_ENVS. Using emsch_add_environment twig function, will not work. see Upgrade 5.3.x

Json Menu Nested

The json menu nested component for working with a json menu nested. This component replaces emsco_json_menu_nested twig function.

Improvements over the emsco_json_menu_nested:

• Pure vanilla JS (no jQuery for sorting)
• Users can work simultaneously
• The component does not know the full structure, each action is handled independent
• Move items between to two lists
• Collapse all with long press on the collapse button
• Better templating

Implementation (json-menu-nested)

{% set document = 'structure:ZBgj1IkBt_Q7j_c9Rj2a'|emsco_get %}
{{ component('json_menu_nested', {
    'id': 'example-structure',
    'ems_link': document.emsLink,
    'field_path': '[structure]'
}) }}

Property	Default	Description
id		required html id attribute
ems_link		required emsLink to the object
field_path		required property path to the json menu nested field
columns	json[{name: 'structure'}]	Json array of columns (name required, width default 200). Title column will always be available
template		see templating
context		key/value array that will be passed to all twig blocks
context_block		The passed block name, will be rendered on each request.
active_item_id		Highlight the item with the passed id

Javascript and CSS (json-menu-nested)

The following example, will on load:

• change the default modal size to lg
• get item 4f7dc5b6-54ff-4861-998a-bfc691ba2d12

window.addEventListener('emsReady', function () {
    const jsonMenuNested = window.jsonMenuNestedComponents['example-id-component']
    jsonMenuNested.modalSize = 'lg'
    jsonMenuNested.itemGet('4f7dc5b6-54ff-4861-998a-bfc691ba2d12').then((json) => {
        console.debug(json)
    })
})

The following example shows the css variable that can be changed.

.json-menu-nested-component {
    --jmn-color-bg: #f0f0f0;
    --jmn-color-border: #d7d7d7;
    --jmn-color-bg-active: #f0f8ff;
    --jmn-color-light: #f8f8f8;
    --jmn-border-radius: 5px;
    --jmn-gap: 10px;
    --jmn-icon-size: 30px;
}

Templating (json-menu-nested)

Overwriting the blocks can be done by defining a value for the template option. Use _self for overwriting in the same template. Important blocks that start with _jmn can't be overwritten.

See the default template for all available blocks.

Example:

• Add a new column named 'example'
• In the block jmn_column_example we use variable column_label passed through the context config
• In the block jmn_cell_example we use the variable page_label passed through the block example_context

The context_block will be rendered on each draw of the component. After each action a redraw is done.

{% block dashboardBody %}
  {% set document = 'structure:ZBgj1IkBt_Q7j_c9Rj2a'|emsco_get %}
  {{ component('json_menu_nested', {
      'id': 'example-structure',
      'ems_link': document.emsLink,
      'field_path': '[structure]',
      'template': _self,
      'context': { 'column_label': 'EXAMPLE' },
      'context_block': 'block_context',
      'active_item_id': app.request.get('activeItemId')|default(null),
      'columns': [
          { 'name': 'example', 'width': 50 },
          { 'name': 'structure' },
      ]
  }) }}
{% endblock %}

{% block jmn_column_example %}{{ column_label }}{% endblock %}
{% block jmn_cell_example %}{{ page_label }}{% endblock %}

{% block example_context %}
{% apply spaceless %}
    {% set pageDisplay = 'page:c04ee9be-2d25-4baf-a810-3ef4096e7d75'|emsco_display %}
    {% set context = { 'page_label': pageDisplay } %}
{% endapply %}
{{ context|json_encode|raw }}
{% endblock %}

Available in each blocks:

• config: object build from passed configuration
• column: object containing name and width
• node: object contains field type information: icon, label, type.
• template: object used for rendering
• menu: the parent json menu nested of the current item
• item: the item that rendered

Media library

The media library component show all documents inside a contentType with a folder tree. Uploading a new file will create a new document.

• Files list: has infinity scrolling, so a folder can contain x amount of files.
• Folders list: limited to 5000 folders over all levels.

Implementation (media-library)

If you use this media_library.json contentType, the only required attribute is id. For a more advanced implementation look into our demo project.

{{ component('media_library', {
    'id': 'examaple-media-lib'
}) }}

Property	Default	Description
id		required html id attribute
contentTypeName	media_file	required contentType name
fieldPath	media_path	required Field name for path value
fieldFolder	media_folder	required Field name for folder value
fieldFile	media_file	required Field name for asset
sort		see sorting
defaultValue		Key/value array for defining default, example organization
searchSize	100	Used for search and infinity scrolling
searchQuery	see config	Example only load media files for an organization
searchFileQuery		Define the search query used for searching file documents
searchType	term	Specify the folder range of a query search
		term: only in the current folder
		prefix: within the current folder and all subfolders
		all: in every folders
template		see templating
context		see templating

• config
• config factory

Sorting (media-library)

Provide an array of objects, each object represents a sort. Required object properties are id and field, optional defaultOrder and nestedPath.

The first sort with the property defaultOrder will be used as default sorting. See templating for implementation details.

Default value:

{
    "sort": [
        { "id": "name", "field": "media_path.alpha_order", "defaultOrder": "asc" },
        { "id": "type", "field": "media_file.mimetype", "parent_field": "media_file" },
        { "id": "size", "field": "media_file.filesize", "parent_field": "media_file" }
    ]
}

!> Since 6.9.2 nested_path is deprecated and should be replaced by parent_field.

Templating (media-library)

See the default template for all available blocks.

• media_lib_file: links have by default the ems-id data attribute:

  When the dashboard is used as file or object browser (wysiwyg) the ems-id will be used as value.

{{ block("body", "@EMSCH/template/dashboard/media_library.twig") }}

Example add an extra 'go to revision' column.

{% block body %}
    {{ component('media_library', {
        'id': 'examaple-media-lib',
        'template': _self,
        'context': {
            'example': 'example'
        }
    }) }}
{% endblock body %}

{%- block media_lib_file_header -%}
    <div data-sort-id="name">Name</div>
    <div data-sort-id="type">Type</div>
    <div>Revision</div>
    <div data-sort-id="size" class="text-right">Size</div>
{%- endblock media_lib_file_header -%}

{%- block media_lib_file -%}
    <div><a href="{{- mediaFile.urlView -}}" download="{{- mediaFile.name -}}" data-ems-id="{{- mediaFile.emsId -}}">{{- mediaFile.name -}}</a></div>
    <div>{{- mediaFile.file.mimetype|trans({}, 'emsco-mimetypes') -}}</div>
    <div><a href="{{ path('emsco_view_revisions', { 'type': mediaFile.document.contentType, 'ouuid': mediaFile.id  }) }}">show revision</a></div>
    <div class="text-right">{{- mediaFile.file.filesize|default(0)|format_bytes -}}</div>
{%- endblock media_lib_file -%}