Search code examples
apostrophe-cms

Widget array field and contextual 'area' fields

I have an apostrophe cms widget with the following setup:

module.exports = {
extend: 'apostrophe-widgets',
label: 'Content Tabs',
addFields: [{
    name: 'tabs',
    label: 'Tabs',
    type: 'array',
    titleField: 'tabTitle',
    schema: [{
        type: 'string',
        name: 'tabTitle',
        label: 'Title'
    },
    {
        type: 'area',
        name: 'tabContent',
        label: 'Content',
        contextual: true
    }
    ]
}]

}

Now, when I add this widget to a page, the tabContent areas are rendered empty without the plus sign, so I cannot add any components to them.

If I set contextual to false though, I can add the content, but it is not saved as no save event is triggered (which is why I started with the contextual set to true first).

UPD: By inspecting the internals of Apostrophe CMS I've figured out that the array field does not implement any logic to detect contextual fields on its own fields.

Does anyone have any clue how to get it working?

Solution

  • This is a known issue:

    https://github.com/punkave/apostrophe/issues/993

    The workaround is to edit those areas non-contextually, in the dialog box for the widget. This is what will happen if you don't set the contextual flag and you do provide complete options for the area in the schema configuration.

    We do hope to enable contextual editing of areas nested in arrays in the future. There are some tricky aspects as described in that github issue.

    However, there's another alternative you might like a lot:

    1. Define a "tab" widget (note it's singular — just one tab). This tab widget has a title and a content area just as it does in your example.

    2. Define a "tabs" widget. In that widget, you'll have just one schema field: a nested area containing tab widgets only. Make it contextual: true.

    3. Add the "tabs" widget to your templates. Victory!

    Here we are using nested areas instead of arrays. Contextual editing for nested areas is well-supported in Apostrophe.

    One wrinkle is that edits to the order of the tabs, etc. are now done by re-ordering widgets with drag and drop or the arrows. If you are using JavaScript to hide all but the "active" tab this will not work as well for you. However, you can make that JavaScript conditional on whether the user has editing privileges for the tabs widget. If they do, you just show all of the widgets in the area so they can be re-ordered, new tabs added, etc. normally.