Skip to main content

​
Locate the Tour Script

Navigate to .polarion/pages/spaces/_default/ in your project configuration and locate the page containing the tour script attachment:
  1. Find the page that embeds the Risksheet (typically a FMEA analysis page)
  2. Look for <attachment> elements referencing risksheet-tour.js
  3. Download the current version for editing

​
Configure Tour Settings

Add a configuration block before the tour script loads to customize behavior: 
<script>
window.risksheetTourConfig = {
  projectId: 'AutoProject',           // Override project ID detection
  tourId: 'custom-dfmea-tour',        // Unique ID for localStorage tracking
  autoStart: true,                    // Auto-launch for first-time users
  autoStartDelay: 3000                // Wait 3 seconds before tour starts
};
</script>
<script src="$page.getAttachmentURL('risksheet-tour.js')"/>
Tours are tracked per browser using localStorage key tour-seen-{tourId}. Change tourId when you update tour content to re-trigger it for all users.

​
Edit Tour Steps

Download risksheet-tour.js and modify the tour step definitions: 
const fullTourSteps = [
  {
    element: '#nxtr-topPanel .rs-green-colored',
    popover: {
      title: 'Welcome to Your DFMEA',
      description: 'This Risksheet analyzes design failure modes...',
      side: 'bottom',
      align: 'start'
    }
  },
  {
    element: '#theGrid',
    popover: {
      title: 'Design Failure Modes Grid',
      description: 'Edit failure modes, effects, causes, and severity ratings directly in the spreadsheet.',
      side: 'top',
      align: 'center'
    }
  },
  {
    element: '#btnColumns',
    popover: {
      title: 'Progressive Views',
      description: 'Switch between Pre-Mitigation Analysis, Risk Controls, and Post-Mitigation Assessment views.',
      side: 'left'
    }
  }
  // Add more steps...
];

​
Tour Step Structure

PropertyDescription
elementCSS selector that highlights the target UI element
popover.titleStep title displayed in the instruction popover
popover.descriptionExplanation text for the current step
popover.sidePopover position: top, bottom, left, or right
popover.alignPopover alignment: start, center, or end

​
Customize Tour Triggers

The tour script provides two triggers:
TriggerPurposeCode Location
Auto-startLaunches tour for first-time users on page loadif (shouldAutoStart()) block
Manual button”▶ Intro Tour” button in page footercreateFooterButton() function
Help buttonShort tour focused on traffic lights#help-tour-btn click handler
To disable auto-start but keep manual trigger: 
window.risksheetTourConfig = {
  autoStart: false  // Users must click footer button
};

​
Customize Popover Appearance

Modify Driver.js configuration options in the initDriver() function: 
const driver = driver({
  showProgress: true,               // Show "2 of 7" step counter
  progressText: 'Step {{current}} of {{total}}',
  nextBtnText: 'Next →',
  prevBtnText: '← Back',
  doneBtnText: 'Start Working!',
  showButtons: ['next', 'previous', 'close'],
  overlayColor: 'rgba(0, 0, 0, 0.7)',  // Darker overlay
  stagePadding: 5,                  // Highlight padding around element
  stageRadius: 8                    // Rounded corners on highlight
});

​
Add Custom Tour Steps for New Features

When you add custom Risksheet columns or features, add corresponding tour steps: 
{
  element: '#columnMyCustomField',
  popover: {
    title: ' New Custom Field',
    description: 'We added a custom Supplier Responsibility field to track external mitigation actions.',
    side: 'bottom'
  }
}
Tour steps fail silently if the CSS selector doesn’t match a visible element. Test your tour after configuration changes by clearing localStorage: localStorage.removeItem('tour-seen-custom-dfmea-tour').

​
Configure Short Tour vs Full Tour

The script supports two tour variants: Full Tour (8 steps): Covers entire Risksheet workflow — triggered on first visit or footer button click. Short Tour (3 steps): Focuses only on traffic lights status indicators — triggered by help button. To customize the short tour: 
const shortTourSteps = [
  {
    element: '#traffic-light-container',
    popover: {
      title: 'FMEA Completion Status',
      description: 'Three traffic lights show: pre-mitigation completeness, post-mitigation status, high-risk item count.',
      side: 'bottom'
    }
  }
  // Edit remaining 2 steps...
];

​
Upload Modified Script

After editing the tour script:
  1. Open the Polarion page in edit mode
  2. Upload the modified risksheet-tour.js file as an attachment
  3. Verify the <script src="$page.getAttachmentURL('risksheet-tour.js')"/> reference is correct
  4. Save the page
  5. Test by clearing localStorage and reloading: localStorage.clear()

​
Verify Tour Customization

After uploading:
  1. Open the Risksheet page in a new incognito browser window (to bypass localStorage)
  2. Wait for autoStartDelay milliseconds
  3. You should see the customized tour launch automatically
  4. Navigate through all steps using Next → button or Arrow Right key
  5. Verify all element selectors highlight the correct UI components
  6. Click the ▶ Intro Tour footer button to confirm manual trigger works
Use browser console to reset tour state without clearing all localStorage: localStorage.removeItem('tour-seen-custom-dfmea-tour'). Replace custom-dfmea-tour with your actual tourId.

​
See Also