HTML Structural Assumptions by CSS and JavaScript Libraries

Most HTML code generated by transforms and layout definition files uses external CSS files for formatting information and uses external JavaScript content to introduce interactive functionality. Both CSS and JavaScript technologies use the HTML structure to indicate the formatting or JavaScript functionality that should be applied to a particular element. Therefore, improper customizations involving layout definition files can cause the underlying assumptions within the CSS or JavaScript to fail causing incorrect formatting or JavaScript errors. In such scenarios, it is necessary to modify the CSS or JavaScript references to maintain the formatting or JavaScript functionality.

You should always pay attention to the HTML structures created in the layout files to maintain the correct formatting. Be particularly aware of HTML elements with an id attribute since they are generally used for a particular JavaScript functionality.

Consider the following CSS example that formats an element in the Large Icons View mode for a Folder Browsing page.

The formatting for the object name, Financial Reports, is defined in the CSS file named folderTransform.css. The selector for this style definition is shown below:

The HTML structure for the anchor link that includes the object name Financial Reports is shown below and matches the CSS selector shown above, via the highlighted pieces of the HTML hierarchy.

\BODY.mstr\TABLE.mstrVerticalDocks\TD.tdDockCenter\DIV.mstrContent\DIV.mstrTransform\DIV.largeIconView\TABLE.largeIconView\TD\div.f\div.name\A

If the layout definition file used for rendering the Folder Browsing page is changed in such a way that the selector shown above no longer matches the HTML hierarchy or class names, then the element loses its formatting. For example, if you modify the layout definition file and remove the element with class largeIconView, you would notice errors because the HTML structure of the layout definition file would not correspond to what the CSS file expects.

In the following code sample from PromptsClassicLayout.xml, a MicroStrategy Web JavaScript function relies on the existence of an ID named mstrPromptsBody in the HTML . If this structure is omitted from the layout definition, a JavaScript error may result.

<div id="mstrPromptsBody" class="body">

The recommended practice when modifying HTML is to not delete IDs.