ElasticMS

Appearance

Datatable ​

emsco_datatable ​

This Twig filter generate an Ajax table view for you from elasticsearch queries.

With the following basic example you will have a table vue listing the identifier attribute for all miniature documents in your default environment :

twig
{{ emsco_datatable(['default'],['miniature'], {
    "columns": [{
        "label": "ID",
        "template": "{{ data.source.identifier }}",
        "orderField": "identifier"
    }]
}) }}

The first parameter is an array of environments.

The second parameter is an array of content types.

The third parameter is an options array:

  • columns: Definition of columns (array)
    • label: Column's label (string). Default value 'Label'
    • template: Twig template (string) where the following variables are available. Default value '''. Available variable in the Twig context:
      • data: EMS\CommonBundle\Elasticsearch\Document\DocumentInterface
      • column: EMS\CoreBundle\Form\Data\TemplateTableColumn
    • orderField: this value (string) will be used in the elasticsearch query, when the table is sorted by this column, in order to sort the result set. If not defined, or set to null, this column won't be sortable. If not defined the column wont't be sortable.
    • cellType: The HTML tag for the column's items. td or th. Default value td
    • cellClass: The class attribute for the column's items. The default value is an empty string.
  • checkable: Render a checkboxes in first column
  • id: Provide a datatable id default elastica-datatable,
  • actions: Array of object, object requires name,label,icon, optional provide class, confirm

Optional options ​

query ​

It's the elasticsearch query (array or string) used to get the data when a query string is defined in the datatable's search field. I.e.:

twig
{{ emsco_datatable(['ldap'],['ldap_user'], {
    "query": {
        "multi_match": {
          "query": "%query%",
          "operator": "and",
          "type": "bool_prefix",
          "fields": [
            "live_search",
            "live_search._2gram",
            "live_search._3gram"
          ]
        }
      },
    "columns": [{
        "label": "Name",
        "template": "{{ data.source.name|default('') }}",
        "orderField": "name.keyword"
    }]
}) }}

You can use the %query% pattern to inject the query string in your query. In this example we are using a search_as_you_type search field. This kind of field type are particularly suitable for this kind of search. You can define such field type with this mapping's config:

json
{
    "live_search": {
        "type": "search_as_you_type"
    }
}

Default value:

json
{
    "query_string": {
        "query": "%query%"
    }
}

emptyQuery ​

It's the elasticsearch query (array or string) used when nothing is defined in the datatable's search field. Default value:

json
{}

frontendOptions ​

It allows you to override every datatables.net options that you want. It's very flexible but also a bit dangerous if you start overriding the ajax or serverSide parameters. Default value {}

I.e.:

twig
{{ emsco_datatable(['ldap'],['ldap_user'], {
    "frontendOptions": {
        "pageLength": 100
    },
    "query": {
        "multi_match": {
          "query": "%query%",
          "operator": "and",
          "type": "bool_prefix",
          "fields": [
            "live_search",
            "live_search._2gram",
            "live_search._3gram"
          ]
        }
      },
    "columns": [{
        "label": "Name",
        "template": "{{ data.source.name|default('') }}",
        "orderField": "name.keyword"
    }]
}) }}

Another good example is to define a default sort column:

twig
{{ emsco_datatable(['ldap'],['ldap_user'], {
    "frontendOptions": {
        "order": [[1, 'desc']]
    },
    "columns": [{
        "label": "Name",
        "template": "{{ data.source.name|default('') }}",
        "orderField": "name.keyword"
    }]
}) }}

asc_missing_values_position ​

The asc_missing_values_position parameter specifies how docs which are missing the sort field, in asc direction, should be treated: The missing value can be set to _last, _first. The default is _last.

desc_missing_values_position ​

The desc_missing_values_position parameter specifies how docs which are missing the sort field, in desc direction, should be treated: The missing value can be set to _last, _first. The default is _first.

default_sort ​

The default_sort parameter specifies how docs should be sorted be default. Useful for the emsco_datatable_csv_path and the emsco_datatable_excel_path functions.

Example:

twig
{{ emsco_datatable(['ldap'],['ldap_user'], {
   "default_sort": {
       "name.keyword": "desc",
       "_score": "asc"
   },
   "columns": [{
       "label": "Name",
       "template": "{{ data.source.name|default('') }}",
       "orderField": "name.keyword"
   }]
}) }}

row_context ​

The row_context parameter allows you to define variables in a twig template, which variables will be available in your column's template:

twig
{{ emsco_datatable(['preview'],['page'], {
    "frontendOptions": {
        "pageLength": 100
    },
    "query": {
        "bool": {
          "must": must|merge(filterQuery)
        }
      },
    "row_context": "{% set docInfo = [data.contentType, data.id]|join(':')|emsco_document_info %}",
    "columns": [{
        "label": "Label",
        "template": '<a href="' ~ "{{path('data.revisions', {ouuid: data.id, type: data.contentType} ) }}"~'">' ~"{{ data.source.label }}</a>",
        "orderField": "label.alpha_order"
    },{
        "label": "Locale",
        "template": "{{ data.source.locale }}",
        "orderField": "locale"
    },{
        "label": "Draft",
        "template": "{{ docInfo.draft }}"
    },{
        "label": "Published",
        "template": "{{ docInfo.published }}"
    },{
        "label": "Aligned",
        "template": "{{ docInfo.aligned }}"
    },{
        "label": "Path",
        "template": "{{ data.source.path }}",
        "orderField": "path"
    }]
}) }}

protected ​

By default this parameter protected is set to true and ensure that only authenticated user can see datatable contents. So event if the emsco_datatable function is called in a public view, the loading data ajax request won't work by default.

If you want to give access to unauthenticated user you have to set this parameter to false.

This works the same way for the functions emsco_datatable_excel_path and emsco_datatable_csv_path.

actions ​

Actions are rendered under the table and can be used in combination with checkable for handling user selections. See the demo project for more implementation details.

twig
{{ emsco_datatable(['preview'],['page'], {
    "frontendOptions": { "order": [[1, 'desc']]},
    "checkable": true,
    "id": "example-page-table",
    "actions": [
         { 'name': 'example_delete', 'label': 'Delete', 'class': 'btn btn-sm btn-outline-danger', 'icon': 'trash' },
    ],
    "columns": [{ "label": "Name", "template": "{{data.source.name}}", "orderField": "name.keyword" }],
}) }}
javascript
const datatable = window.dataTables['example-page-table'] //jquery instance of the dataTable

document.getElementById('example-page-table').addEventListener('action.example_delete', (event) => {
    console.log(`You selected ${event.detail.selection}`)
    datatable.ajax.reload()
})

emsco_datatable_excel_path ​

This function is generating a path to an Excel generator route. This twig function has the same signature as the emsco_datatable twig function.

With the following extra options:

  • filename: filename of the generated Excel file (without extension). Default value datatable
  • disposition: attachment or inline. Default value attachment
  • sheet_name: Name of the only sheet. Default value Sheet

I.e.:

twig
<a href="{{ emsco_datatable_excel_path(['default'],['miniature'], {
    "columns": [{
        "label": "ID",
        "template": "{{ data.source.identifier }}"
    },{
        "label": "Name",
        "template": "{{ data.source.name }}"
    }]
}) }}">Download Excel</a>

We can extend the columns of emsco_datatable to add validation to define dropdown lists to the Excel file via a formula.

  • validation : to add a validation on all cells in a column
    • type: list. Default value list for a dropdown list.
    • formula: Set the formule for the column
    • allow_blank: Allow blank for a cell. Default true. Need show_error set to true.
    • show_input: Enable show prompt_title. Default true.
    • show_error: Enable show error_title. Default true.
    • prompt_title: Prompt input text, override the default value Chose a value from the list. Need show_input set to true.
    • error_title: Error text, override the default value This value doesn't match the data validation restrictions defined for this cell. Need show_error set to true.

I.e.:

twig
<a href="{{ emsco_datatable_excel_path(['default'],['miniature'], {
    "columns": [{
        "label": "Name",
        "template": "{{ data.source.name }}"
    },{
        "label": "Level",
        "validation": {
            "type" : "list",
            "formula" : "low,medium,high",
            "allow_blank": false
            "prompt_title": "Chose a level",
            "error_title": "Does not match a level in the list",
            "show_input": true,
            "show_error": true,
        }
    }]
}) }}">Download Excel</a>

emsco_datatable_csv_path ​

This function is generating a path to an CSV generator route. This twig function has the same signature as the emsco_datatable twig function.

With the following extra options:

  • filename: filename of the generated CSV file (without extension). Default value datatable
  • disposition: attachment or inline. Default value attachment

I.e.:

twig
<a href="{{ emsco_datatable_csv_path(['default'],['miniature'], {
    "columns": [{
        "label": "ID",
        "template": "{{ data.source.identifier }}"
    },{
        "label": "Name",
        "template": "{{ data.source.name }}"
    }]
}) }}">Download CSV</a>