Formatting Date field of a dynamic form

[sprayaga]

Hi,

I have posted a question of formatting form earlier and the solution provided by you was to use mapValueToDisplay.

I need to format date field and here are the prerequisits

1) I have an XML file through which I am getting the date in the following format

<createdOn>
           <milliseconds>1194252131000</milliseconds>
           <asText>
               <date>11/5/07</date>
               <time>2:12:11 PM</time>
           </asText>
     </createdOn>

2) I have a dynamic form where I am fetching all the values from the XML and displaying them as a static text for all my fields (text, date, checkbox etc)

for Date I need to get the value of milliseconds and get the date in the following format

Friday, November 04, 2005 11:03:00 AM

I am doing as below, but still its displaying me the milliseconds value as it is.

 { title:"Last Accessed On", type: "staticText", wrapTitle: false,   name:"milliseconds", 
    mapValueToDisplay:function(form, item, value) {
        			 var date = this.getValue();
        			 return(date.toLocaleString());
      			}

Can you please guide me whats going wrong and how to go ahead.

[Isomorphic]

Hi Sprayaga,

Your issue here is that the underlying value is actually a String, not a Date, so your toLocaleString() does nothing.

In order to make the underlying value a Date, declare the DataSource field as type Date, then, because you aren't using XML Schema date representation, you'll need to implement a dataSourceField.getFieldValue() function to convert the value to the appropriate type. Just "return new Date(value)" should work.

[sprayaga]

Hi,

Actually I just forgot to mention, I have a datasource and first I am declaring my values in the DS and referring them to my Dynamicform with setData()

{ title:"Last Accessed On", type:"date", wrap: true, name:"milliseconds", valueXPath: "lastAccessedOn/milliseconds"}

So I dont really need to use dataSourceField.getFieldValue(). My date field is already specified in DS.

[Isomorphic]

You still need getFieldValue(). As it stands, your declaration is causing the value of the field to be milliseconds value from the XML as a String. Use getFieldValue() to make it a Date instead.

[sprayaga]

Thanks that works!

[gravityshock]

Hello,

we had the same problem as sprayaga and use the suggested function "getFieldValue()" yet. In a "normal" listgrid it works fine, but when we allow grouping by the user (canGroupBy: true) it seems that the function "getFieldValue" don't be used if the grid is grouped. Then the cell-value is displayed as milliseconds. When we ungroup the grid the dates are displayed as formated string (specified in getFieldValues).

Do we have to use/override an other function?

[Isomorphic]

getFieldValue() is a property on a DataSourceField. If you put it on a ListGridField instead, where it doesn't below, it might have this effect. Otherwise, there is no way that grouping could matter, because getFieldValue() transforms the value before the ListGrid ever sees it.

[gravityshock]

Sorry, we thougt it's a function of listGrid and not of DatasetFields.

After we read your reply we tested some solutions but didn't find a running one. Our problem is, that our Datasource has no direkt defined fields:

isc.DataSource.create({
	ID:"ingredients_list_ingredientsds26_0001", 	
	dataFormat:"xml", 
	recordXPath:"/response/data/dataset/row", 
	metadata: {S: 1, D: 520, UI: "26_0001", TI: "4711_0001"}, 	
	loadRequirements: function() {}, 
	configure: function() {}, 
	transformRequest: function(dsRequest) {
		this.Super('transformRequest', dsRequest);
		dsRequest.timeout= 240000;
		dsRequest.useSimpleHttp = true;
		var params = {metadata: units_unit_controller26_0001.metadata};
		return isc.addProperties({}, dsRequest.data, params);
	}, transformResponse: function(dsResponse, dsRequest, data) {	
		var messages = isc.XMLTools.selectNodes(data,"/response/system/messages/msg");
		var mlen = messages.length;
		if(mlen > 0) {
			var msg = isc.XMLTools.toJS(messages);
			for(i=0;i < mlen;i++) {
				messageSystem.addMessage(msg[i].typ, msg[i].message);
			}
		}
		//execute commands for the UI
		var uiCommands = isc.XMLTools.selectString(data,"/response/system/UICommands");
		eval(uiCommands);
		if(dsRequest.operationType == 'add' || dsRequest.operationType == 'update') {
			var sysStatus = isc.XMLTools.selectString(data, '/response/system/status');
			if(null != sysStatus) {
				if(sysStatus < 0) {
					dsResponse.status = isc.DSResponse.STATUS_VALIDATION_ERROR;
					return false;
				}
			}
			var validationStatus = isc.XMLTools.selectString(data,'/response/system/validationstatus');
			if(null != validationStatus) {
				if(validationStatus !='validation_success') {
					dsResponse.status = isc.DSResponse.STATUS_VALIDATION_ERROR;
					var validationErrors = isc.XMLTools.selectNodes(data,'/response/system/validationmessages');
					dsResponse.errors = isc.XMLTools.toJS(validationErrors);
					messageSystem.addMessage(1, 'Eingabe Fehlerhaft');
				} else if(validationStatus =='validation_success') {
					units_layout_modalDialog26_0001.hide();
					messageSystem.addMessage(0, 'Eingabe gespeichert');
				}
			}
			}
	}, operationBindings: [
		{operationType:'fetch', dataURL: '/RtPS3Devel/ingredients/list/fetch', operationId: 'fetch'}, 
		{operationType:'update', dataURL: '/RtPS3Devel/ingredients/list/update', operationId: 'update'}, 
		{operationType:'add', dataURL: '/RtPS3Devel/ingredients/list/add', operationId: 'add'} 	]
});

Here the List-Grid:

isc.ListGrid.create({
	ID:"ingredients_list_list26_0001", width:"100%", height:"250", 
	getCellAlign:null, minWidth:300, membersMargin:10, autoDraw:false, 
	autoFetchData:false, alternateRecordStyles:true, showAllRecords:false, 
	canGroupBy:true, groupStartOpen:"all", groupByField:"material", 
	loadingDataMessage:"Loading Ingredients...", 
	dataSource:"ingredients_list_ingredientsds26_0001", 
	metadata: {S: 1, D: 520, UI: "26_0001", TI: "4711_0001"}, 
	loadRequirements: function() {}, 
	configure: function() {}, 
	refresh: function(parent) {
		if(parent == 'tabIngredients26_0001') {
			this.data.invalidateCache();
		}
	}, recordDoubleClick: function(viewer, record, recordNum, field, fieldNum, value, rawValue) {
		units_layout_modalDialog26_0001.load({
			configID: 'ingredients_dialog_editform', 
			metadata:units_unit_controller26_0001.metadata, 
			id: record.id
		});
	}
});

We add the fields per command to the ListGrid. The command itself and the field specification are transmittet via the xml-data-stream. The "UICommands"-Block is then processed via eval:

<?xml version="1.0" encoding="utf-8"?>
<response><system><status>0</status><messages/>
<UICommands>
	var databoundFields = [
		{name: 'id', type: 'integer', showIf: 'false', primaryKey: true}, 
		{name: 'matId', type: 'integer', showIf: 'false'}, 
		{name: 'extMatId', type: 'text', title: 'extMatId', frozen: true}, 
		{name: 'material', type: 'text', title: 'material'}, 
		{name: 'targetQuantity', type: 'float', title: 'Soll-Menge'}, 
		{name: 'targetQuantityM', type: 'text', showTitle: false}, 

		{name: 'fillTimeFrom', type: 'date', width: 80, displayFormat: 'toShortDate', title: 'fillTimeFrom'}, 
		{name: 'iDate', type: 'date', showIf: 'false'}, 
		{name: 'iUser', type: 'text', showIf: 'false'}, 
		{name: 'uDate', type: 'date', showIf: 'false'}, 
		{name: 'uUser', type: 'text', showIf: 'false'}, 
		{name: 'source', type: 'text', showIf: 'false'}, 
		{name: 'editDialog', type: 'boolean', showIf: 'false'}
	];
	ingredients_list_list26_0001.setFields(databoundFields);
</UICommands>
</system>
<data>
<dataset .......... here follows the data

We must use this may because the List of fields is dynamic and only calculateable for the actual selected "document". When the user switched to the next one, the grid itself and many of the function are 100% the same. Only the fields of the grid and of course the values are different. So setField is the best option for us.

Can you please advice a position, were we can add/override the getFieldValue? The following worked on the list-grid and on the datasource. But - as we now understand - it has to be added to the DataSourcefields:

getFieldValue: function(record, value, field, fieldName) {
		if(field.type == 'date'){
			var tmp = parseInt(record[value]);
			if(tmp.toString() == record[value]) return new Date(tmp);
			return null;
		}
		return record[value];
	}

Thank you in advance!

[Isomorphic]

Interesting approach, but, there are a number of problems with having a "fieldless" DataSource, some of which you may not have noticed yet but that will affect you in the future. For example, you'll probably find that your type:"boolean" and type:"integer" fields have String values (eg "4314" and "false") instead of actual JavaScript Number and Boolean values.

The right way to do this is to create the DataSource only after you receive the first response, using field definitions in the response to create a valid DataSource. To initiate the first request, instead of calling fetchData(), use RPCManager.sendRequest() and create the DataSource from the callback function. Then, if the response that provides the DataSource fields also contains data, you can extract it using recordsFromXML and create a ResultSet from that data, providing that ResultSet to the grid.

[gravityshock]

Thanks for the advice. We experience this affect already. Our Dates aren't Date objects but normal strings. We'll rethink our approach and if necessary extend our datasources with the field definitions.