Hi peeps,
I'm currently working on a viewlet which displays some content relative to the users position in the application. What I need to be able to do, is update (or re-render) the viewlet when, for example, the user is navigating the site-structure in folder_contents. The toolbar seems to handle this somehow that it updates or refreshes when the context changes...
Any idea how I can implement this, I guess it will involve some JavaScript somewhere...
Thanks a heap!
The folder_contents view runs with some async type request system, the viewlet updates when navigating the folder structures. For instance, if I go to a folder where I can add multiple Content-Type items and then in folder_contents I go to folder which say, only allows images, the toolbar updates to reflect this. pbauer mentioned that it uses a pattern that implements AJAX to handle this, though I don't see any easy way of implementing this same functionality into say, a custom toolbar or viewlet.
It seems like the /@@fc-contextInfo and /@@render-toolbar views seem to shed some light on this. I guess there is an AJAX hook somewhere which triggers the toolbar to be re-rendered when the folder_contents context changes. Gonna see how this can be implemented in some custom way...
Well it looks like Plone "just handles it" with a pattern, thank you to @jensens for reminding me about https://github.com/plone/mockup/tree/master/mockup/patterns/structure which I completely forgot about.
I followed the section on https://github.com/plone/mockup/tree/master/mockup/patterns/structure#pattern-overloading but unfortunately I don't seem to be able to get this to work... I followed exactly as described, registered the resource directory, added the registry entry and included the mockup-patterns-structureupdater.js file but nothing seems to happen..?
define([
'pat-base',
'mockup-patterns-structure-url/pattern-structureupdater',
], function(Base) {
'use strict';
var Pattern = Base.extend({
name: 'structureupdater2', // Give it another name than the original pattern
trigger: '.template-folder_contents',
parser: 'mockup',
init: function() {
$('body').on('context-info-loaded', function (e, data) {
console.log('update triggered');
}.bind(this));
}
});
return Pattern;
});
...I added the console.log('update triggered'); but for some reason nothing is logged to console, regardless of what I do.
I tried compiling the JavaScript into my core bundle, but that also didn't work. I'm sort of at a loss now what I should do...
I was going to suggest compiling & re-bundling the JS. Are you sure the new JS is showing up in the served bundled JS? Sometimes there are caching issues.
Well I tried compiling the bundle but I didn't investigate it much further, the documentation only mentions to create a registry entry like this...
<?xml version="1.0"?>
<registry i18n:domain="plone" xmlns:i18n="http://xml.zope.org/namespaces/i18n">
<records
prefix="plone.resources/mockup-patterns-structureupdater"
interface='Products.CMFPlone.interfaces.IResourceRegistry'>
<value key="js">++plone++my.project.resources/mockup-patterns-structureupdater.js</value>
</records>
</registry>
...it only suggests overriding the JavaScript path, there was no mention of having to re-compile this, so I didn't take that much further in testing...
Is it necessary..?