I have really been getting into custom components and I’ve been building some fun stuff! Question: I have some builder code that looks like this:
//this is the Message Center custom component builder.registerBuilder(new builder.Builder({
id : 'messagecenter',
name : 'Message Center',
icon : 'ui-silk-error',
description : 'Custom component to show Messages',
hideFromComponentsList : false,
componentRenderer : function(component) {
component.header.text('Message Center');
},
propertiesRenderer : function(propertiesObj,component) {
propertiesObj.setHeaderText('Message Center');
var propsList = [{
id : 'selecteddivs',
type : 'picklist',
label : 'Select message centers'
}
];
propertiesObj.body.append(skuid.builder.buildPropsEditor(component.state,propsList));
},
defaultStateGenerator : function(){
return skuid.utils.makeXMLDoc('<messagecenter />');
}
}));
I would like to be able to specify what the picklist options should be for my “selecteddivs” property. I’m assuming it’s something like:
options = {
'Hello','World'
}
How do I do that? Also ideally I would like to render as a multi-select picklist. Is that possible on the builder side? How can I add options for that as well?
Note: we recognize no documentation exists on this yet — but we’ve got some “top men” working on it — and that does not mean what it did for Indiana Jones Soon, soon!
To specify the options for a picklist property, use the picklistEntries property.
{<br /> id : 'selecteddivs',<br /><b> type : 'picklist',<br /></b> label : 'Select message centers',<br /><b> picklistEntries: [<br /></b><b> { value: 'one', label: 'Message center One' },<br /></b><b> { value: 'two', label: 'Message center Two' },<br /></b><b> { value: 'three', label: 'Message center Three' }<br /></b><b> ]<br /></b>}
To do a Multi-picklist property, just change type from picklistto multipicklist. The selected values will be stored in a single attribute, comma-separated, e.g. selecteddivs=“one,two”
Thanks Zach but just to be clear, how would I do a multiselect picklist?
{
id : ‘selecteddivs’,
type : ‘multipicklist’,
label : ‘Select message centers’,
selecteddivs=“one,two”,
picklistEntries: selecteddivs
}
I just don’t get how to set up the entries…
Here’s how to do a Multi-select Picklist:
{<br> id : 'selecteddivs',<br><b> type : 'multipicklist',<br></b> label : 'Select message centers',<br><b> picklistEntries: [<br></b><b> { value: 'one', label: 'Message center One' },<br></b><b> { value: 'two', label: 'Message center Two' },<br></b><b> { value: 'three', label: 'Message center Three' }<br></b><b> ]<br></b>}