google-apps-scriptdatebox

How to activate onValueChangeHandler for a DateBox using GAS


I have 2 dateboxes and added an onValueChangeHandler to both of them in order to update a flextable of events if a date will be changed. It works.

While loading (after doGet returns) I provide valid data for both dateboxes and would like the onValueChangeHandler to be executed. Unfortunally unlike checkboxes, dateboxes do not have a setValue(date, true); method .

   var onValueChangeShowEvents = app.createServerHandler('onValueChangeShowEvents');
   var dbxDateFrom  = app.createDateBox().setId(wid_dbxDateFrom).setWidth('85')
                              .addValueChangeHandler(onValueChangeShowEvents);
   var dbxDateUntil = app.createDateBox().setId(wid_dbxDateUntil).setWidth('85')
                              .addValueChangeHandler(onValueChangeShowEvents);
   var eventsTable  = app.createFlexTable().setId(wid_eventsTable);


function onValueChangeShowEvents(e)
{
var func = 'onValueChangeShowEvents';
Logger.log('in ' + func + '   source= ' + e.parameter.source + '   value= ' + e.parameter[e.parameter.source]);
   var app  = UiApp.getActiveApplication();

   var dbxDateFrom  = app.getElementById(wid_dbxDateFrom);
   var dbxDateUntil = app.getElementById(wid_dbxDateUntil);

   var dateFrom  = new Date(e.parameter[wid_dbxDateFrom]);
   var dateUntil = new Date(e.parameter[wid_dbxDateUntil]);
   dateUntil     = new Date(dateUntil.getTime() + (24 * 60 * 60 - 1) * 1000); // Full day until 23 u 59.59

   var cal       = CalendarApp.getCalendarsByName(MyCalender)[0]; // Retrieve the calender (verify !!)  
   var events    = cal.getEvents(dateFrom, dateUntil);              // All events within the timeframe
   var numEvents = events.length;

   var eventsTable = app.getElementById(wid_eventsTable);
   eventsTable.clear().setCellSpacing(1).setCellPadding(1);

//   eventsTable.setColumnStyleAttributes(0, { textAlign: "right" } ); // Does not work
   eventsTable.setStyleAttributes({ textAlign: "right" } );

   var numFields   = 5;
   var text        = '';
   var widthFields = [ '26', '85', '50', '50', '200'];

   for (var i=0; i<numEvents; i++)
   {
      var event       = events[i];
      var numRow      = i + 1;
//      var id          = event.getId();
      var dateStart   = event.getStartTime();
      var dateEnd     = event.getEndTime();
      var title       = event.getTitle();
//      var location    = event.getLocation();
//      var guests      = event.getGuestList();

      for (var j=0; j<numFields; j++)
      {  
         var fieldId  = evtPrefix + bell + numRow + bell + j; // Coding the fields
         var tbxField = app.createTextBox().setReadOnly(true).setStyleAttribute('fontWeight', 'bold')
                                .setId(fieldId).setName(fieldId).setWidth(widthFields[j]);
         if (j == 0)      text = numRow; // Must be changed into a button or anchor in order to allow show and update the event
         else if (j == 1) text = dateStart.format('yyyy-mm-dd'); // Uses http://blog.stevenlevithan.com/archives/date-time-format
         else if (j == 2) text = dateStart.format('HH:MM');
         else if (j == 3) text = dateEnd.format('HH:MM');
         else if (j == 4) text = title;

         tbxField.setText(text);
         eventsTable.setWidget(numRow, j, tbxField);
      }      
   };

   return app;
}

How can I initially activate my onValueChangeHandler from code?


Solution

  • Not sure why you couldn't assign values in the doGet directly but if you really want to be able to call your function from an external function (not triggered by a handler) you can call it with a valid e parameter. e is actually a JavaScript object with a few properties and is pretty easy to build.

    var e = {};
    var parameter = {};
    parameter['wid_dbxDateFrom'] = 'someValue';
    parameter['wid_dbxDateUntil'] = 'someOtherValue';
    e['parameter'] = parameter;// I defined only 2 parameters but you can add others + source + whatever you want...
    onValueChangeShowEvents(e);// call your function with the necessary parameters