Bubble-Editor: How to integrate fields in a custom field?
Bubble-Editor: How to integrate fields in a custom field?
invo-it
Posts: 1Questions: 1Answers: 0
I had to build a special formular. (see picture).
In the Editor I created a custom fieldType 'telefon' with three radio buttons and three inputfields.
It is now working with plain HTML and cookies. (see create-function)
It is possible to create several fields in one field.
The variables are currently saved in ugly cookis and are not transferred via the form.
Here is my code to create the editor-window:
function createEditor() {
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery', 'datatables', 'datatables-editor'], factory);
} else if (typeof exports === 'object') {
// Node / CommonJS
module.exports = function ($, dt) {
if (!$) {
$ = require('jquery');
}
factory($, dt || $.fn.dataTable || require('datatables'));
};
} else if (jQuery) {
// Browser standard
factory(jQuery, jQuery.fn.dataTable);
}
}(function ($, DataTable) {
'use strict';
if (!DataTable.ext.editorFields) {
DataTable.ext.editorFields = {};
}
var _fieldTypes = DataTable.Editor
? DataTable.Editor.fieldTypes
: DataTable.ext.editorFields;
_fieldTypes.telefon = {
update: function (field, val) {
val[0].value = telclean(val[0].value);
val[1].value = telclean(val[1].value);
val[2].value = telclean(val[2].value);
val[3].value = telclean(val[3].value);
$('#Festnetz').val(val[0].value);
$('#Mobil').val(val[1].value);
$('#Fax').val(val[2].value);
$('#telefonnummer').val(val[3].value);
$('#Rufnummer').html(val[3].value);
$('#radio1').attr('checked', false);
$('#radio2').attr('checked', false);
$('#radio3').attr('checked', false);
if(val[0].value == val[3].value) {
$('#radio1').attr('checked', true);
}
if(val[1].value == val[3].value) {
$('#radio2').attr('checked', true);
}
if(val[2].value == val[3].value) {
$('#radio3').attr('checked', true);
}
setCookie('phoneradio', $("INPUT[name=phoneradio]:checked").val());
},
create: function (field, val) {
var html = ''
html += '<table width="100%">';
html += '<tbody>';
html += '<tr>';
html += '<td colspan="4"><strong><span id="Rufnummer"></span></strong> dem Kommunikationsmittel zuweisen</td>';
html += '</tr>';
html += '<tr>';
html += '<td><i class="fa fa-2x fa-phone "></td>';
html += '<td> Festnetz</td>';
html += '<td align="center"><input type="radio" name="phoneradio" id="radio1" value="Festnetz"></td>';
html += '<td><input type="text" id="Festnetz" name="Festnetz" onBlur="setCookie(\'Festnetz\', $(\'#Festnetz\').val());"></td>';
html += '</tr>';
html += '<tr>';
html += '<td><i class="fa fa-2x fa-mobile"></td>';
html += '<td> Mobil </td>';
html += '<td align="center"><input type="radio" name="phoneradio" id="radio2" value="Mobil"></td>';
html += '<td><input type="text" id="Mobil" name="Mobil" onBlur="setCookie(\'Mobil\', $(\'#Mobil\').val());"></td>';
html += '</tr>';
html += '<tr>';
html += '<td><i class="fa fa-2x fa-print"></td>';
html += '<td> Fax </td>';
html += '<td align="center"><input type="radio" name="phoneradio" id="radio3" value="Fax"></td>';
html += '<td><input type="text" id="Fax" name="Fax" onBlur="setCookie(\'Fax\', $(\'#Fax\').val());"></td>';
html += '</tr>';
html += '</tbody>';
html += '</table>';
return html;
},
get: function (field) {
console.log('GET Field');
setCookie('Festnetz', $('#Festnetz').val());
setCookie('Mobil', $('#Mobil').val());
setCookie('Fax', $('#Fax').val());
},
set: function (field, val) {
console.log('SET Field');
//deleteCookie('Festnetz');
//deleteCookie('Mobil');
//deleteCookie('Fax');
}
};
}));
var editor = new $.fn.DataTable.Editor({
ajax: "/access/call-journaling/update-kontakt.php",
table: "#telefon",
idSrc: "callid",
fields: [{
label: "callid",
name: "callid",
type: "hidden",
visible: false,
searchable: false
},
{
label: "Kunde",
name: "Kundennummer",
type: "text",
},
{
label: "Standort",
name: "standortid2",
type: "text",
},
{
label: "Kontakt",
name: "KontaktId",
type: "text",
fieldInfo: "Kontakt auswählen oder unten <strong>neuen</strong> Kontakt eingeben"
},
{
label: "KontaktIstHausanschrift",
name: "KontaktIstHausanschrift",
type: "hidden",
visible: false,
searchable: false
},
{
label: "KontaktIstRechnungsanschrift",
name: "KontaktIstRechnungsanschrift",
type: "hidden",
visible: false,
searchable: false
},
{
label: "PersonId",
name: "PersonId",
type: "hidden",
},
{
label: "Titel",
name: "Titel",
type: "select",
options: window.titel,
},
{
label: "Anrede",
name: "Anrede",
type: "select",
options: window.anrede,
},
{
label: "Vorname",
name: "Vorname"
},
{
label: "Nachname",
name: "Nachname"
},
{
label: "Geburtstag",
name: "Geburtstag",
type: 'datetime',
def: function () {
return new Date();
},
format: 'DD.MM.YYYY',
},
{
label: "Position",
name: "Position"
},
{
label: "Abteilung",
name: "Abteilung"
},
{
label: "Bemerkung",
name: "Bemerkung"
},
{
label: "Rufnummer",
name: "Telefonnummer",
type: "telefon",
},
{
label: "Festnetz",
name: "Festnetz",
type: "hidden",
},
{
label: "Mobil",
name: "Mobil",
type: "hidden",
},
{
label: "Fax",
name: "Fax",
type: "hidden",
},{
label: "E-Mailadresse",
name: "Mail",
},
{
label: "telefonnummer",
name: "telefonnummer",
type: "hidden",
}
],
formOptions: {
bubble: {
title: false,
onBackground: false,
}
}
});
);
})
}
This discussion has been closed.
Answers
Hi,
The way I would handle this is to slightly change the
createfunction to create the DOM from the HTML and store a reference to it - e.g.:the reason for doing this is that the
fieldparameter (we call it the configuration object) is passed into all of the functions for the field. So you can then reference the HTML directly for the get and set functions - e.g.:That will return the values as comma separated. You might want to use a different character or even an array. The set function should operate in a similar manner.
This way you can make your field more reusable since you don't need to use globally unique id's for each input element.
Allan