Field type in custom component

Try adding a modelProp property.

{

id : 'comparefield',<br>type : 'field',<br>label : 'The field to compare against', modelProp : 'thismodel'<br>}

Perfect! Now how can I make my component able to be dragged into a field editor? Do I need to create a function to handle that?

Unfortunately, I don’t think that’s possible right now.  The fact that templates can get dragged into field editors is special functionality that has been coded into the field editor builder.

Thanks for your help Ben, one more thing… I’m trying to make a component with a “Traffic Light” look that will compare the values of 2 fields and then light up with the appropriate color. (red=“stop” yellow=“hold up” green=“good to go”). I have tried a couple of different things here. Initially I had a field renderer which added div’s as icons to the field.element. I have been trying to turn this into a custom component. I have been struggling to get the icons to show up outside of a field renderer. Why can’t I simply create a div with class=“ui-silk ui-silk-bullet-red” and have the icon show up? This is how my code looks currently, I can get the values to show up, but not the icons.

Builder:

builder.registerBuilder(new builder.Builder({ id : 'trafficlight',
name : 'Traffic Light',
icon : 'ui-silk-sport-8ball',
description : 'Custom component to compare this field against another',
hideFromComponentsList : false,
isJSCreateable: true,
componentRenderer : function(component) {
component.header.text('Traffic Light');
},
propertiesRenderer : function(propertiesObj,component) {
propertiesObj.setHeaderText('Traffic Light');
var propsList = [{
id : 'thismodel',
type : 'model',
label : 'Model: ',
helptext: 'The Model that has the fields you want to compare'
},{
id : 'thisfield',
type : 'field',
label : 'Initial Field',
helptext : 'The starting field',
modelprop : 'thismodel'
},{
id : 'comparefield',
type : 'field',
label : 'Compare Field',
helptext : 'The field to compare against',
modelprop : 'thismodel'
}
];
propertiesObj.body.append(skuid.builder.buildPropsEditor(component.state,propsList));
},
defaultStateGenerator : function(){
return skuid.utils.makeXMLDoc('<trafficlight />');
}
}));

Runtime:

//traffic light runtime snippet skuid.componentType.register('trafficlight',function(element,xmlDef,component){
var modelName = xmlDef.attr('thismodel');
var thisField = xmlDef.attr('thisfield');
var compareField = xmlDef.attr('comparefield');
var myCustomXML = '<template multiple="false" model="' + modelName + '" uniqueid="myTest" allowhtml="true">' +
         '<contents>' + thisField + '/' + compareField + '{{' + thisField + '}}' + '/' + '{{' + compareField + '}}' +'</contents>' +
      '</template>';
        console.log(myCustomXML);
        $('<div>').attr('id', 'red').addClass('ui-silk ui-silk-bullet-red').addClass('inline').addClass('buttonicon').appendTo(element);
        console.log(element);
skuid.component.factory({
  element: element,
  xmlDefinition: myCustomXML
});
});

Is there a way to simply append a div with the icon to a template field or something?