Picklist values for custom component

  • 1
  • Question
  • Updated 4 years ago
  • Answered
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?
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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.

{
  id : 'selecteddivs',
  type : 'picklist',
  label : 'Select message centers',
  picklistEntries: [
      { value: 'one', label: 'Message center One' },
      { value: 'two', label: 'Message center Two' },
      { value: 'three', label: 'Message center Three' }
  ]
}

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"
(Edited)
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
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...
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Here's how to do a Multi-select Picklist:

{
  id : 'selecteddivs',
  type : 'multipicklist',
  label : 'Select message centers',
  picklistEntries: [
      { value: 'one', label: 'Message center One' },
      { value: 'two', label: 'Message center Two' },
      { value: 'three', label: 'Message center Three' }
  ]
}
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
Perfect!