To integrate a Client interaction functionality into any sitebuilder component using a lazy loading

approach are following steps required:

Identify which controllers and corresponding views (eventually HTML-Elements) are

involved in the process.
Identify which actions are called on the client side to trigger needed client interaction .
Once those informations are known, a new HTML-Attribute called data-params has to be
added to the concerned interaction element. The value of this attribute , that will be later
used as a namespace to load corresponding Javascript and CSS files to process client
interaction requests, should be a short descriptive content like "MetaTags.
Next step is to register the added namespace (data-params value) into the Javascript-File
CC.Packages.js under following path:
/var/dev/Jimdo.trunk/source/cdn/document_root/s/js/jquery/CC/CC.Packages.js (path could
change) as follow:

<data-params value>: {
js: [
'<path/to/Javascript File>'
],
css: [
'<path/to/Javascript File>'
]
}

Having the new client functionality registered as namespace, corresponding Javascript

and CSS-Files can now be created, that will be lazy loaded after client interaction request.
The name of the files must be in accordance with the registered namespace e.g:
SAC.Settings.MetaTags.js and sac-settings-metatags.css
Last step is passing a reference of Javascript handling Object to the constructor of superclass
actionController.js in init-Function. This could look like this:

(function ($){
$.construct( 'SAC.Settings.MetaTags', function( _super )
{
var tagsLength;

this.init = function()
{
_super.$detail.actionController(this);
};

Now expected Javascript and CSS code to process client interaction request can be written.
That's it!

A concrete Example to this described use case is described below:

Javascript interaction functionality: Displaying a warning message, when customer exceeds a

fixed character length while editing metatags of his homepage using suitebuilder.

Involved controllers and corresponding views: SettingController / Index (view) and

Websitecontroller / Tag (view)

Involved actions: indexAction (from SettingController), tagAction (from WebsiteController)

and taglengthAction (from WebsiteController)

registered namespace (data-params value) : MetaTags

Javascript and CSS-File : SAC.Settings.MetaTags.js and sac-settings-metatags.css