Using ajaxSelectFieldWidget in Senaite

Technical Questions and Answers
1

Hi,

Does anyone use ajaxSelectFieldWidget in your add-ons?

We encountered problem with ajaxSelectFieldWidget (which comes from base Plone package plone.app.z3cform.widget). The project builds out and starts but there is no JS-code imported to make this widget work.

After some investigation was found that Senaite kicks out (removes) Plone js/css. there is commented part of main_template.pt in the senaite.core add-on:

<!-- Disable all Plone JS/CSS -->
<!-- <div tal:replace="structure provider:plone.scripts" /> -->
<!-- <metal:javascriptslot define-slot="javascript_head_slot" /> -->
<!-- <link tal:replace="structure provider:plone.htmlhead.links" /> -->
<!-- <metal:styleslot define-slot="style_slot" /> -->

if uncomment this code the project builds out and this ajaxSelectFieldWidget input starts working properly but seems that Plone js files overrides (or conflicts) with those provided by Senaite, so some other widgets behavior brokes up.

So, if you use ajaxSelectField, what is the way to make it work in Senaite properly?

regards,
–leo

2

There were tons of complains and heated discussions about Plone 5’s JS resource registry approach (just do a search on Plone’s community and you’ll see). After struggling with JS registry machinery while porting SENAITE from Plone 4.3 to Plone 5, we decided to simply not use that and go ahead with webpack instead. We basically followed same strategy as hvelarde’s (see hvelarde: Look Ma! No Resource Registries). Have to say that we are pretty happy with the decision we took on this regard. The first advantage is that we are not stacked with Plone’s js versions (i.e ES2015 at that time was something important to not dismiss on SENAITE’s roadmap). Second is that It gives us all the flexibility we need without having to stumble upon plone’s JS libraries and versions over and over.

So if you need to add the javascript or css, you need to do it by your own. You can however do it easily by registering a viewlet, e.g:

  <browser:viewlet
    name="my.addon.static"
    manager="plone.app.layout.viewlets.interfaces.IHtmlHead"
    class="senaite.core.browser.viewlets.resources.ResourcesViewlet"
    permission="zope2.View"
    template="./static/resources.pt"
    layer="my.addon.interfaces.IMyAddonLayer" />

and place your <script> and/or <style> thingies in that static/resources.pt file

If you don’t want/need these resources to be rendered application-wide, then you can make use of senaite_legacy_js, senaite_legacy_css and/or senaite_legacy_resources metal slots to inject your stuff

1 Like
3

I assume that means that the JavaScript for Plone Developers Training is not applicable to adding/modifying JavaScript inside of Senaite, correct?

Is there any consolidated guides to working with Webpack, NodeJS, and NPM in a manner similar to how Senaite utilizes it? Getting JavaScript to work correctly inside ANY Plone instance has been a struggle for me, and the hvelarde link appears to only give examples of what to do inside the python code, not the system side.