Field type in custom component

  • 1
  • Question
  • Updated 4 years ago
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 />');
}
}));
This is what the builder page looks like:



What should the "type" of a field be?
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,470 Points 10k badge 2x thumb
Try adding a modelProp property.

{
id : 'comparefield',
type : 'field',
label : 'The field to compare against', modelProp : 'thismodel'
}
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
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?
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,470 Points 10k badge 2x thumb
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.
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
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?