Styjun

I was looking at creating a simple generic reusable text-only widget in apostrophe-cms so I made the module text-only-widgets.

with the following code

In lib/modules/text-only-widgets/index.js

module.exports = 
 extend: 'apostrophe-widgets',
 label: 'Section Heading',

 beforeConstruct: function (self, options) [])
 

;

In lib/modules/text-only-widgets/views/widget.html

 data.widget.sectionHeading 

Now I tried using the above widget in one of my pages as below:

 <div>
 
 apos.area(data.page, 'aboutUsDescriptionTwo', 
 widgets: 
 'text-only': 
 addFields: [
 
 name: 'sectionDescription', // set these fields dynamically
 label: 'Section Description', // set these fields dynamically
 type: 'string'
 
 ]

 
 
 )
 
 </div>

As shown in the below image, notice even after passing the addFields with label as Section Description to the text-only widget doesn't override the defaults set in the index.js.

I tried console.log on the options.addFields in index.js but it logs undefined as show below, I also tried few different variations but none works.

The addFields option is at the module level, it controls what fields exist for all instances of this widget. It is not an option that can be passed to individual instances of the widget via apos.area. Thus you can't do it in this way.

The correct approach is to create a second module which uses extend to extend the first one and addFields, at the module level, to add the additional field. Then, in your area, you can offer just one of the two widget types, or both, as is appropriate to your needs.

Thus in addition to lib/modules/text-only-widgets/index.js you would also have:

// in lib/modules/text-plus-description-widgets/index.js
module.exports = 
 extend: 'text-only-widgets',
 label: 'Section Heading and Description',

 addFields: [
 
 name: 'sectionDescription',
 label: 'Section Description',
 type: 'string'
 
 ]
;

And this widget would also have its own widget.html.