Using Literal HTML in Views

You may have situations where you need to embed a section containing literal HTML in a view. This is typically because you have:

  • a <div/> area that you want to update programmatically
  • a type of form you wish to define using HTML elements rather than with Archibus view elements
  • a custom control that needs to be embedded and initialized.

To do so, use a panel of type html :

<panel type="html" id="instructionsPanel">
<title>Example Instructions</title>
<!-- . . . -->
<html>
<div id="instructions" class="instructions">
</div>
</html>
</panel>

File: schema\ab-products\solutions\programming\form\ab-ex-prg-form.axvw

Notes
  • Updating View 1.0 Views . Panel type html in View 2.0 views existed previously as panel type ui in View 1.0 views. When upgrading your views to View 2.0, please note this change.
  • Proper XML . Embedded HTML must be written in proper XML syntax. Some common HTML constructs are carried over into XML, for instance &amp; , &lt; and &quot; Others, such as &nbsp; have a different equivalent in XML. In the case of &nbsp; , you could use the numeric character in decimal ( &#160; ) or in hex ( &#xA0; ).
  • Binding Expressions . Binding expressions or macros are not allowed within literal HTML sections. The elements between the <html> and </html> tags will be sent to the browser verbatim.
  • Relative Paths . You cannot use relatives paths in HTML sections if you will be invoking the view from the Navigator. The reason is when the view is part of a dashboard view in a different directory, the child view is essentially included in and relocated to the parent dashboard view’s directory (e.g. http://absolut:8080/archibus/schema/ab-core/views/process-navigator/schema/ab-system/alter-view/view-summary.jpg ).

An alternative is to set the image source via JavaScript. The view constant Ab.view.View.contextPath evaluates to the installation-dependent portion of the path preceding /schema/ (e.g., /archibus ). With this, you can code the path independently of the location of the view. Thus you can make a string of the path, get the image element, and set its src property:

In HTML add:

<img id='img_elem_id' />

In JavaScript add:

var imagePath =
View.contextPath + ‘/schema/ab-system/graphics/ab-icon-workflow.gif’;
var imgElement = Ext.get('img_elem_id').dom;
imgElement.setAttribute('src', imagePath);

The following code is equivalent to that above:

%('img_elem_id').src =     View.contextPath + ‘/schema/ab-system/graphics/ab-icon-workflow.gif’;