Editor for Time input

[dougeven]

Hi,

I've built an Editor for inputting times patterned after the provided Editor-DateSpinLists under Defined Controls. I want the Editor to capture a full datetime, though, not simply the time so I pass in an optional field name to the Editor using a simple text value in "settings" containing the name of the date field in the formview I want to use as default. If the setting (called "defaultDateField") is not set the Editor falls back to using the current date.

Here's the code in the Editor's "Set value in editor" property:

var defDate;
if (typeof settings['defaultDateField'] != 'undefined') {
	defDate = settings.data[settings['defaultDateField']];
} else {
	d = new Date();
	defDate = (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear();
}

var hEle = {dialog.Object}.getPointer('CONTAINER_DATEFORTIME');
hEle.innerHTML = defDate;

var sHour = {dialog.object}.getControl("EDITORTIME_S_HOUR");
var sMinute = {dialog.object}.getControl("EDITORTIME_S_MINUTE");
var sAMPM = {dialog.object}.getControl("EDITORTIME_S_AMPM");

sHour.refresh();
sMinute.refresh();
sAMPM.refresh();

This works fine if I have a date field in my formview since I can reference the date value using the settings.data object (settings.data[settings['defaultDateField']]).

However, i now need to reference a date value from a parent record. For example, I have a "Date Audited" field in an "Audit" record, and the formview I'm working with represents a child record of the "Audit" table. As a result I cannot simply reference a field in the formview to pass in my default date value.

Finally, my question: is there a way to reference the parent table's data in the "Set value for editor" property? Or do I have to find that value using a javascript function to set the value for a "User defined editor and template settings" setting and pass it in to my Time Editor that way? I've tried to write a javascript function to do this unsuccessfully. Perhaps I'm not defining the javascript function and calling it in the Setting editor correctly. An example of such might help (the help provided in the settings definition editor says to use "Javascript:your_function_name" for the setting value but I had trouble getting the results I wanted this way).

Any advice/help appreciated. Thanks!

Here's the code in the Editor's "Get value from editor" property in case it's helpful for others trying to make the same kind of Editor:

var sHour = {dialog.object}.getControl("EDITORTIME_S_HOUR");
var sMinute = {dialog.object}.getControl("EDITORTIME_S_MINUTE");
var sAMPM = {dialog.object}.getControl("EDITORTIME_S_AMPM");

var defDate;
if (typeof settings['defaultDateField'] != 'undefined') {
	defDate = settings.data[settings['defaultDateField']];
} else {
	d = new Date();
	defDate = (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear();
}

return defDate+'  '+sHour.value+':'+sMinute.value+' '+sAMPM.value;

[dougeven]

Hi,

Since my question(s) got buried a bit in my previous post, here they are more clearly:

1. The "settings.data" object contains the values for the fields in the formview. If I need to access the data values for the parent row in a parent list control for which the current formview is a child, can I do it from the "Set value in editor" property of an Editor?

2. How can I acquire and pass the data value into an Editor by calling a javascript function in the Editor Settings property of a formview field? Any examples?

Thanks.

[dougeven]

Here's the code in the Editor's "Set value in editor" property:

var defDate;
if (typeof settings['defaultDateField'] != 'undefined') {
	defDate = settings.data[settings['defaultDateField']];
} else {
	d = new Date();
	defDate = (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear();
}

var hEle = {dialog.Object}.getPointer('CONTAINER_DATEFORTIME');
hEle.innerHTML = defDate;

var sHour = {dialog.object}.getControl("EDITORTIME_S_HOUR");
var sMinute = {dialog.object}.getControl("EDITORTIME_S_MINUTE");
var sAMPM = {dialog.object}.getControl("EDITORTIME_S_AMPM");

sHour.refresh();
sMinute.refresh();
sAMPM.refresh();

This code (above) was incomplete. This works better:

var defDate;
if (typeof settings['defaultDateField'] != 'undefined') {
	defDate = settings.data[settings['defaultDateField']];
} else {
	d = new Date();
	defDate = (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear();
}
//alert('EDITORTIME Set Value in editor: ' + JSON.stringify(settings) + ' :: ' + defDate + ' :: ' + value);
var hEle = {dialog.Object}.getPointer('CONTAINER_DATEFORTIME');
hEle.innerHTML = defDate;

var sHour = {dialog.object}.getControl("EDITORTIME_S_HOUR");
var sMinute = {dialog.object}.getControl("EDITORTIME_S_MINUTE");
var sAMPM = {dialog.object}.getControl("EDITORTIME_S_AMPM");

d = new Date();
d.fromFormat(value||"","MM/dd/yyyy  0h:0m AM"); // convert from the value
sHour.refresh();
sMinute.refresh();
sAMPM.refresh();
sHour.setValue(d.getHours());
sMinute.setValue(d.getMinutes());
sAMPM.setValue(d.toFormat("AM"));

[Beta Spark]

Hi,

Since my question(s) got buried a bit in my previous post, here they are more clearly:

1. The "settings.data" object contains the values for the fields in the formview. If I need to access the data values for the parent row in a parent list control for which the current formview is a child, can I do it from the "Set value in editor" property of an Editor?

2. How can I acquire and pass the data value into an Editor by calling a javascript function in the Editor Settings property of a formview field? Any examples?

Thanks.

Hi Doug,

You can reference the parent list using {dialog.object}.getValue to access data values in the parent row of the list control the formview is based on. For example:

var id = {dialog.object}.getValue('list::list1::RECORD_ID');

If the list which is used as the data source for your FormView also has a parent list control, you can reference data in the current row in that parent list control the same way:

var parent_id = {dialog.object}.getValue('list::list1Parent::PARENTRECORD_ID');

Both code examples above are javascript and can be used anywhere in your UX component that you can write javascript code. This includes "Set value in editor", "Show editor", "Hide editor", "Get value from editor", and "Validate editor". You can use them in javascript functions that are called from client-side templates, client-side show/hide expressions, functions called when setting the value for your Setting in User Defined Editor and Template settings in the FormView, etc.

RE: Calling a Function for Editor Settings

You have two options for calling javascript functions to define the Value for a setting. The easiest is to create a javascript function, defined in the Javascript Code section for the UX component, and call it using the Javascript: prefix. EG:

Javascript:generateMaxDate

The javascript function can be defined in the Javascript Code section or in a javascript file loaded when the component is first launched.

Alternatively, you can write the javascript directly as an anonymous function in the value box. An anonymous function can be used to create a setting that is a function or can be used to calculate the value of a setting.

Setting as an Anonymous Function

Assuming you created a setting called "maxDate" and defined it as an anonymous function as follows:

function:function(){
  var d = new Date();
  return d.getDate()+"-"+(d.getMonth()+1)+"-"+d.getFullYear();
}

This creates a setting called "maxDate" that is a function. You can reference it in the settings object like it was a method of settings. EG:

var maxDate = settings.maxDate();
alert(maxDate);

Setting Calculated using an Anonymouns Function

You can execute the Anonymous function immediately by adding parentheses to the definition of the function in the Value property for the maxDate setting. This is effectively identical to defining a function in an external file or the Javascript Code section and using the "Javscript:myfunctionname" as the value definition:

function:function(){
  var d = new Date();
  return d.getDate()+"-"+(d.getMonth()+1)+"-"+d.getFullYear();
}()

Referencing maxDate in the settings object doesn't require calling it as a function. You can treat is as a statically defined object.

var maxDate = settings.maxDate;
alert(maxDate);

Anonymous Function word of Caution

I would like to point out that should you choose to put comments in your annonymous function definition, you should use the /* */ comment delimeters. Using the // comment style may cause unexpected problems.

I hope this was helpful. Let me know if you have any additional questions!

[Td203]

It would be very helpful to have an example component & editor that performs the task of tracking time. It seems that this is likely a common need. Many workers need to record time. Multiple people need to report their time on a project etc. Asana uses Harvest Time Tracking as an integrated app but it only records the time as a summary such as two hours and not an actual calculation from a entered time. Just about every task I want to track has a need to report the starttime and endtime and calculate the difference with or without a date.