Manipulating a Formatter

[amsko]

The Resource management plugin has a functionality to add events to your calendar. This event page writes records to the resource_event table. The form contains a Schedule Date Range Selector formatter with the schedule_date_range.xml macro

Issue 1. I am not able to find this XML in my UI Macros module. Is this because this is an OOB macro?

Issue 2. I need to be able to do some UI customization via Client script or UI policy that when the Type is selected as Time Off, the All Day checkbox should be checked automatically. But since the All Day checkbox is a part of the above mentioned fomatter I am not aware of how to access it via a script. If I add the actual field called All day separately in the form, the client script works.

Adding a screenshot of the event page:

Any help would be sincerely appreciated.

[nitish99]

Hi Amrita,

You can check the schedule_date_range formatter in the UI Formatters

As for now, I'm working on manipulating that All variable.

[amsko]

Hi Nitish,

Its present in UI formatter but that just points to an XML, which I assume can be found in UI macros (with the same name schedule_date_range.xml), but its not present in my instance. Is it present in yours?

[Marcel H_]

I think that I found something when looking at the HTML of the page using tools in Chrome, but from there still not sure if it's actually the UI Macro or something else. I found when looking at the source for the page with the formatter on it that it referenced a script "/scripts/ScheduleDateRange.js */". When plugging that into the address of my instance, I got back a script that I could open and view, as seen below:

/*! RESOURCE: /scripts/ScheduleDateRange.js */
var ScheduleDateRange = Class.create();
ScheduleDateRange.prototype = {
initialize: function() {
this.timeZone = "";
this.dateTimeFormat = g_user_date_time_format.replace(" z","").replace("z ","");
this.dateFormat = g_user_date_format.replace(" z","").replace("z ","");
this.timeFormat = this.dateTimeFormat.substring(this.dateFormat.length + 1);
},
initFields: function(prefix) {
this.prefix = prefix;
this.tzPicker = gel(prefix + ".tz_picker");
this.tzSpan1 = gel(prefix + ".time_span1_tz");
this.tzSpan2 = gel(prefix + ".time_span2_tz");
this.startDate = gel(prefix + ".start_date_tz");
this.startTime = gel(prefix + ".start_time_tz");
this.endDate = gel(prefix + ".end_date_tz");
this.endTime = gel(prefix + ".end_time_tz");
this.allDayTZ = gel(prefix + ".all_day_tz");
this.startDateTime = gel(prefix + ".start_date_time");
this.endDateTime = gel(prefix + ".end_date_time");
this.allDay = gel(prefix + ".all_day");
this.allDayTZ.checked = (this.allDay.value == "true");
this._initializeDates();
this._setDatesAndTimes();
this.allDayChange();
this.initTimeZone();
},
initTimeZone: function() {
if (this.tzPicker) {
var oldTimeZone = this.timeZone;
this.timeZone = this.tzPicker[this.tzPicker.selectedIndex].value;
this.initTimeZoneDT(this.startDateTime, this.startDate, this.startTime, oldTimeZone, 'start');
this.initTimeZoneDT(this.endDateTime, this.endDate, this.endTime, oldTimeZone, 'end');
}
},
initTimeZoneDT: function(dt, d, t, timeZone, mode) {
if (this.allDay.value == 'true')
return;
var newTimeZone = this.tzPicker[this.tzPicker.selectedIndex].value;
var dt_tm = d.value;
dt_tm += " " + t.value;
var ga = new GlideAjax('TimeSpanScheduler');
ga.addParam('sysparm_name','scheduleDateTime');
ga.addParam('sysparm_dt_tm',dt_tm);
ga.addParam('sysparm_current_timezone',timeZone);
ga.addParam('sysparm_new_timezone',newTimeZone);
ga.addParam('sysparm_include_z_format', 'false');
ga.getXMLAnswer(this.initTimeZoneDTResponse.bind(this), null, [dt, d, t, mode]);
},
initTimeZoneDTResponse: function(answer, args) {
args[0].value = answer;
this._setDateTime(args[0], args[1], args[2], args[3]);
this.checkEndDateTime();
},
setTimeZone: function() {
if (this.tzPicker) {
this.timeZone = this.tzPicker[this.tzPicker.selectedIndex].value;
this._updateDateTimes();
}
},
updateDateTime: function(type) {
if (type == 'start') {
this.startDateTime.value = this._includeTimeZone(this.startDate.value, this.startTime.value);
this.prevStartDate = this.startDate.value;
this.prevStartTime = this.startTime.value;
if (this.allDay.value == "true") {
this.startDateTime.value += " " + this._getStartOfDayTime();
}
} else {
this.endDateTime.value = this._includeTimeZone(this.endDate.value, this.endTime.value);
this.prevEndDate = this.endDate.value;
this.prevEndTime = this.endTime.value;
if (this.allDay.value == "true") {
this.endDateTime.value += " " + this._getEndOfDayTime();
}
}
},
checkStartDateTime: function() {
if (!this.validDates()) {
this.startDateTime.value = "";
return;
}
if (!this.endIsAfterStart) {
var start = new Date(getDateFromFormat(this.prevStartDate + " " + this.prevStartTime, this.dateTimeFormat));
var end = new Date(getDateFromFormat(this.prevEndDate + " " + this.prevEndTime, this.dateTimeFormat));
var diff = end.getTime() - start.getTime();
var start = new Date(getDateFromFormat(this.startDate.value + " " + this.startTime.value, this.dateTimeFormat));
start.setTime(start.getTime() + diff);
this.endDate.value = formatDate(start, this.dateFormat);
this.endTime.value = formatDate(start, this.timeFormat);
this._updateDateTimes();
} else {
this.updateDateTime('start');
}
this.validEndDateTime();
},
checkEndDateTime: function() {
if (!this.validDates()) {
this.endDateTime.value = "";
return;
}
this.validEndDateTime();
this._updateDateTimes();
},
validDates: function() {
var valid = true;
var allDay = (this.allDay.value == "true");
if (allDay) {
this.startTime.value = this._getStartOfDayTime();
this.endTime.value = this._getEndOfDayTime();
}
if (!this._validValue(this.startDate, this.dateFormat))
valid = false;
if (!allDay && (!this._validValue(this.startTime, this.timeFormat)))
valid = false;
if (!this._validValue(this.endDate, this.dateFormat))
valid = false;
if (!allDay && (!this._validValue(this.endTime, this.timeFormat)))
valid = false;
return valid;
},
validEndDateTime: function() {
if (this.allDay.value != "true") {
var start = getDateFromFormat(this.startDate.value, this.dateFormat);
var end = getDateFromFormat(this.endDate.value, this.dateFormat);
} else {
var start = getDateFromFormat(this.startDate.value + " " + this.startTime.value, this.dateTimeFormat);
var end = getDateFromFormat(this.endDate.value + " " + this.endTime.value, this.dateTimeFormat);
}
if (end < start) {
addClassName(this.endDate, "ref_invalid");
addClassName(this.endTime, "ref_invalid");
this.endIsAfterStart = true;
return false;
} else {
removeClassName(this.endDate, "ref_invalid");
removeClassName(this.endTime, "ref_invalid");
this.endIsAfterStart = false;
return true;
}
},
_validValue: function(element, format) {
if (getDateFromFormat(element.value, format) == 0) {
addClassName(element, "ref_invalid");
return false;
}
removeClassName(element, "ref_invalid");
return true;
},
_includeTimeZone: function(dt, tm) {
var s = "";
if (this.allDay.value == 'true')
return dt;
if (this.timeZone)
s = "TZID=" + this.timeZone + ";" + dt;
else
s = dt;
s += " " + tm;
return s;
},
allDayChange: function() {
if (this.allDayTZ.checked) {
hideObject(this.tzSpan1);
hideObject(this.tzSpan2);
this.allDay.value = "true";
this.startTime.value = this._getStartOfDayTime();
this.endTime.value = this._getEndOfDayTime();
} else {
showObjectInline(this.tzSpan1);
showObjectInline(this.tzSpan2);
this.allDay.value = "false";
if (!this.startTime.value) {
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var t;
d.setMinutes(0);
d.setSeconds(0);
if (m > 30) {
t = d.getTime();
d.setTime(t + (60 * 60 * 1000));
}
this.startTime.value = formatDate(d, this.timeFormat);
t = d.getTime();
d.setTime(t + (60 * 60 * 1000));
this.endTime.value = formatDate(d, this.timeFormat);
}
}
this._updateDateTimes();
},
_initializeDates: function() {
if (!this.startDateTime.value) {
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var t;
d.setMinutes(0);
d.setSeconds(0);
if (m > 30) {
t = d.getTime();
d.setTime(t + (60 * 60 * 1000));
}
this.startDateTime.value = formatDate(d, this.dateTimeFormat);
t = d.getTime();
d.setTime(t + (60 * 60 * 1000));
this.endDateTime.value = formatDate(d, this.dateTimeFormat);
}
if (!this.endDateTime.value) {
var d = new Date(getDateFromFormat(this.startDateTime.value, this.dateTimeFormat));
t = d.getTime();
d.setTime(t + (60 * 60 * 1000));
this.endDateTime.value = formatDate(d, this.dateTimeFormat);
}
},
_setDatesAndTimes: function() {
this._setDateTime(this.startDateTime, this.startDate, this.startTime, 'start');
this._setDateTime(this.endDateTime, this.endDate, this.endTime, 'end');
},
_setDateTime: function(iDateTime, iDate, iTime, mode) {
var parts = iDateTime.value.split(" ");
if (parts.length > 0)
iDate.value = parts[0];
if ((parts.length > 1) && (this.allDay.value != "true")) {
iTime.value = parts[1];
for (var i = 2; i < parts.length; i++)
iTime.value += " " + parts[i];
} else {
iTime.value = "";
}
this.updateDateTime(mode);
},
_updateDateTimes: function() {
this.updateDateTime('start');
this.updateDateTime('end');
},
_getStartOfDayTime: function() {
var d = new Date();
d.setHours(0);
d.setMinutes(0);
d.setSeconds(0);
return formatDate(d, this.timeFormat);
},
_getEndOfDayTime: function() {
var d = new Date();
d.setHours(23);
d.setMinutes(59);
d.setSeconds(59);
return formatDate(d, this.timeFormat);
}
};
;

[dvp]

While ago SN folks said that we don't have access to that code and cannot be customized.

On the side note, If you are using resource management then enabling All is not a good idea as it marks 24 hrs of as utilized.