Apostrophe CMS Main Site Forum Home

Nested Widgets won't save

Hello All, I´m new to Apostrophe and am still trying to get the hang of this, however, I´m currently stuck on what seems to be a simple issue, but I can’t find a concrete example of how to solve it.

Basically: I have nested widgets. The inner widgets either won’t persist after a page reload, or I will get a “You were not able to take control of the document”

I read here that the there needs to be a schema…but i get this error whether I use a singleton or a area with widgets.

I’ll share some extracts:


var _ = require('lodash');

module.exports = {
    extend: 'apostrophe-widgets',
    name: 'section',      
    label: 'Section',  
    contextualOnly: false,
    beforeConstruct: function(self, options) {
    options.addFields=[ {  /* stuff */}].concat(options.addFields || []);

    options.arrangeFields = _.merge([ /*stuff*/],
    options.arrangeFields || []);


{#{ stuff }#}

{% if data.widget.contentType == 'centered-title' %}
  <div class="text-center">
    <div class="container-fluid">
        {{ apos.singleton(data.widget, 'sectionCenteredTitle', 
          'apostrophe-rich-text', {
          toolbar: [ 'Styles', 'Bold', 'Italic', 'Link', 'Unlink'], 
          styles: [ { name: 'Header', element: 'h2' } ] 
        }) }}
{% else %}
  <div class="container-fluid">
    <div class="row">
      {% for i in range(0, data.widget.columnCount) -%}
        <div class="col col-lg-{{ data.widget.responsiveDesktop }} col-md-{{ data.widget.responsiveTablet }} col-xs-{{ data.widget.responsiveMobile }}">
            apos.area(data.widget, 'sectioncontent', {
              widgets: {
                'apostrophe-rich-text': {
                  toolbar: [ 'Styles', 'Bold', 'Italic', 'Link', 'Unlink'], 
                  styles: [ { name: 'Header', element: 'h2' }]
                'apostrophe-images': { 
                  size: 'full',    
                  controls: {movable: true, position: 'bottom-right' } 
                'map': {},
      {%- endfor %}
{% endif %}

section is being invoked from another page as:

{{ apos.area(data.page, 'blankSection', {
        widgets: {
            'section': {}
}) }}

Any thoughts?


Hey @jonalex,

welcome to the Apostrophe community!

Would you mind to open this as an answerable question on Stack Overflow, tagged apostrophe-cms? So that other users can find it, since this is a code related question.

More information: Welcome to the Apostrophe discussion forum

Thank you!

hey @jonalex … the particular bug you’re reporting just received a fix in apostrophe’s master branch and will be published to npm within a week.

Awesome man.
For now I was able to resolve this by adding empty definitions to the addFields in my lib/modules/section-widget/views/index.js

Since this widget consolidates many row creation scenarios I had to create a definition for all possible nested widgets:

 {name: 'sectionCenteredText', type:'area', contextual:'true'},
 {name: 'sectionRichText', type:'area', contextual:'true'},
 {name: '0sectionColumn', type:'area', contextual:'true'},
 {name: '1sectionColumn', type:'area', contextual:'true'},
 {name: '11sectionColumn', type:'area', contextual:'true'}

This definitely feels like a workaround, so I’m sure you guys came up with something cleaner.

Looking forward to it!

This is fixed in apostrophe 2.59.0, provided you follow the technique demonstrated in the apostrophe-samples project.