Search code examples
rallyappsdk2

How to create a combobox of possible values


Is there a way to dynamically populate a combobox with the attributes a certain property of an artifact can take on?

e.g.

I have a custom field set up on User Stories. I want to be able to populate a combobox with all the possible values for this custom field without hard-coding it in.


Solution

  • In the code below the combobox is automatically populated with the allowed values of the custom field of dropdown type:

     Ext.define('CustomApp', {
                    extend: 'Rally.app.App',
                    componentCls: 'app',
    
                    items: [
                        {
                            xtype: 'container',
                            itemId: 'kbFilter'
                        },
                        {
                            xtype: 'container',
                            itemId: 'grid',
                            width: 800
                        }
                    ],
    
                    launch: function() {
                        this.down('#kbFilter').add({
                            xtype: 'checkbox',
                            cls: 'filter',
                            boxLabel: 'Filter table by custom field',
                            id: 'kbCheckbox',
                            scope: this,
                            handler: this._onSettingsChange
                        });
    
                        this.down('#kbFilter').add({
                            xtype: 'rallyattributecombobox',
                            cls: 'filter',
                            model: 'Defect',
                            field: 'MyKB',                                    
                            listeners: {
                                ready: this._onKBComboBoxLoad,
                                select: this._onKBComboBoxSelect,
                                scope: this
                            }
                        });
                    },
    
    
                    _onKBComboBoxLoad: function(comboBox) {
                        this.kbComboBox = comboBox;
    
                        Rally.data.ModelFactory.getModel({
                            type: 'Defect',
                            success: this._onModelRetrieved,
                            scope: this
                        });
                    },
    
                    _getFilter: function() {
                        var filter = [];
    
                        if (Ext.getCmp('kbCheckbox').getValue()) {
                            filter.push({
                                property: 'MyKB',                                 
                                operator: '=',
                                value: this.kbComboBox.getValue()
                            });
                        }
                        return filter;
                    },
    
                    _onKBComboBoxSelect: function() {
                        if (Ext.getCmp('kbCheckbox').getValue()) {
                            this._onSettingsChange();
                        }
                    },
                    _onSettingsChange: function() {
                        this.grid.filter(this._getFilter(), true, true);
                    },
    
                    _onModelRetrieved: function(model) {
                        this.grid = this.down('#grid').add({
                            xtype: 'rallygrid',
                            model: model,
                            columnCfgs: [
                                'FormattedID',
                                'Name',
                                'MyKB'                 
                            ],
                            storeConfig: {
                                context: this.context.getDataContext(),
                                filters: this._getFilter()
                            },
                            showPagingToolbar: false
                        });
                    }
                });
    

    In this example I have a dropdown field with Name: myKB and Display Name: My KB. In the WS API the name shows with prepended c_, as in c_myKB. However, if I use c_myKB this error comes up:

    Uncaught Rally.ui.combobox.FieldValueComboBox._populateStore(): field config must be specified when creating a Rally.ui.combobox.FieldValueComboBox
    

    Use the display name of the field, without spaces. Here is a screenshot showing this app in action: enter image description here