Community Health Toolkit

How is cht-core currently side-loading custom widgets?

I am having trouble understanding how cht-core is enabling the custom widgets in webapp/src/js/enketo/widgets. I see that there is a webapp/src/js/enketo/widgets.js file that references all of them and somehow that file gets used during the Angular build (triggered when running the grunt exex:build-webapp step). However, it is not clear to me how that file is used during the build.

I ask this because now that I am trying to upgrade to the latest version of enketo-core it seems like that webapp/src/js/enketo/widgets.js file is no longer being used. (But as far as I can tell I have not changed anything in the build process that would cause it to be no longer getting picked up…)

Thanks!

1 Like

This is a little tricky because we want to override the default enketo-core widgets module so we can include our own. The way we do this is provide a module resolution alias which says instead of including the normal widgets file, use our one instead. You can find the configuration in the custom-webpack.config.js file.

This is likely broken if enketo-core has changed the way they reference the widgets file so it doesn’t match the alias any more. It’s also worth checking if the new version of enketo-core has a more sophisticated way of including custom widgets and we don’t need the alias any more.

1 Like

Thanks @gareth! It turns out I needed to change our aliase in the webpack config from widgets to enketo/widgets.

Unfortunately, I think this is still the only we we are going to be able to add custom widgets. :frowning: The Enketo Docs have a nice tutorial for Creating/extending widgets, but sadly it seems like it still depends on either adding them directly into enketo-core or else overriding the widgets.js file.

  • ensure the widget’s scss and js file is/are loaded in widgets.js and _widgets.scss respectively