iTop/templates/formSDK/form.html.twig

{% extends 'base.html.twig' %}

{% block stylesheets %}

    <link rel="stylesheet" href="{{ asset_node('tom-select/dist/css/tom-select.bootstrap5.css') }}">

    <style>

        .form-type-pictograms{
            display: inline-block;
            margin-left: 5px;
            color: lightgrey;
        }

    </style>

{% endblock %}

{% block javascripts %}
    <script type="text/javascript" src="{{ asset_node('jquery/dist/jquery.js') }}"></script>
    <script type="text/javascript" src="{{ asset_node('tom-select/dist/js/tom-select.complete.js') }}"></script>
{% endblock %}

{% block body %}

<div style="padding: 20px;">

    {# specific form theme #}
    {% if theme is defined %}
        {% form_theme form theme %}
    {% endif %}

    {{ form_start(form) }}
        {{ form_widget(form) }}
        <input type="submit" class="btn btn-primary">
    {{ form_end(form) }}
</div>

    <script>

       $(document).ready(function(e){

           // SELECT widget implementation
           $('[data-widget="SelectWidget"]').each(function(e){

               const sId = $(this).attr('id');
               const aOptions = $(this).data('widget-options');

               new TomSelect(`#${sId}`, {
                   valueField: aOptions['valueField'],
                   labelField: aOptions['labelField'],
                   searchField: aOptions['searchField'],
                   // fetch remote data
                   load: function(query, callback) {
                       const url = aOptions['ajax_url'] + '?query=' + encodeURIComponent(query);
                       fetch(url)
                               .then(response => response.json())
                               .then(json => {
                                   callback(json.items);
                               }).catch(()=>{
                           callback();
                       });
                   }
               });
           });

       });

    </script>

{% endblock %}