Custom field type which supports tagify
Custom field type which supports tagify
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>
This discussion has been closed.
Answers
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
parseMixTagsin asetfunction to set the value. It depends if you are just feeding it a string or an object?Allan
I wanted to ask if there is a working version available here. The tagify approach is a great thing, but the example above does not work.