Custom field type which supports tagify

Custom field type which supports tagify

matschematsche Posts: 14Questions: 6Answers: 0

Does anybody has already created a custom field type which supports Tagify?
I started with the following snippets. Tagify is shown correctly. The user can choose the tags which were provided by datatables php api. In addition it is possible to save a new entry correctly.
But when i create another new entry, the same tags are already selected as the entry before. The same situation when I start to edit another entry. I think the problem is, that the tagify object is always the same no matter what the selected row is...

// tagify field type plug-in code
(function ($, DataTable) {
 
    if ( ! DataTable.ext.editorFields ) {
        DataTable.ext.editorFields = {};
    }
     
    var Editor = DataTable.Editor;
    var _fieldTypes = DataTable.ext.editorFields;
     

    _fieldTypes.tagify = {
        create: function ( conf ) {

            var placeholder = conf.placeholder !== undefined ?
                conf.placeholder :
                ''; // default placeholder

            conf._input = $('<input/>').attr( $.extend( {
                id: Editor.safeId( conf.id ),
                type: 'text',
                placeholder: placeholder
            }, conf.attr || {} ) )

            return conf._input[0];
        },

        update: function ( conf, options, append ) {
            // Get all possible tags from the API. Same logic like fieldTypes.select (dropdown menu)
            var whitelist = [];
            options.forEach(function(x) {
                whitelist.push(x['value']);
            });

            var $input = conf._input.tagify({
                // Debugging
                // As an alternative to the PHP API you can use this example whitelist
                //whitelist: ["A# .NET", "A# (Axiom)", "A-0 System", "A+", "A++", "ABAP", "ABC", "ABC ALGOL", "ABSET"],
                
                whitelist: whitelist,
                enforceWhitelist : true,
                dropdown: {
                    enabled: 0,
                    closeOnSelect: false
                }
            })
        },

        get: function ( conf ) {
            try {
                // Convert JSON string (like '[{value:"foo"},{value:"bar"}]') to comma separated list (like 'foo, bar')
                return JSON.parse(conf._input.val())
                    .map(({value}) => value)   // ["foo", "bar"]
                    .toString();               // "foo, bar"
            } catch(err) {
                return conf._input.val();
            }
        }
    };

})(jQuery, jQuery.fn.dataTable);
editor = new $.fn.dataTable.Editor( {
    ajax: { 
        url: 'api/index.php',
        data : {
            table: _template.general_settings.database_table,
            crawler: 'webui'
        }
    },
    table: "#example",
    fields: {
        label: "Hostgroups",
        data:  "hostgroups",
        name:  "hostgroups",
        type:  "tagify",
        placeholder: "Start typing. Autocompletion.",
        separator: ',',
    }
} );
// Relevant snipped from the php api
Field::inst( 'hostgroups' )
    ->options( Options::inst()
        ->table( 'someOtherTable' )
        ->value( 'someValueColumn' )
        ->label( 'someLabel' )
    )
<head>
    <link rel="stylesheet" type="text/css" href="https://yaireo.github.io/tagify/dist/tagify.css">
    <script type="text/javascript" src="https://yaireo.github.io/tagify/dist/tagify.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://yaireo.github.io/tagify/dist/jQuery.tagify.min.js"></script>    
</head>

Answers

  • allanallan Posts: 51,220Questions: 1Answers: 7,710 Site admin
    edited January 16

    I'm not aware of anyone else having done this integration - indeed this is the first time I recall hearing about Tagify. It looks like a great library!

    From their documentation you might need to use parseMixTags in a set function to set the value. It depends if you are just feeding it a string or an object?

    Allan

Sign In or Register to comment.