Apostrophe Custom-Widgets is not working.

[abi2810]

I'm using apostraphecms version 3. I followed these steps to create a custom widget - https://v3.docs.apostrophecms.org/guide/custom-widgets.html#creating-a-widget-type

Once the configuration is done I restarted the application and checked in UI, the custom widget is not showing.

My widget folder structure is my-project/modules/two-column-widget.

index.js

//my-project/modules/two-column-widget/index.js
module.exports = {
  extend: '@apostrophecms/widget-type',
  options: {
    label: 'Two Column Widget',
  },
  fields: {
    add: {
      columnOne:{
        type: 'area',
        label: 'Column One',
        options:{
          widgets:{
            '@apostrophecms/rich-text':{}
          }
        }
      },
      columnTwo:{
        type: 'area',
        label: 'Column Two',
        options:{
          widgets:{
            '@apostrophecms/rich-text':{}
          }
        }
      }
    }
  }
};

widget.html

//my-project/modules/two-column-widget/views/widget.html
<section data-two-column-widget>
  <div class="two-col__column">
    {% area data.widget, 'columnOne' %}
  </div>
  <div class="two-col__column">
    {% area data.widget, 'columnTwo' %}
  </div>
</section>

app.js

require('apostrophe')({
  shortName: 'apos-app',
  modules: {
    '@apostrophecms/rich-text-widget': {
      options: {
        className: 'bp-rich-text'
      }
    },
    '@apostrophecms/image-widget': {
      options: {
        className: 'bp-image-widget'
      }
    },
    '@apostrophecms/video-widget': {
      options: {
        className: 'bp-video-widget'
      }
    },
    'two-column-widget':{},
    'product':{},
    asset: {},
    'default-page': {}
  }
});

These are the codes I have configured for custom widgets. While I run the project I don't have any errors though. console:

apos-app % npm run dev
> a3-boilerplate@1.0.0 dev /Projects/apos-app
> nodemon

[nodemon] 2.0.15
[nodemon] reading config ./package.json
[nodemon] to restart at any time, enter `rs`
[nodemon] or send SIGHUP to 56075 to restart
[nodemon] ignoring: ./.git/**/* locales/*.json ./public/uploads/**/* public/apos-frontend/*.js ./data/**/*
[nodemon] watching path(s): app.js modules/**/* lib/**/*.js views/**/*.html
[nodemon] watching extensions: json,js,html,scss,vue
[nodemon] starting `node app.js`
[nodemon] forking
[nodemon] child pid: 56077
[nodemon] watching 28 files
(node:56077) DeprecationWarning: isConnected is deprecated and will be removed in the next major version
(Use `node --trace-deprecation ...` to show where the warning was created)
🧑‍💻 Building the Public-facing modern JavaScript and Sass...
👍 Public-facing modern JavaScript and Sass is complete!
🧑‍💻 Building the Raw CSS and JS...
👍 Raw CSS and JS is complete!
Listening at http://localhost:3000

Can anyone please help me to resolve the issue?

[abea]

I'm going to assume you're using the https://github.com/apostrophecms/a3-boilerplate/ as a starter. This issue is on the Apostrophe 2 boilerplate repository.

You didn't mention configuring the new widget type in an area. Where are you expecting to see the widget and are not? Did you add the widget to an area's widgets option? https://v3.docs.apostrophecms.org/guide/areas-and-widgets.html#basic-area-configuration

[abi2810]

Thank you for the response. Apologize once I posted the issue I noticed the section where I have put the question. I have linked this issue under a3-boilerplate - https://github.com/apostrophecms/a3-boilerplate/issues/31

Yes, I have mentioned the new widgets in the area. FYI home-page/index.js

//my-project/modules/@apostrophecms/home-page/index.js
module.exports = {
  options: {
    label: 'Home Page'
  },
  fields: {
    add: {
      main: {
        type: 'area',
        options: {
          widgets: {
            '@apostrophecms/rich-text': {
              toolbar: [
                'styles',
                '|',
                'bold',
                'italic',
                'strike',
                'link',
                '|',
                'bulletList',
                'orderedList'
              ],
              styles: [
                {
                  tag: 'p',
                  label: 'Paragraph (P)'
                },
                {
                  tag: 'h3',
                  label: 'Heading 3 (H3)'
                },
                {
                  tag: 'h4',
                  label: 'Heading 4 (H4)'
                }
              ]
            },
            '@apostrophecms/image': {},
            '@apostrophecms/video': {},
            'two-column-widget':{},
            'columns-widget':{}
          }
        }
      }
    },
    group: {
      basics: {
        label: 'Basics',
        fields: [
          'title',
          'main'
        ]
      }
    }
  }
};

modules/default-page/index.js

//my-project/modules/default-page/index.js
module.exports = {
  extend: '@apostrophecms/page-type',
  options: {
    label: 'Default Page'
  },
  fields: {
    add: {
      main: {
        type: 'area',
        options: {
          widgets: {
            '@apostrophecms/rich-text': {
              toolbar: [
                'styles',
                '|',
                'bold',
                'italic',
                'strike',
                'link',
                '|',
                'bulletList',
                'orderedList'
              ],
              styles: [
                {
                  tag: 'p',
                  label: 'Paragraph (P)'
                },
                {
                  tag: 'h3',
                  label: 'Heading 3 (H3)'
                },
                {
                  tag: 'h4',
                  label: 'Heading 4 (H4)'
                }
              ]
            },
            '@apostrophecms/image': {},
            '@apostrophecms/video': {},
            'two-column-widget':{},
            'columns-widget':{}
          }
        }
      }
    },
    group: {
      basics: {
        label: 'Basics',
        fields: [
          'title',
          'main'
        ]
      }
    }
  }
};

Let me know If I have to provide any codes for your reference.

[abea]

Try this but leave -widget off in the area configuration. So the final two lines of the widget configuration should be:

            'two-column':{},
            'columns':{}

See this section: https://v3.docs.apostrophecms.org/guide/areas-and-widgets.html#leave-widget-out-of-area-configuration

[abi2810]

Okay, I have also tried like that. But No Response.

[abea]

Great. That are config would be in both page types, of course. I copied your code into a project and am not able to reproduce the problem. Can you push your boilerplate project up to a public repo we could pull down to try?

[abi2810]

okay sure.

[boutell]

I've pushed up a pull request to implement a warning at startup if any widget type names specified for an area field end in -widget or just plain don't exist.

On Wed, Jan 5, 2022 at 11:39 AM Abinaya @.***> wrote:

okay sure.

— Reply to this email directly, view it on GitHub https://github.com/apostrophecms/apostrophe-boilerplate/issues/27#issuecomment-1005886546, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAH27IPI4375MCVIJNMY7TUURX3FANCNFSM5LJIHPFQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you are subscribed to this thread.Message ID: @.***>

--

THOMAS BOUTELL | CHIEF TECHNOLOGY OFFICER APOSTROPHECMS | apostrophecms.com | he/him/his

[abi2810]

Hey Alex, Thanks for your help. I cross-checked once I changed the widget on one page and not on another page. I just changed that. Now it's working.

Thank you so much for your time.