This forum has moved, please join us on github discussions. We will keep these old posts available for reference. Thank you!

Nested Widgets won't save

Works in Progress
#1

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:

lib/modules/section-widgets/index.js

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 || []);
  }
}

lib/modules/section-widgets/views/widget.html

{#{ 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' } ] 
        }) }}
    </div>
  </div>
{% 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': {},
                'button':{}
              }
            }) 
           }}  
        </div>
      {%- endfor %}
    </div>
  </div>
{% endif %}

section is being invoked from another page as:

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

Any thoughts?

c1

#2

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!

#3

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.

#4

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!

#5

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

#6

Just FYI - I’m quite new to ApostropheCMS, and the fix that is mentioned is not overtly clear for someone new. I had created my own 4-column widget, and found that nothing was being saved. I looked at the apostrophe-samples project for “some technique” but I did not know what I was looking for. I copied the code from the open museum multiple-columns widget, rearranged the layouts to be what I wanted, and it partially fixed the issue. Now only the “last” nested widget fails to save.

I’ve gone back and forth between the open museum project and the samples project most of this afternoon and I am still not “seeing” this technique that you mention.

#7

Just for the record - and any other people finding Apostrophe for the first time or so, I was able to fix it after all. The technique that is mentioned is that it is vital to add an “area” in the definition of your layout widget. The open museum project HAS this implemented; I did not know what this code was for before, but now I have 4 such entries in my widget’s index.js:

{
      name: 'column1',
      label: 'Column One',
      contextual: true,
      type: 'area',
      options: {
        widgets: columnWidgets
      }
    }

TL;DR - don’t delete those type: ‘area’ definitions. See the open museum widget source