DynamicForm cellBorder style

[acarur01]

I have something like below where dynamic form has cellborder defined. Is there any way to modify to look and feel of the border?

isc.DynamicForm.create({
    ID: "exampleForm",baseStyle:"myHighGridCell",
    width: 250,cellBorder:5,
    fields: [
        {name: "username",
         title: "Username",
         type: "text",
         required: true,
         defaultValue: "bob"
        },
        {name: "email",
         title: "Email",
         required: true,
         type: "text",
         defaultValue: "bob@isomorphic.com"
        },
        {name: "password",
         title: "Password",
         required: true,
         type: "password"
        },
        {name: "password2",
         required: true,
         title: "Password again",
         type: "password"
        }
    ]
});

[Isomorphic]

No, this property is for debugging only. Use cellStyle to create a similar look and feel if you want borders on all cells for a particular form.

[acarur01]

But this would mean writing "cellStyle" property for all fields in that form - if that's the case, am I able to override the setFields/setItems function of the dynamic form to apply a cell style on the fields being added?

[Isomorphic]

Yes that's correct - if you look at the lowest common cross-browser denominator for table styling, that's pretty much what you have to do.

Yes, you could override setItems and apply a common cell style.

[acarur01]

Ok will try. Thanks again

[acarur01]

Below is my attempt at implementing this behaviour. What am I doing wrong? The fields are not generated now.

isc.DynamicForm.addProperties({
    setItems: function(itemList){
        if(this.cwCellBorderStyle==null){
            return this.Super("setItems", itemList);
        }
       
        var i = 0;
        var length = itemList.length;
       
        for(i=0;i<length;i++){
            var currentField =  itemList.get(i);
            var currentCellStyle = currentField.cellStyle;
            if(currentCellStyle!="formCell"){
                currentField.cellStyle =  this.cwCellBorderStyle;
            }
        }
        return this.Super("setItems", itemList);
    }
});



isc.DynamicForm.create({
    ID: "exampleForm",cwCellBorderStyle:"myHighGridCell",
    width: 250,
    fields: [
        {name: "username",
         title: "Username",
         type: "text",
         required: true,
         defaultValue: "bob"
        },
        {name: "email",
         title: "Email",
         required: true,
         type: "text",
         defaultValue: "bob@isomorphic.com"
        },
        {name: "password",
         title: "Password",
         required: true,
         type: "password"
        },
        {name: "password2",
         required: true,
         title: "Password again",
         type: "password"
        }
    ]
});

[Isomorphic]

You realize that this is overriding the system-wide definition of the setItems() function? You can't call Super() because you just blew away the frameworks' setItems method - this is being reported in your Developer Console.

isc.DynamicForm.addProperties({
    setItems: function(itemList){

[acarur01]

I thought that's what you meant when you said

Yes, you could override setItems and apply a common cell style.

Perhaps I need some clarification.

[Isomorphic]

By override we meant the usual way of overriding - create a subclass.

[acarur01]

Oh I see. Ok.

[acarur01]

Just one more question. I've created a new class that extends DynamicForm which I would now like to use for all of our dynamic forms. We have quite a few selenium testcases which have locators such as:

selenium.mouseOver("scLocator=//DynamicForm[ID=\"page$content$$content$MultipleSelectionEnum$gridWrap\"]/item[name=page%24content%24%24content%24MultipleSelectionEnum]/title");

This change of mine will break the testcases because the new locator will be something like:

//CwDynamicFormExtend[ID="design$$GridLayout"]/item[name=design%24%24Checkbox||title=%26nbsp%3B||index=2||Class=CheckboxItem]

I tried overriding getClassName but that only helps with other existing code we have that checks for className as "DynamicForm". Do you have any suggestions on how to achieve the same locator as if it were still a dynamic form?

isc.ClassFactory.defineClass("CwDynamicFormExtend", "DynamicForm");

isc.CwDynamicFormExtend.addProperties({
	setItems: function(itemList){
		if(this.$cwCellBorderStyle==null){
			this.Super("setItems", itemList);
		}
		
		var i = 0;
		var length = itemList.length;
		
		for(i=0;i<length;i++){
			var currentField =  itemList.get(i);
			var currentCellStyle = currentField.cellStyle;
			if(currentCellStyle=="formCell" || currentCellStyle == null){
				currentField.cellStyle =  this.$cwCellBorderStyle;
			}
		}
		
		this.Super("setItems", [itemList]);
	},
	getClassName: function(){
		//add this so that selenium testcases do not have to be changed
		return "DynamicForm";
	},

	titleSuffix:"&nbsp;",
	rightTitlePrefix:"&nbsp;",
	requiredTitleSuffix: "*</B>",
	requiredRightTitleSuffix: "*</B>",
	requiredRightTitlePrefix: "<B> "
});

[Isomorphic]

Is this confirmed as actually being required? The existing locators may actually work for you with the new subclass. (The auto test subsystem was designed with this kind of application maturing in mind).
If it definitely is failing to find the CwDynamicForm instances, let us know.

Overriding 'getClassName' is not recommended - this could potentially lead to lots of oddity in your app.

[acarur01]

Ok I will remove getClassName. We started going this way because a customer wanted an easy way to defined a grid-like style on the dynamic form without manually setting styles for each field in the form themselves.

This is what I do to get the locator. I open the form, open the debugger and enable auto test system. I double click on a checkbox within that form to get the locator and it gives me this before my change:

AutoTest Locator :
//DynamicForm[ID="page$content$$content$GridLayout"]/item[name=page%24content%24%24content%24Checkbox||title=%26nbsp%3B||index=2||Class=CheckboxItem]/

It gives me this after my change:

//CwDynamicFormExtend[ID="page$content$$content$GridLayout"]/item[name=page%24content%24%24content%24Checkbox||title=%26nbsp%3B||index=2||Class=CheckboxItem]/


I have not actually tried running selenium but I figured since the locator is competely changed that it would fail.

[Isomorphic]

Can you run a sanity check and see if the old locator string actually works.
The new class is a subclass of the old class (and moreover the old class is marked as a core framework class within the system). We have some logic in place that appears to handle this case so may allow you to just run the older tests without modification. If this is not the case we can take a look at why / suggest workarounds etc.

[acarur01]

Sure will get back to you