Field type in custom component

Questions
1

I have some builder code that creates a custom component, and I have an input type of “field”. For some reason the field picker displays, but is always empty. Here is my code:

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 : 'The Model that has the fields'
},{
id : 'thisfield',
type : 'field',
label : 'The starting field'
},{
id : 'comparefield',
type : 'field',
label : 'The field to compare against'
}
];
propertiesObj.body.append(skuid.builder.buildPropsEditor(component.state,propsList));
},
defaultStateGenerator : function(){
return skuid.utils.makeXMLDoc('<trafficlight></trafficlight>');
}
}));

This is what the builder page looks like:

What should the “type” of a field be?

2

Try adding a modelProp property.

{

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

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?

4

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.

5

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?