Layout Widget: Add dropdown to widget control UI bar

Question

I feel like I've seen it described somewhere in the documentation how to do this, but I can't find it for the life of me.

What I Have:

I have a layout widget that implements a grid system, allowing editors to create 2, 3, and 4 column layouts. Instead of having a different module for each layout, you select the layout you want within the widget's editor modal. The columns-widget's index.js is as follows:

var textOptions = {
  widgets: {
    'apostrophe-rich-text': {
      toolbar: [ 'Styles', 'Bold', 'Italic', 'Subscript', 'Superscript', 'Link', 'Unlink', 'Anchor', 'BulletedList', 'NumberedList', 'Blockquote', 'Table', 'Split'
      ],
      styles: [
        { name: 'Featured Intro', element: 'h1'},
        { name: 'Section Heading', element: 'h2'},
        { name: 'Label', element: 'h3' }
      ]
    },
    'apostrophe-images': {
      minSize: [400, 300]
    }
  }
};

module.exports = {        
  extend: 'apostrophe-widgets',        
  label: 'Columns',
  skipInitialModal: true,
  addFields: [
    {
      type: 'select',
      name: 'gridCols',
      label: 'Columns',
      choices: [
        {
          value: 'twoTwo',
          label: '50 | 50'
        },
        {
          value: 'threeOne',
          label: '75 | 25'
        },
        {
          value: 'oneThree',
          label: '25 | 75'
        },
        {
          value: 'fourCols',
          label: '4 Columns',
          showFields: ['colThree', 'colFour']
        },
        {
          value: 'threeCols',
          label: '3 Columns',
          showFields: ['colThree']
        }
      ]
    },
    {
      name: 'colOne',
      label: 'Column One',
      type: 'area',
      contextualOnly: true,
      options: textOptions
    },
    {
      name: 'colTwo',
      label: 'Column Two',
      type: 'area',
      contextualOnly: true,
      options: textOptions
    },
    {
      name: 'colThree',
      label: 'Column Three',
      type: 'area',
      contextualOnly: true,
      options: textOptions
    },
    {
      name: 'colFour',
      label: 'Column Four',
      type: 'area',
      contextualOnly: true,
      options: textOptions
    }
  ],
  construct: function (self, options) {
    var superPushAssets = self.pushAssets;
    self.pushAssets = function () {
      superPushAssets();
      self.pushAsset('stylesheet', 'grid');
      self.pushAsset('stylesheet', 'editor', { when: 'user' });
    }
  }
};

What I Want to Do :

I don't think it really makes sense to have a modal for a layout widget where all you do is select the type of layout you want, I figure having a dropdown in the widget / area ui's control groups would be ideal, but the documentation on anything like this isn't really there yet.

Currently, I'm using skipInitialModal so it starts with two columns, since I can't use contextualOnly yet, as I haven't figured out the dropdown part.

If I was extending apostrophe-area, then I'd just need to either super widgetControlGroups, or use addWidgetControlGroups to add buttons, but since this is a layout widget and I'm extending apostrophe-widgets, I'm somewhat lost. I haven't been able to find good examples in other projects on Github either.

Answer 1

Some provisions for this just landed in Apostrophe but it is a pretty specific implementation.

Use the widget configuration of apostrophe-personas as a guide for this https://github.com/apostrophecms/apostrophe-personas/blob/master/lib/modules/apostrophe-personas-widgets/index.js