Apostrophe CMS Main Site Forum Home

Nested Widgets won't save


#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.