Select-list in RESTful tables

Jira Development Jira Server
, , ,
1

Hi,
I’m trying to create a RESTful table in my plugin. I am able to render date-picker in the table column. But I’m stuck in creating a select-list (Single and Multi) in the table column. Below is the snippet I used to render the date-picker which works for me.

columns: [
            {
                id: "name",
                header: "Event name"
            },
            {
                id: "date",
                header: "Event date",
                createView: AJS.RestfulTable.CustomCreateView.extend({
                    render: function (self) {
                        var $field = AJS.$('<input type="date" class="text aui-date-picker" name="date" />');
                        $field.datePicker({'overrideBrowserDefault': true});
                        return $field;
                    }
                }),
                editView: AJS.RestfulTable.CustomEditView.extend({
                    render: function (self) {
                        var $field = AJS.$('<input type="date" class="text aui-date-picker" name="date">');
                        $field.datePicker({'overrideBrowserDefault': true});
                        if (!_.isUndefined(self.value)) {
                            $field.val(new Date(self.value).print("%Y-%m-%d"));
                        }
                        return $field;
                    }
                }),
                readView: AJS.RestfulTable.CustomReadView.extend({
                    render: function (self) {
                        var val = (!_.isUndefined(self.value)) ? new Date(self.value).print("%Y-%m-%d") : undefined;
                        return '<span data-field-name="date">' + (val ? val : '') + '</span>';
                    }
                })
            }
        ]

Appreciate your help!

2

Hi @klkumar143 I think there is no big magic behind select lists:

{
                    id: "category",
                    header: "Category",
                    createView: AJS.RestfulTable.CustomCreateView.extend({
                        render: function ( self ) {
                            // Make category to "select" element
                            var $field = AJS.$('<select class="select" id="variant-category"></select>');
                            // Create new option
                            var newOption = new Option( "Hello", {"name": "Hello"}, true, true );
                            // Append to select element
                            $field.append(newOption).trigger('change');
                            
                            return $field;
                        }
                    }),
                }

For select2 with multiple values you also have to define required select2() method!

Best Valentin