Custom Item with time+label

[acarur01]

Oh joy. Yes quite a few colliding ID's. Thanks.

[Isomorphic]

This code snippet doesn't reproduce the problem, so the most we can say so far is that you might have something like an ID collision (which would be reported in the Developer Console) or you might be trying to re-use items with multiple forms or multiple setItems() calls (should also be reported as an error in the Developer Console).

If you can isolate this to a runnable test case, we can dig deeper.

[acarur01]

Please ignore that line..I removed it..i was trying a workaround

isc.ClassFactory.defineClass("CwTimeItem", "CanvasItem");

isc.CwTimeItem.addProperties({
    init:function () {
        this.canvas = isc.DynamicForm.create({
            titlePrefix: "",
            titleSuffix: "",
            rightTitlePrefix: "",
            rightTitleSuffix: "",
            ID: this.ID+"$$$cw",
            dateId: this.ID,
            textBoxStyle: this.textBoxStyle,
            showPickerIcon: this.showPickerIcon,
            titleStyle: this.titleStyle,
            titleOrientation: this.titleOrientation==null?this.form.titleOrientation:this.titleOrientation,
            cwTrueDisabled: this.cwTrueDisabled,
            change: this.change,
            $isCwTime:true,
            colWidths:[150,150,150,150],
            numCols: this.title!=null?4:2,
            fields: [
                {name: "datePortion",disabled: this.disabled, textBoxStyle: this.textBoxStyle,keyPress: this.keyPress,
                 cwID: this.ID,titleStyle:this.titleStyle,ID: this.ID+"$$$cw$datePortion",type: "date", 
                 useTextField: true,cwTrueDisabled: this.cwTrueDisabled,titleOrientation: this.titleOrientation,change: this.change,blur: window.CbFormItem.blur,
                 title: (this.titleOrientation=="right"?" ":this.title),showTitle: (this.titleOrientation=="right"?false:true),displayFormat: this.displayFormat,
                 $isCwTime:true,length: 3,width: this.width==null?150:this.width, startDate:this.startDate
                },
               {name: "mSecPortion",  disabled: this.disabled, cwID: this.ID,textBoxStyle: this.textBoxStyle, 
                keyPress: this.keyPress,titleStyle: this.titleStyle,ID: this.ID+"$$$cw$mSecPortion",title: (this.titleOrientation=="right"?this.title:" "),
                titleOrientation: this.titleOrientation,type: "text",  keyPressFilter: "[0-9]",length: 2,textBoxStyle: this.textBoxStyle,
                width: 25,blur: window.CbFormItem.blur,$isCwTime:true}
            ]
            
        });
        
       
		this.showTitle = false;
        this.setValue = function(val){
        	if(val ==null || val == undefined || val == NaN){
				this.canvas.setValue("datePortion", null);
				this.canvas.setValue("mSecPortion", null);
        	
        	}else{
        		var sVal;
	        	
	        	if(typeof(val)== "string"){
	        		
	        		 val = new Date(val.replaceAll("\\",""));
					 sVal = val;
	        	}else{
	        		sVal = val;
	        	}
	        	
	        	
				var dateVal = new Date(this.dateValue.replaceAll("\\",""));
				var mval = sVal.getSeconds();
				
				this.canvas.setValue("datePortion", dateVal);
				this.canvas.setValue("mSecPortion", mval);
			}
        };
        
        this.getValue = function(){
        	
			var datePortion = this.canvas.getValue("datePortion");
			
			if(datePortion==null)
				return null;
			var hours=0;
			var minutes=0;
			var msec=0;
			
			
			if(this.canvas.getValue("mSecPortion")!=null){
				msec = this.canvas.getValue("mSecPortion");
			}
			var yr;
			var month;
			var day;
			if(datePortion!=null ){
				if(typeof(datePortion)== "string")
					return datePortion;
			
				yr = datePortion.getFullYear();
				month = datePortion.getMonth();
				day = datePortion.getDate();
				hours = datePortion.getHours();
				minutes = datePortion.getMinutes();
				var newDate = new Date(yr, month, day, hours, minutes,msec, 0);
				return newDate;
			}else{
			 	//var newDate = new Date(yr, month, day, hours, minutes,msec, msec);
			 	return "ERROR";
				//return newDate;
			}


			
        };

        return this.Super("init", arguments);
    }
 });

Also, if you have received the screenshot I sent, it shows that I am using the exact same ID for both ways of trying to identify the form property

[acarur01]

'this.form' is null or not an object - ISC_Forms.js, line 1201 character 59

[Isomorphic]

Well, you are doing this:

form: window[this.ID+"$$$cw"]

If something is wrong with your ID assignment scheme you might be getting the wrong objects.

[acarur01]

Weirdest behaviour. Not sure what to make of it. I've emailed a screenshot of the debugger (I couldnt make the image 72KB).

If I try to access each field in my custom item using the globally unique ID and print out the form+ID, it gives me the right one. BUT if I use the form in my custom item to access its fields and then try to print out the form, it returns me a null. What's going on?? I know I don't have a sample that I can give you but any hint as to what I may be doing wrong would be great

[Isomorphic]

For any JS error, always include a stack trace. In this instance, it's needed to understand where in the lifecycle your code is crashing.

[acarur01]

The logic to set value if the two fields within the canvas has since been broken. Not exactly sure when but at certain instances, when setValue is called, this.canvas.setValue throws a nullpointer complaining that this.form is null. I've debugged and made sure that the dynamic form within my canvas does indeed have the two fields I have created. But when I try to get the form property of each field, I get a null.

We are using build SC_SNAPSHOT-2010-08-27/EVAL Development Only

isc.ClassFactory.defineClass("CwTimeItem", "CanvasItem");

isc.CwTimeItem.addProperties({
    init:function () {
        this.canvas = isc.DynamicForm.create({
            titlePrefix: "",
            titleSuffix: "",
            rightTitlePrefix: "",
            rightTitleSuffix: "",
            ID: this.ID+"$$$cw",
            dateId: this.ID,
            textBoxStyle: this.textBoxStyle,
            showPickerIcon: this.showPickerIcon,
            titleStyle: this.titleStyle,
            titleOrientation: this.titleOrientation==null?this.form.titleOrientation:this.titleOrientation,
            cwTrueDisabled: this.cwTrueDisabled,
            change: this.change,
            $isCwTime:true,
            colWidths:[150,150,150,150],
            numCols: this.title!=null?4:2,
            fields: [
                {name: "datePortion",disabled: this.disabled, textBoxStyle: this.textBoxStyle,keyPress: this.keyPress,
                 cwID: this.ID,titleStyle:this.titleStyle,ID: this.ID+"$$$cw$datePortion",type: "date", 
                 useTextField: true,cwTrueDisabled: this.cwTrueDisabled,titleOrientation: this.titleOrientation,change: this.change,
                 title: (this.titleOrientation=="right"?" ":this.title),showTitle: (this.titleOrientation=="right"?false:true),displayFormat: this.displayFormat,
                 $isCwTime:true,length: 3,width: this.width==null?150:this.width, startDate:this.startDate, form: window[this.ID+"$$$cw"]
                },
               {name: "mSecPortion",  disabled: this.disabled, cwID: this.ID,textBoxStyle: this.textBoxStyle, 
                keyPress: this.keyPress,titleStyle: this.titleStyle,ID: this.ID+"$$$cw$mSecPortion",title: (this.titleOrientation=="right"?this.title:" "),
                titleOrientation: this.titleOrientation,type: "text",  keyPressFilter: "[0-9]",length: 2,textBoxStyle: this.textBoxStyle,
                width: 25,$isCwTime:true,form: window[this.ID+"$$$cw"]}
            ]
            
        });
        
       
        this.showTitle = false;
        this.setValue = function(val){
            if(val ==null || val == undefined || val == NaN){
                this.canvas.setValue("datePortion", null);
                this.canvas.setValue("mSecPortion", null);
            
            }else{
                var sVal;
                
                if(typeof(val)== "string"){
                    
                     val = new Date(val.replaceAll("\\",""));
                     sVal = val;
                }else{
                    sVal = val;
                }
                
                
                var dateVal = new Date(this.dateValue.replaceAll("\\",""));
                var mval = sVal.getSeconds();
                
                this.canvas.setValue("datePortion", dateVal);
                this.canvas.setValue("mSecPortion", mval);
            }
        };
        
        this.getValue = function(){
            
            var datePortion = this.canvas.getValue("datePortion");
            
            if(datePortion==null)
                return null;
            var hours=0;
            var minutes=0;
            var msec=0;
            
            
            if(this.canvas.getValue("mSecPortion")!=null){
                msec = this.canvas.getValue("mSecPortion");
            }
            var yr;
            var month;
            var day;
            if(datePortion!=null ){
                if(typeof(datePortion)== "string")
                    return datePortion;
            
                yr = datePortion.getFullYear();
                month = datePortion.getMonth();
                day = datePortion.getDate();
                hours = datePortion.getHours();
                minutes = datePortion.getMinutes();
                var newDate = new Date(yr, month, day, hours, minutes,msec, 0);
                return newDate;
            }else{
                 //var newDate = new Date(yr, month, day, hours, minutes,msec, msec);
                 return "ERROR";
                //return newDate;
            }


            
        };

        return this.Super("init", arguments);
    }
 });

[acarur01]

Thank you.

[davidj6]

If the message is directly related to the time, you can have a single setValue:

// Sample not using "Time"
setValue : function (value) {
    // Note that the canvas is a form
    this.canvas.setValue(this.getFieldName(), value);
    if (value > 0) this.canvas.setValue("message", "Excellent!");
}

Otherwise, you will need your own separate setter/getter for each canvas (form) field.

[acarur01]

Right, I missed this.canvas. What is the best way to get access to the time item and the static item separately to set the value on them?

[davidj6]

Looks like a bit of a disconnect in your new form item to me. You never set this.canvas to your form and therefore the form is just drawn automatically. Try doing a this.canvas = isc.DynamicForm.create() and also set autoDraw:false.

Additionally, this.value is assigned to the form's form item value but that doesn't hook up setValue on your new canvas item to push the value into the canvas form item. You will need your own setValue() method to do this. I suspect you will want a getValue as well.

[acarur01]

as in testTime.setValue(new Date())? it still doesn't show.

[Isomorphic]

Set the value as an actual Date instance, not a String.

[acarur01]

I'm trying to test with this custom item and setting its value but I can't seem to show the value on the time item. When I ask for the timeItem's value after I have set it, it outputs correctly. Ultimately, I need to be able to set a value on both the time item as well as the static text item in my custom item.

isc.ClassFactory.defineClass("CwTimeItem", "CanvasItem");

isc.CwTimeItem.addProperties({
    init:function () {
        isc.DynamicForm.create({
            numCols: 4,    
            fields: [
                {name: this.name,
                 title: this.title,
                 type: "time",
                 value: this.value,
                showHint: false, 
                },
                {name: "message",showTitle: false,
                 defaultValue: "55ms",
                 _constructor: "StaticTextItem"
                }                
            ]
        });

        return this.Super("init", arguments);
    }
 });
    
 isc.DynamicForm.create({
ID: "testForm",
            numCols: 8,    
            fields: [{_constructor: "CwTimeItem", name: "testTime", title: "TEST",ID: "testTime",showTitle: false}]
});

testTime.setValue("12:30");

isc.warn(testForm.getValue("testTime"));