Skip to main content

Top Panel Architecture

diagram

Template File Location

LocationAccess MethodScope
Document AttachmentMenu > Configuration > Edit Top Panel ConfigurationDocument-specific (overrides template)
Template AttachmentOpen LiveDoc > Template > AttachmentsTemplate default (inherited by documents)
Built-in DefaultAutomatic if not definedFallback if no custom template

Velocity Context in Top Panel

The top panel template has full access to the document context and Polarion APIs:
VariableTypePurposeExample
$documentDocumentCurrent document object$!document.customFields.item
$docRisksheetPolarionServiceImplWrapped document with Polarion servicesEnhanced API access
$documentIdStringFull document identifier"PROJ-DOC/MyRisksheet"
$projectIdStringProject containing the document"MYPROJECT"
$txReadOnlyTransactionRead-only transaction contextQuery Polarion data
$trackerServiceITrackerServiceWork item and project access$trackerService.getProject()
$repositoryServiceIRepositoryServiceFile and repository accessLoad external config files
$securityServiceISecurityServicePermission and authenticationCheck user access
The top panel operates in read-only mode. While you can query and display data, you cannot modify work items or Polarion objects directly. Use data transformation and conditional logic within the template.

Basic Top Panel Structure

Two-Column Layout

<div class="rs-panel">
  <div class="rs-row">
    <div class="rs-column-left">
      <div class="rs-label">Item:</div>
      <div class="rs-value">$!document.customFields.item</div>
      
      <div class="rs-label">Owner:</div>
      <div class="rs-value">$!document.customFields.owner</div>
    </div>
    <div class="rs-column-right">
      <div class="rs-label">Status:</div>
      <div class="rs-value">$!document.customFields.status</div>
      
      <div class="rs-label">Version:</div>
      <div class="rs-value">$!document.customFields.version</div>
    </div>
  </div>
</div>

Flexible Grid Layout

<div class="rs-panel">
  <div class="rs-row">
    <div class="rs-column one-wide">Item:</div>
    <div class="rs-column four-wide rs-value">$!document.customFields.item</div>
    
    <div class="rs-column two-wide">Owner:</div>
    <div class="rs-column four-wide rs-value">$!document.customFields.owner</div>
    
    <div class="rs-column two-wide">Version:</div>
    <div class="rs-column two-wide rs-value">$!document.customFields.version</div>
  </div>
</div>

Accessing Document Custom Fields

Field Types and Access Patterns

Field TypeAccess PatternExample
Text Field$!document.customFields.fieldName$!document.customFields.description
Enum Field$!document.customFields.enumField$!document.customFields.status
Date Field$!document.customFields.dateField$!document.customFields.dueDate
User Field$!document.customFields.assignee$!document.customFields.owner
Work Item Link$!document.customFields.relatedItem$!document.customFields.parentItem

Safe Field Access with Null Handling

## Using silent references to prevent null errors
<div class="metadata">
  #if($document && $document.customFields)
    Item: $!document.customFields.item
    
    #if($!document.customFields.owner)
      Owner: $!document.customFields.owner
    #else
      Owner: <em>Not assigned</em>
    #end
  #else
    <span class="error">Document data unavailable</span>
  #end
</div>

Display Document Timestamps

## Show document creation and update times
<div class="timestamps">
  <span class="label">Created:</span>
  <span class="value">$!document.created</span>
  
  <span class="label">Updated:</span>
  <span class="value">$!document.updated</span>
  
  <span class="label">Last Modified:</span>
  <span class="value">$!document.lastModified</span>
</div>

Conditional Display Logic

Status-Based Display

## Show different content based on document status
#set($status = $!document.customFields.status)

#if($status == "Draft")
  <div class="rs-alert-warning">
    ⚠️ This document is in draft status. Changes are not final.
  </div>
#elseif($status == "InReview")
  <div class="rs-alert-info">
    ℹ️ This document is awaiting approval review.
  </div>
#elseif($status == "Published")
  <div class="rs-alert-success">
    ✓ This document is published and active.
  </div>
#end

Permission-Based Display

## Show controls only to authorized users
#set($user = $securityService.getCurrentUser())
#set($isAdmin = $securityService.hasPermission($user, "ADMIN"))

#if($isAdmin)
  <div class="admin-controls">
    <button>Edit Configuration</button>
    <button>Reset to Template</button>
  </div>
#end

Formula Integration in Top Panel

Pre-Computing Values with Formulas

When you need to transform or compute values from work item data:
## Pre-compute a formatted status indicator
#set($severity = $!document.customFields.severity)
#set($occurrence = $!document.customFields.occurrence)

## Compute risk score (example formula)
#set($riskScore = $severity * $occurrence)

<div class="risk-indicator">
  <span class="label">Risk Score:</span>
  <span class="value">#if($riskScore > 15)HIGH#elseif($riskScore > 8)MEDIUM#else LOW#end</span>
</div>

Enum Property Access Pattern

## Access enum properties and transform them
#set($severityEnum = $!document.customFields.severity)

## Safely display enum with fallback
#if($severityEnum)
  Severity: $!severityEnum
#else
  Severity: <em>Not set</em>
#end
For complex transformations, break the logic into multiple #set() statements within the template. Prepare all computed values before rendering, then output the final results. This pattern avoids confusion about what data is available at render time.

Interactive Top Panel Elements

Action Buttons

<div class="action-buttons">
  <button onclick="openDocument('MYPROJ-DOC/RelatedRisksheet')">View Related Risksheet</button>
  <button onclick="exportPdf()">Export as PDF</button>
</div>

Filter Dropdowns

<div class="filter-section">
  <label>Filter by Status:</label>
  <select onchange="filterByStatus(this.value)">
    <option value="">All Statuses</option>
    <option value="Active">Active</option>
    <option value="Archived">Archived</option>
    <option value="Draft">Draft</option>
  </select>
</div>

Status Badges

#set($status = $!document.customFields.status)
<span class="badge badge-#if($status == 'Active')success#elseif($status == 'Draft')warning#else secondary#end">
  $status
</span>

Loading External Data

Query Work Items from Repository

## Load related work items to display in top panel
#set($project = $trackerService.getProject($projectId))
#set($relatedDocId = $!document.customFields.relatedDoc)

#if($relatedDocId)
  ## Attempt to retrieve related document
  #set($relatedDoc = $trackerService.getWorkItem($projectId, $relatedDocId))
  #if($relatedDoc)
    <div class="related-info">
      Related: $!relatedDoc.getTitle()
    </div>
  #end
#end

CSS Styling in Top Panel

Inline Style Classes

ClassPurposeVisual Effect
rs-labelField label stylingBold text, reduced width, right-aligned
rs-valueField value stylingNormal text, flexible width
rs-rowHorizontal row containerFlexbox layout, padding
rs-columnColumn within rowGrid column
rs-alert-infoInformation messageBlue background, info icon
rs-alert-warningWarning messageOrange background, warning icon
rs-alert-successSuccess messageGreen background, checkmark icon
rs-alert-errorError messageRed background, error icon

Custom Styling Example

<style>
  .custom-metadata {
    background-color: #f5f5f5;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 10px;
  }
  .metadata-label {
    font-weight: bold;
    color: #333;
    display: inline-block;
    width: 100px;
  }
</style>

<div class="custom-metadata">
  <span class="metadata-label">Item:</span>
  <span>$!document.customFields.item</span>
</div>

Error Handling and Debugging

Template Error Messages

Errors in the template render as red error boxes:
## Validate template syntax and references
#if(!$document)
  <div class="error">ERROR: Document context unavailable</div>
#end

#if(!$document.customFields)
  <div class="error">ERROR: Custom fields not accessible</div>
#end

Common Top Panel Issues

IssueCauseSolution
Null reference errorAccessing undefined fieldUse $!variable syntax, add null checks
Text not displayingHTML escaping issueUse $esc.html() for unsafe content
Styling not appliedClass name mismatchVerify CSS class names match configuration
Data staleCaching issueForce page reload (Ctrl+Shift+R)
Performance slowToo many Polarion API callsMinimize queries, cache results

Editing the Top Panel Template

Using Built-in Editor (v25.5.0+)

  1. Open RISKSHEET document
  2. Click Menu > Configuration > Edit Top Panel Configuration…
  3. Editor displays with syntax highlighting
  4. Make changes to template
  5. Click Save
  6. Changes apply immediately upon page reload

Manual Editing Process

  1. Open Polarion document in LiveDoc
  2. Navigate to Attachments tab
  3. Locate risksheetTopPanel.vm file
  4. Click Download to save locally
  5. Edit in text editor (VS Code, Notepad++, etc.)
  6. Save edited file
  7. Upload file back to document attachments
  8. Refresh RISKSHEET page to see changes

Complete Example: Multi-Field Top Panel

<div class="rs-panel">
  <div class="rs-row">
    <div class="rs-label">Item:</div>
    <div class="rs-value">$!document.customFields.item</div>
    <div class="rs-label">Status:</div>
    <div class="rs-value">#set($s = $!document.customFields.status)#if($s)$s#else<em>Unknown</em>#end</div>
    <div class="rs-label">Version:</div>
    <div class="rs-value">$!document.customFields.version</div>
  </div>
  <div class="rs-row">
    <div class="rs-label">Owner:</div>
    <div class="rs-value">$!document.customFields.owner</div>
    <div class="rs-label">Team:</div>
    <div class="rs-value">$!document.customFields.team</div>
    <div class="rs-label">Updated:</div>
    <div class="rs-value">$!document.updated</div>
  </div>
</div>

Version Information

  • Minimum Version: RISKSHEET 25.0.0
  • Built-in Editor: RISKSHEET 25.5.0+
  • Template Engine: Apache Velocity 2.0+
  • Polarion Compatibility: 22.2+
Support TicketsSource Code
  • RisksheetViewServlet.java
  • AppConfig.ts
  • MaximizeViewCommand.ts
  • DocumentConfigProvider.java
  • RiskSheetContextMenu.ts