Add custom Javascript to the Edit page

Plone Support
1

That's all I need, really, but I dived into the documentation and still can't figure it out. Please.

2

Hi,

The best approach is not to create a specific JS for the edit page(s), but to create a specific JS for all pages but which onnly runs if we are on the edit page(s).

First you need a static folder to contain your JS, example: https://github.com/collective/example.p4p5/blob/master/src/example/p4p5/browser/configure.zcml#L14

Then create a JS file, example: https://github.com/collective/example.p4p5/blob/master/src/example/p4p5/browser/static/chart.js
(we will talk about its content later)

And declare your JS as a bundle, example:


but add:
<value key="merge_with">logged-in</value>
so it is automatically served with all the Plone JS for logged-in users.

Regarding its content, just test if you are in an edit page that way:
$(document).ready(function() { if($('.template-edit')) { // do what you need to } });

3

Thanks for the great example @ebrehault :slight_smile:

By default, mr.bob adds a static folder to the add-on it generates, so in my case there was no need to add anything to the browser/configure.zcml... this was already there:

  <plone:static
      name="uwosh.oie.studyabroadstudent"
      type="plone"
      directory="static"
      />

It's important to note the type value "plone" and the name "uwosh.oie.studyabroadstudent"; those are needed in the registry entry below.

In the static folder I created a programedit.js containing:

$(document).ready(function() {
  if($('body').hasClass('template-edit') && $('body').hasClass('portaltype-oiestudyabroadprogram')) {
    alert('Editing a program');
    // add more code here
});

The initial if is to ensure that we are editing only one specific content type (not just any edit form, in other words).

Then in profiles/default/registry.xml I added this:

  <records prefix="plone.bundles/uwosh.oie.studyabroadstudent"
            interface='Products.CMFPlone.interfaces.IBundleRegistry'>
    <value key="enabled">True</value>
    <value key="jscompilation">++plone++uwosh.oie.studyabroadstudent/programedit.js</value>
    <value key="compile">False</value>
    <value key="depends">plone</value>
    <value key="merge_with">logged-in</value>
  </records>

A couple of notes:

  • The pseudo path string "++plone++uwosh.oie.studyabroadstudent/programedit.js" comes from the type value "plone" and the name value "uwosh.oie.studyabroadstudent" that are in the static folder definition in browser/configure.zcml

  • In the <records prefix= value "plone.bundles/uwosh.oie.studyabroadstudent" I assume "plone.bundles" is magic and Shall Not Be Messed With, but I don't know if "uwosh.oie.studyabroadstudent" is arbitrary or has to match the add-on name.

And if anyone is interested, here's the (maybe hackish?) JavaScript that I added some coordination logic among a few widgets on the edit form, in programedit.js: https://github.com/uwosh/uwosh.oie.studyabroadstudent/blob/master/src/uwosh/oie/studyabroadstudent/browser/static/programedit.js

4

I added to this issue to improve the Plone documentation on adding custom JavaScript: