Documentation Center

JavaScript and CSS Shortcuts

There are a number of LCUI tags and named templates that load sets of JavaScript or CSS files, or create the basic starter JavaScript code to get a page going.

When using the JavaScript shortcut tags and templates, they should be called in the order shown in the following table. First, all CSS files should be loaded, then the JQuery scripts, then base Legacy Content Delivery scripts, then additional JavaScript files and if a initialization function needs to be called, add it last.

TagDescriptionParameters

CSS Reference

<lcui:css/> or <xsl:call-template name="lcui:css"/>

Loads a CSS file, generating a dynamic URL, including a skin parameter if available. Produces a <link/> tag.

For example

	<lcui:css file="base.css"/>>
	
could generate

	<link rel="stylesheet" type="text/css" href="/LiveContent/web/ui.xql?action=css&resource=base.css" />
	
  • file -- Name of the CSS file to load (for example, admin.css)

JQuery Scripts

<lcui:jquery/> or <xsl:call-template name="lcui:jquery"/>

Creates a set of JavaScript tags that load all the JQuery modules using dynamic URLs. Creates script tags to load: jquery.js, splitter.js, interface.js, jquery.form.js, and jquery.highlight.js

The lcui:jquery template is available in the xsl/ui/ui_helper.xsl stylesheet.

Tridion Docs Base Scripts

<lcui:base_script/> or <xsl:call-template name="lcui:base_script"/>

Creates a set of JavaScript tags that load all the Legacy Content Delivery core modules using dynamic URLs. Creates script tags to load: cvPortal.js, lcCore.js, cvControlFactory.js, cvPanelFactory.js, cvBaseComponent.js, and cvModalHandler.js

The lcui:base_script template is available in the xsl/ui/ui_helper.xsl stylesheet.

JavaScript Reference

<lcui:script/> or <xsl:call-template name="lcui:script"/>

Loads a JavaScript file, generating a dynamic URL, including a skin parameter if available. Produces a <script/> tag.

For example

	<lcui:script file="lcContent.css"/>>
	
could generate

	<script type="text/javascript" language="javascript" src="/LiveContent/web/ui.xql?action=script&resource=lcContent.js">&#160;
</script>
	
  • file -- Name of the JavaScript file to load (for example, jquery.js)

Initialization Call

<lcui:ui_init/> or <xsl:call-template name=" lcui:ui_init"/>

Creates a set of JavaScript commands which kick off the starter JavaScript which causes all the XML Configuration files to go into action, loading the entire interface.

Only add this to a page after <lcui:jquery/> and <lcui:base_scripts/> have been called.

The lcui:ui_init template is available in the xsl/ui/ui_helper.xsl stylesheet.