diff --git a/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md b/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md index 0f8c49068..ad35edfa5 100644 --- a/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md +++ b/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md @@ -774,6 +774,26 @@ The URL endpoints `{$AdminURL}mytabs/tab1` and `{$AdminURL}mytabs/tab2` should return HTML fragments suitable for inserting into the content area, through the `PjaxResponseNegotiator` class (see above). +### Lazy loading fields on tab activation + +When a tab is not lazy loaded via ajax, it might still be necessary to +delay some work (for example when doing HTTP requests) until the tab is activated. This is how, for example, the +[`GridFieldLazyLoader`](api:SilverStripe\Forms\GridField\GridFieldLazyLoader) works. + +In order to open up the same kind of features to other fields, a custom event is fired on all nodes with the `lazy-loadable` class inside the activated tab panel. +They will receive a `lazyload` event that can be listened to in the following way (you will have to implement your own logic for "loading" the content): + +```js +jQuery('.my-element.lazy-loadable').entwine({ + // Use onmatch so we apply the event handler as soon as the element enters the DOM + onmatch(e) { + this.one('lazyload', () => { + // Some init code here + }); + }, +}); +``` + ## Related - [Howto: Extend the CMS Interface](/developer_guides/customising_the_admin_interface/how_tos/extend_cms_interface)