Custom UI Overview
Custom UI Overview
Views created using AXVW 2.0 format are fully extensible. You can combine standard Archibus panels with HTML content, third-party or custom-built UI controls, using JavaScript code to glue them together.
There are several use cases that may require using custom UI extensions. Depending on the use case, you can choose an implementation approach ranging from very simple to very complex:
Requirement | Example | Implementation |
---|---|---|
Views created using AXVW 2.0 format are fully extensible. You can combine standard Archibus panels with HTML content, third-party or custom-built UI controls, using JavaScript code to glue them together. There are several use cases that may require using custom UI extensions. Depending on the use case, you can choose an implementation approach ranging from very simple to very complex: | Display a small "instruction" area on top of the standard grid panel. | Use HTML panel to embed HTML content. Use JavaScript to initialize or refresh the displayed data. |
Additional UI content or style displayed in a standard panel. | Display a color legend in a grid column. Each grid row may have a different color. | Use standard panel (i.e. grid). Use JavaScript to add content or change style of panel DOM elements. |
Substantially non-standard UI content for which a third-party UI control exists. | Display columns with additional data in the tree control (tree-grid). |
Use third-party control (i.e.
Ext.tree.TreePanel
). Use JavaScript to apply restrictions, retrieve Archibus data, fill the control with data, and handle control events.
|
Substantially non-standard UI content for which no third-party UI control exists. | Display project tasks as a Gantt Chart; allow the user to create new tasks or to reschedule existing tasks using drag and drop. | Implement a custom Gantt Chart control. |
Simple UI extensions require a base knowledge of HTML DOM, CSS, and JavaScript to implement. The most complex UI extensions may require a deep knowledge of the browser DOM implementations, and various JavaScript programming libraries (such as Yahoo UI or Ext JS), as well as substantial design and programming experience.