databinding a custom component in Visual Builder

[wcook]

I've created a custom component and I want to data bind it by dragging a DataSource onto it, like you can with a ListGrid. However, my component in the Project pane is not a valid drop target (just a circle w/ a line through it while dragging over it). I tried specifying the DataSource property in my custom DataSource XML file like this:

<field name="dataSource" type="DataSource" hidden="false"/>

I've also set the showDropIcon to true in the custom_components.xml file like this:

<showDropIcon>true</showDropIcon>

And I do have a separate icon that ends in _drop.

Any idea why I still can't databind my custom component?

[Isomorphic]

Do you have a setter (setDataSource())?

[wcook]

No, I didn't have a setter. I've added one, but still not able to drop a DataSource. Here's my code:


/*---------- GenericListDetails.js ----------*/


isc.defineClass("GenericListDetails", isc.VLayout);


isc.GenericListDetails.addProperties({
// --- Instance Defaults ---
width:"100%", // full width
backgroundColor:"white",
titleText:"Generic List Details",
titleStyle:"tabTitle",

// --- Instance Methods ---
initWidget : function () {
// call superclass implementation
this.Super("initWidget", arguments);

// on init, create the parts of this header
this.addMembers([

// Master ListGrid
this.listGrid = isc.ListGrid.create({
ID:this.getID()+"_listGrid",
width:this.imageWidth,
layoutAlign:"center",
dataSource:this.dataSource,
rowClick:" var selectedRecord = this.getSelectedRecord();\
if (selectedRecord != null) {\
this.dynamicForm.setDataSource(selectedRecord.DataSourceType);\
this.dynamicForm.editSelectedData(this);\
}\
"
}),

// spacer to stretch
isc.LayoutSpacer.create({
ID:this.getID()+"_spacer"
}),

// Details DynamicForm
this.dynamicForm = isc.DynamicForm.create({
ID:this.getID()+"_dynamicForm",
dataSource:this.dataSource
})
]);
},

// --- Dynamic Setters ---
setDataSource : function(newDataSource) {
this.dataSource = newDataSource;
this.listGrid.dataSource = newDataSource;
this.dynamicForm.dataSource = newDataSource;
}
});

[Isomorphic]

1. Can you show the complete component schema file?

2. Where have you placed the schema file?

3. Have you verified the component schema works outside Visual Builder, eg, creating your component via XML?

4. Have you loaded the schema file and class definition into Visual Builder?

5. Can you show your palette entry for the component?

[wcook]

I'm just using the embedded Tomcat server. My schema file is smartclientSDK\shared\ds\GenericListDetails.ds.xml. Here is the entire contents of the file:

<DataSource ID="GenericListDetails" serverType="component"
inheritsFrom="VLayout" clientConstructor="GenericListDetails">
<fields>
<field name="dataSource" type="DataSource" hidden="false"/>
<field name="correlationTrigger" type="string" group="Correlation"/>
<field name="enableAsk" type="boolean" group="Correlation"/>
</fields>
</DataSource>

Is the problem that I inherit from VLayout?

I haven't verified my component schema outside Visual Builder yet.

What do you mean by "4. Have you loaded the schema file and class definition into Visual Builder?" I am seeing the component show up in the Component Library pane. I can drag it onto the root VLayout. I can select it and see its properties in the Component Properties pane, including my two custom properties (in their Correlation group).

[wcook]

Through trial and error, I have figured out that if I include a fields property then I can drop the DataSource on my custom component. But, it doesn't function like a data bound component just by doing that, and that's probably because it inherits from VLayout.

So maybe I should base it on a ListGrid instead. But what I really want is to have my custom component be a very thin wrapper/template around other components. So, is there a way to make my component implement the entire interface required to support data binding, but still be a container of various other data bound components?

[Isomorphic]

Hi WCook,

To clarify, you found that you needed to declare the "fields" property in your schema? If so, we'll look at this. It does make sense to have a "fields" property in any component that supports databinding but it should not necessarily be required.

If you have loaded your class definition into Visual Builder via globalDependencies.xml, when the drop occurs you should see your setDataSource() method called. You can use this to call setDataSource() on your ListGrid and other subelements.

You can likewise support autoFetchData and other similar properties in your custom class by having those methods and properties affect your automatically generated subcomponents.