Picklist values for custom component

edited March 2, 2017 in Questions
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?

Comments

  • edited March 2, 2017
    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 March 30, 2015
    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...
  • edited March 2, 2017
    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' }
      ]
    }
  • edited March 30, 2015
    Perfect!
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!