Extending Monitor Views with Custom Widgets

On this page, you learn how to add custom HTML widgets to specific Monitor View pages in Nodinite. This extensibility enables you to add context-specific environment badges, contacts, or compliance notices to the Monitor View they belong to.

Animated walkthrough: the Monitor View Contoso Orders shows its own on-call widget above the Resources, and another Monitor View shows none.

What are Monitor View Widgets?

Monitor View widgets are HTML plugins: small extensions that show custom HTML content above the notifications section (the Resources) in specific Monitor Views. Unlike Dashboard widgets (which are visible to all users), Monitor View widgets:

• Target specific Monitor Views - Widget only appears in the Monitor View with matching ID
• Respect access controls - ^{New 7.12} Only users with permission to view that Monitor View see the widget, on the page and through the widget's own address
• Provide context - Add environment-specific notices or compliance warnings for critical production resources

When to Use Monitor View Widgets

Good Use Cases

• Environment identification badges - Display prominent visual indicator for Production vs UAT Monitor Views
• Compliance notices - Display regulatory warnings for HIPAA/SOX-controlled systems
• Escalation contacts - Show on-call engineer details for critical production Monitor Views
• Change freeze warnings - Display maintenance window notifications for specific environments

Blocked Use Cases

• ❌ Content and calls to other sites - Blocked by default; frames to other sites are always blocked
• ❌ Dynamic resource status - Use built-in Monitor View features instead
• ❌ Custom alerting - Webhook calls and external HTTP requests are blocked; use Alarm Plugins instead

Step-by-Step: Adding Monitor View Widget

Prerequisites

• Nodinite Administrator access to web server
• Write access to the Plugins\MonitorViews\ folder of the Web Client site on the web server
• Know your Monitor View ID (see below)

Finding Your Monitor View ID

1. Navigate to the Monitor View in Nodinite Web Client
2. Check the URL in your browser address bar
3. Look for MonitorView/ followed by a number

Examples:

• URL: https://nodinite.contoso.com/Monitor/MonitorView/9 → Monitor View ID = 9
• URL: https://nodinite.contoso.com/Monitor/MonitorView/42 → Monitor View ID = 42

Steps

1. Open the Web Client folder

   On Windows Server, this is the physical path of the Web Client site in IIS Manager. It holds the Plugins folder for HTML widgets.

2. Create the MonitorViews folder (if it doesn't exist)

   <Web Client folder>\Plugins\MonitorViews\
   

3. Create HTML Widget File

   • Critical: File name MUST exactly match the Monitor View ID
   • Monitor View ID 9 → File name: 9.html
   • Monitor View ID 42 → File name: 42.html

   Important

   Inline scripts and content from other sites are blocked by the sandbox; keep to HTML and the Web Client's CSS classes

   
   Example: Widget file 5.html in the WebClient\Plugins\MonitorViews\ folder for Monitor View ID 5.

4. Add Your HTML Content

   Create a file with static HTML (see examples below)

5. Verify Widget Appears

   • Open or reload your Monitor View: https://nodinite.contoso.com/Monitor/MonitorView/[ID]. The Web Client reads the file on every request, so no restart or recycle is needed.
   • Widget appears above the notifications section

Monitor View Widget Examples

Production Environment Badge

<!-- File: <Web Client folder>\Plugins\MonitorViews\9.html -->
<!-- Monitor View ID: 9 (Production SAP Systems) -->
<div class="alert alert-danger mb-3" role="alert" style="border-left: 4px solid #d32f2f;">
  <h4 class="alert-heading">
    <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
    PRODUCTION ENVIRONMENT
  </h4>
  <p class="mb-0">
    <strong>Warning:</strong> You are viewing <strong>live production systems</strong>.
    All changes require change management approval. Contact on-call engineer before restarting resources.
  </p>
</div>

Status: Works with the default settings - Static HTML only

Compliance Notice Example

<!-- File: 42.html (HIPAA-Controlled Healthcare Integration) -->
<div class="card mb-3" style="border-left: 4px solid #ff9800;">
  <div class="card-header bg-warning">
    <h5 class="mb-0">
      <i class="fas fa-shield-alt" aria-hidden="true"></i>
      HIPAA Compliance Notice
    </h5>
  </div>
  <div class="card-body">
    <p>
      <strong>Regulated Environment:</strong> This Monitor View contains ePHI (Electronic Protected Health Information).
    </p>
    <ul>
      <li><strong>Access Logged:</strong> All views and actions are audited for compliance</li>
      <li><strong>No Screenshots:</strong> Capturing ePHI data is prohibited</li>
      <li><strong>Report Issues:</strong> Contact Compliance Officer (ext. 7890)</li>
    </ul>
    <p class="mb-0">
      <a href="https://wiki.contoso.com/hipaa-integration-policy" class="btn btn-warning btn-sm">
        <i class="fas fa-file-alt" aria-hidden="true"></i> View HIPAA Policy
      </a>
    </p>
  </div>
</div>

Status: Works with the default settings - Static HTML only

On-Call Contact Information

<!-- File: 15.html (Critical Payment Processing Monitor View) -->
<div class="card mb-3">
  <div class="card-header bg-primary text-white">
    <h5 class="mb-0">
      <i class="fas fa-phone" aria-hidden="true"></i>
      24/7 Escalation Contacts
    </h5>
  </div>
  <div class="card-body">
    <p><strong>Primary On-Call:</strong> John Smith (mobile: +1-555-0100)</p>
    <p><strong>Backup Contact:</strong> Sarah Johnson (mobile: +1-555-0101)</p>
    <p><strong>Team Email:</strong> <a href="mailto:payments-oncall@contoso.com">payments-oncall@contoso.com</a></p>
    <p class="mb-0">
      <strong>SLA:</strong> 15-minute response time for P1 incidents
    </p>
  </div>
</div>

Status: Works with the default settings - Static HTML only

Accessibility Notes

• Use semantic HTML: <h2>, <h3>, <p>, <ul>, <a>
• Add ARIA attributes: aria-label, aria-hidden="true" on decorative icons
• Ensure color contrast meets WCAG AA (4.5:1 for normal text)
• Provide text alternatives: Don't rely on color alone for meaning
• Use role="alert" for important warnings

Comparison: Dashboard vs Monitor View Widgets

Available Libraries and Styling

Bootstrap 4.6.2

The widget frame loads the Web Client's own Bootstrap 4.6.2. Use these classes for consistent styling:

• Layout: container, row, col-md-6, mb-3, p-2
• Alerts: alert, alert-info, alert-warning, alert-danger
• Cards: card, card-header, card-body
• Buttons: btn, btn-primary, btn-sm
• Text: text-center, text-muted, font-weight-bold (not the Bootstrap 5 fw-bold)

Font Awesome Pro 7.3.0

Use Font Awesome icons with <i> tags:

<i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
<i class="fas fa-shield-alt" aria-hidden="true"></i>
<i class="fas fa-phone" aria-hidden="true"></i>

Always include aria-hidden="true" on decorative icons.

Best Practices

Do's

• Keep content static - Use only HTML markup and CSS classes (Bootstrap, Font Awesome)
• Match Monitor View ID exactly - File name 9.html only works for Monitor View ID 9
• Use descriptive badges - Make environment/compliance status visually obvious
• Include contact information - Provide escalation paths for critical Monitor Views
• Test with actual users - Verify users with Monitor View access can see the widget
• Plan for migration - Nodinite 8 replaces HTML widgets

Don'ts

• Don't write inline scripts - <script> blocks and inline event handlers are blocked by default
• Don't load content from other sites - CDN scripts and stylesheets are blocked by default
• Never embed credentials - Don't include API keys or passwords
• Don't build critical functionality - Nodinite 8 replaces HTML widgets
• Don't rely on color alone - Use icons + text for status indicators (WCAG AA)

Troubleshooting

Widget Not Appearing

Problem

Widget HTML file created but not visible in Monitor View.

Solution

• File name must exactly match Monitor View ID from URL
• Monitor View URL: https://nodinite.contoso.com/Monitor/MonitorView/9 → File name: 9.html
• Monitor View URL: https://nodinite.contoso.com/Monitor/MonitorView/42 → File name: 42.html

Additional Checks

1. Verify the Product Key

   • Widgets need the DashboardPlugins feature in the product key; see Custom Dashboard Items

2. Check File Location

   • Monitor View widgets: <Web Client folder>\Plugins\MonitorViews\[ID].html
   • File must be in MonitorViews\ subfolder, not root Plugins\ folder

3. Verify File Permissions

   • IIS app pool identity must have Read access to the file
   • Right-click file → Properties → Security → Verify IIS AppPool\[PoolName] has Read access

4. Check Browser Cache

   • Hard refresh: Ctrl+F5 (Windows), Cmd+Shift+R (Mac)

Security Considerations

Security Model

Widgets work within these security restrictions:

• Sandboxed iframe with a Content Security Policy - The widget HTML isn't rewritten; the browser blocks inline scripts, eval(), and content, calls, and frames to other sites. DashboardPluginSettings opens parts of the policy; only AllowScripts is on by default.
• Access control - ^{New 7.12} A Monitor View widget shows only to users who can open that Monitor View; the widget's own address refuses everyone else.
• Administrative trust - Anyone who can write to the Plugins folder can change what every user of the Monitor View sees.

Required Precautions

1. Restrict file system access - Only allow trusted administrators to add widget files
2. Code review all widgets - Manually inspect HTML files before deployment
3. Audit logging - Monitor widget file changes via file system auditing
4. Minimize usage - Remove unnecessary widgets to reduce attack surface
5. Never use untrusted sources - Do not copy widget code from forums or community templates

Before You Create a Widget

1. Evaluate alternatives - Review built-in Monitor View features and Stylesheets first
2. Keep it simple - HTML markup with the Web Client's Bootstrap and Font Awesome classes works with the default settings
3. Plan for migration - Nodinite 8 replaces HTML widgets with a secure extensibility framework
4. Test thoroughly - Verify accessibility, responsiveness, and appearance

Next Steps

• Custom Dashboard Items - Add HTML widgets to the Dashboard
• Add or manage Monitor View - Create the Monitor View a widget belongs to

Related Topics

• Monitor Views Overview - Learn about Monitor View features and capabilities
• Custom Dashboard Items - Add widgets to the main Dashboard page
• Stylesheets - Apply custom CSS to log messages and alerts
• Working with a Monitor View - Monitor View user guide
• DashboardPluginSettings - Set what widgets may do in their sandbox