Add columns to the scheduler lightbox

Scheduler
#1

How can I add some columns in the light box and save to db?
I added 11 different name to the form_blocks but when I save, they didn’t show in the request payload.

scheduler.form_blocks["my_editor"]={
  render:function(config){ 
      var height=(config.height||150)+"px";
      return '<div class="dhx_form_repeat">'+
      '<label style="display:none;"><input class="dhx_repeat_radio" type="radio" name="frame"  value="0">none</label>'+
      '<label><input class="dhx_repeat_radio" type="radio" name="frame" value="1">full</label>'+
      '<label><input class="dhx_repeat_radio" type="radio" name="frame" value="2">half</label>'+
      '<label><input class="dhx_repeat_radio" type="radio" name="frame" value="4">three</label>'+
      '<label><input class="dhx_repeat_radio" type="radio" name="frame" value="8">four</label>'+
      '<label><input class="dhx_repeat_radio" type="radio" name="frame" value="16">left</label>'+
      '<label><input class="dhx_repeat_radio" type="radio" name="frame" value="32">right</label>'+
      '</div>' + 
      '<div class="dhx_form_repeat">'+
          '<label class="radiolabel"><input class="dhx_repeat_radio" type="radio" name="pos" value="64">①</label>'+
          '<label class="radiolabel"><input class="dhx_repeat_radio" type="radio" name="pos" value="128">②</label>'+
          '<label class="radiolabel"><input class="dhx_repeat_radio" type="radio" name="pos" value="256">③</label>'+
          '<label class="radiolabel"><input class="dhx_repeat_radio" type="radio" name="pos" value="512">④</label>'+
      '</div>'+
      '<div class="dhx_form_repeat">'+
          '<label class="radiolabel"><input class="dhx_repeat_radio" type="radio" name="display" value="1024" >media</label>'+
          '<label class="radiolabel"><input class="dhx_repeat_radio" type="radio" name="display" value="2048">marquee</label>'+
          '<label class="radiolabel"><input class="dhx_repeat_radio" type="radio" name="display" value="4096">url</label>'+
          '<label class="radiolabel"><input class="dhx_repeat_radio" type="radio" name="display" value="8192">program</label>'+
      '</div>'+
'<div class="dhx_form_repeat">'+
  '<input class="dhx_repeat_radio" type="hidden" name="pic1" value="">'+
  '<input class="dhx_repeat_radio" type="text" name="notes1" value="">'+
  '<input class="dhx_repeat_radio" type="text" name="url1" value="">'+
  '<input class="dhx_repeat_radio" type="text" name="exec1" value="">'+
'</div>'+
'<div class="dhx_form_repeat">'+
  '<input class="dhx_repeat_radio" type="hidden" name="pic2" value="">'+
  '<input class="dhx_repeat_radio" type="text" name="notes2" value="">'+
  '<input class="dhx_repeat_radio" type="text" name="url2" value="">'+
  '<input class="dhx_repeat_radio" type="text" name="exec2" value="">'+
'</div>'+
'<div class="dhx_form_repeat">'+
  '<input class="dhx_repeat_radio" type="hidden" name="pic3" value="">'+
  '<input class="dhx_repeat_radio" type="text" name="notes3" value="">'+
  '<input class="dhx_repeat_radio" type="text" name="url3" value="">'+
  '<input class="dhx_repeat_radio" type="text" name="exec3" value="">'+
'</div>'+
'<div class="dhx_form_repeat">'+
  '<input class="dhx_repeat_radio" type="hidden" name="pic4" value="">'+
  '<input class="dhx_repeat_radio" type="text" name="notes4" value="">'+
  '<input class="dhx_repeat_radio" type="text" name="url4" value="">'+
  '<input class="dhx_repeat_radio" type="text" name="exec4" value="">'+
'</div>'+
''
          ;				
  },
  set_value:function(node,value,ev){
    
  },
  get_value:function(node,ev){
    
  },
  focus:function(node){
    
  }

};

scheduler.locale.labels.section_template = 'Details';
scheduler.config.lightbox.sections = [
  { name:"title", height:50, map_to:"text", type:"textarea" , focus:true },
  { name:"details", height:35, map_to:"template", type:"my_editor"},
  { name:"recurring", type:"recurring", map_to:"rec_type", button:"recurring", form:"my_recurring_form"},
  { name:"time", height:72, type:"calendar_time", map_to:"auto" }
];

scheduler.init('scheduler_here', null, "week");
scheduler.setLoadMode("week"); 
scheduler.load("data/api.php");

var dp = new dataProcessor("data/api.php");
dp.init(scheduler);
dp.setTransactionMode("JSON");
#2

Hi Dalon,
Well the first part looks nice to me however a second part is missing.
How are you connected to the database?

As I can see your dataProcessor is pointing to data/api.php so you need to edit that file to redirect those values into the database, and also to update them from there. The read will be added automatic but only it the name of the row in your DB matches the name of the lightbox section

here is how it should look like for inserting

$queryText = "INSERT INTO `events` SET `details`=?, "; 
$queryParams = [
    $event["details"],

];
Now you also need to do the same for the update section
#3

I expect to see frame, pos, pic1… exec4 in data when inserted a new event but they didn’t exist in payload.

20200522102840
20200522102840740×317 8.29 KB

frame, pos, …exec4 exist in data when update but no value.

20200522145843
202005221458431372×849 22.5 KB

#4

Hi @Dalon

You have empty “set_value” and “get_value” in scheduler.form_blocks["my_editor"] https://prnt.sc/slqmdr.

You should specify both of them to connect with event object in data by value (that defined by map_to property).

#5

Thanks Polina. It works after I split the form_blocks.

var frame = [
  {key:1, label: 'full'},
  {key:2, label: 'half'},
  {key:4, label: 'three'},
  {key:8, label: 'four'},
];
var pos = [
  {key:1, label: '①'},
  {key:2, label: '②'},
  {key:4, label: '③'},
  {key:8, label: '④'},
];
var display = [
  {key:16, label: 'media'},
  {key:32, label: 'marquee'},
  {key:64, label: 'url'},
  {key:128, label: 'program'},
];
scheduler.form_blocks["detail1"]={
  render:function(config){ 
    var height=(config.height||350)+"px";
    return ''+
      '<div class="dhx_form_repeat">'+
        '<input type="file" class="imagesUpload" multiple="" id="inputfile_pic1">'+
        '<input class="dhx_repeat_radio chmod" type="hidden" name="pic1" value="">'+
        '<input class="dhx_repeat_radio chmod" type="text" name="notes1" value="">'+
        '<input class="dhx_repeat_radio chmod" type="text" name="url1" value="">'+
        '<input class="dhx_repeat_radio chmod" type="text" name="exec1" value="">'+
      '</div>'+
      ''
          ;       
  },
  set_value:function(node,value,ev){
      node.querySelector("[name='pic1']").value = ev.pic1||"";
      node.querySelector("[name='notes1']").value = ev.notes1||"";
      node.querySelector("[name='url1']").value = ev.url1||"";
      node.querySelector("[name='exec1']").value = ev.exec1||"";
  },
  get_value:function(node,ev){
    ev.notes1 = node.querySelector("[name='notes1']").value;
    ev.url1 = node.querySelector("[name='url1']").value;
    ev.exec1 = node.querySelector("[name='exec1']").value;
    return node.querySelector("[name='pic1']").value;
  },
  focus:function(node){
  }
};

scheduler.config.lightbox.sections = [
  { name:"title", height:50, map_to:"text", type:"textarea" , focus:true },
  { name:"frame", height:35, map_to:"frame", type:"radio", options:frame},
  { name:"position", height:35, map_to:"pos", type:"radio", options:pos},
  { name:"display", height:35, map_to:"display", type:"radio", options:display},
  { name:"detail1", height:35, map_to:"pic1", type:"detail1"},
  { name:"detail2", height:35, map_to:"pic2", type:"detail2"},
  { name:"detail3", height:35, map_to:"pic3", type:"detail3"},
  { name:"detail4", height:35, map_to:"pic4", type:"detail4"},
  { name:"recurring", type:"recurring", map_to:"rec_type", button:"recurring", form:"my_recurring_form"},
  { name:"time", height:72, type:"calendar_time", map_to:"auto" }
];