- 10 minutes to read

Custom Dashboard Items

On this page, you learn how to extend the Nodinite Dashboard with custom content including HTML widgets, Power BI reports, and metrics from Monitoring Agents. This extensibility enables you to add business-specific KPIs and visualizations directly into the Dashboard.

Available Custom Dashboard Items

Nodinite provides several ways to extend the Dashboard with custom content:

  1. HTML Widgets - Static HTML content (environment badges, team announcements)
  2. Embedded Power BI Reports - Business intelligence dashboards
  3. Metrics Charts - Performance graphs from Monitoring Agents
  4. Any Embedded HTML - Custom iframe content

HTML Widgets for Dashboard

Add static HTML widgets to the main Dashboard page visible to all users.

When to Use HTML Widgets

Acceptable Use Cases (Static Content Only)

  • Environment identification badges - Display prominent visual indicator showing which environment users are viewing (Production, UAT, Development)
  • Team announcements - Display important team notices, change windows, or links to runbooks
  • Contact information - Static on-call engineer details or escalation contacts

Deprecated Use Cases

  • ❌ Real-time API data fetching - JavaScript API calls will be blocked
  • ❌ External alerting integrations - Webhook calls and external HTTP requests will be blocked
  • ❌ Custom data visualizations - Chart.js and other JavaScript libraries will be blocked
  • ❌ Dynamic KPI dashboards - Use built-in Dashboard features or Power BI instead

Step-by-Step: Adding Dashboard HTML Widget

Prerequisites

  • Nodinite Administrator access to web server
  • File system permissions for C:\Program Files\Nodinite\[Instance]\WebClient\Plugins\
  • IIS Manager access for app pool recycling

Steps

  1. Navigate to WebClient Directory

    C:\Program Files\Nodinite\[Instance]\WebClient\

    Replace [Instance] with your Nodinite instance name (e.g., Production, Test)

  2. Create Plugins Folder (if it doesn't exist)

    C:\Program Files\Nodinite\[Instance]\WebClient\Plugins\

  3. Create HTML Widget File

    • Create a file with any .html name (e.g., team-announcements.html, environment-notice.html)
    • The file name does NOT need to match anything specific
    • Important: Add only static HTML content; JavaScript will be blocked by upcoming sanitization

  4. Recycle IIS App Pool

    • Open IIS Manager (inetmgr)
    • Navigate to Application Pools
    • Find the Nodinite app pool (e.g., Nodinite_Production)
    • Right-click → Recycle

  5. Verify Widget Appears

    • Navigate to your installed instance i.e., https://[nodinite-prod.acme.com]/ or http://localhost:40000/
    • Widget appears at the top of the Dashboard page

Dashboard Widget Example (Static Content)

Recommended: Use static HTML for team announcements or status indicators.

<!-- File: C:\Program Files\Nodinite\Production\WebClient\Plugins\team-status.html -->
<div class="card mb-4" style="border-left: 4px solid #0066cc;">
  <div class="card-header bg-light">
    <h5 class="mb-0">
      <i class="fas fa-info-circle text-primary" aria-hidden="true"></i>
      Integration Team Status
    </h5>
  </div>
  <div class="card-body">
    <p><strong>On-Call Engineer:</strong> Sarah Johnson (ext. 5432)</p>
    <p><strong>Next Maintenance Window:</strong> Saturday, March 15, 2025 - 02:00-06:00 UTC</p>
    <p>
      <a href="https://wiki.acme.com/integration-runbooks" class="btn btn-primary btn-sm">
        <i class="fas fa-book" aria-hidden="true"></i> View Runbooks
      </a>
    </p>
  </div>
</div>

Status: Will work after sanitization - Static HTML only

Environment Badge Example 

<!-- File: environment-badge.html -->
<div class="alert alert-warning mb-3" role="alert" style="border-left: 4px solid #ff9800;">
  <h4 class="alert-heading">
    <i class="fas fa-flask" aria-hidden="true"></i>
    UAT Environment
  </h4>
  <p class="mb-0">
    You are viewing the <strong>User Acceptance Testing</strong> environment.
    Changes here do not affect production systems.
  </p>
</div>

Status: Will work after sanitization - Static HTML only

Simple Counter Widget Example 

<!-- File: events-today.html -->
<div class="card mb-3">
  <div class="card-header">
    <i class="fas fa-calendar-day" aria-hidden="true"></i>
    Events today
  </div>
  <div class="card-body text-center">
    <h1 class="display-1 text-success">1</h1>
    <p class="text-muted mb-0">Last updated: 2020-09-15 11:41:43</p>
  </div>
</div>

Events Today Widget Example
Example: Simple counter widget displaying event count from a Log View.

Status: Will work after sanitization - 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

Embedded Power BI Reports

All information within Nodinite may be consumed from within Power BI using the REST-based Web API. The following example uses Embedded HTML from the Power BI platform with data from the Web API.

Power BI embedded in Dashboard
Example: Embedded Power BI report displaying integration statistics in the Nodinite Dashboard.

To embed Power BI reports in your Dashboard, follow the same HTML widget deployment process above, using the embed code generated from Power BI.

Metrics Charts from Monitoring Agents

Using Metrics from any of the supported Monitoring Agents an Administrator can add, and organize information on the Dashboard.

Metrics chart from Monitoring Agents
Example: Performance metrics from Windows Server Monitoring Agent displayed on Dashboard.

Available Metrics Sources

Adding Metrics to Dashboard

Follow these steps to add Metrics graphs to the Dashboard (you need RDP to the IIS server hosting the Web Client and administrative privileges):

  1. Create an HTML file in the C:\Program Files\Nodinite\[Instance]\Nodinite Core Services\WebClient\Plugins folder

  2. Copy the HTML content from the Metrics modal (Resource in Monitor View where Actions are allowed and Metrics are available)

    Metrics HTML example
    Example: Copy metrics HTML code from a resource's metrics modal.

  3. Reload Dashboard page

Metrics Template

The following template may be used to create a single framed box hosting 4 metrics graphs in a 2×2 table. Replace the card-header with your appropriate title and replace the comments with the code to embed from metrics enabled resources.

<div class="row">
  <div class="col-12 col-md-6 mb-3">
    <div class="card">
      <div class="card-header">Server Performance - Production SQL01</div>
      <div class="card-body p-2">
        <div class="row">
          <!-- Replace with CPU metrics embed code -->
          <!-- Replace with Memory metrics embed code -->
        </div>
        <div class="row">
          <!-- Replace with Disk metrics embed code -->
          <!-- Replace with Network metrics embed code -->
        </div>
      </div>
    </div>
  </div>
</div>

Any Embedded Valid HTML

Using the technique in the previous steps, any code of your own liking may be added for display in the Dashboard of Nodinite.

Tip

If you have other custom Dashboards you can include them on the Nodinite Dashboard.

<iframe src="https://vecka.nu" style="width:100%; height:400px; border:1px solid #ccc;"></iframe>

Best Practices

Do's

  • Keep content static - Use only HTML markup and CSS classes (Bootstrap, Font Awesome)
  • Include ARIA attributes - aria-label, aria-hidden, role="alert" for accessibility
  • Use semantic HTML - Proper heading hierarchy (<h2>, <h3>), lists, paragraphs
  • Use descriptive file names - team-announcements.html not widget1.html
  • Minimize widget usage - Only create widgets when built-in features cannot meet your needs
  • Plan for migration - Prepare to move to the new extensibility system when available
  • Responsive design - Use Bootstrap grid classes (col-md-6, mb-3) for proper layout
  • Test accessibility - Verify color contrast (4.5:1 minimum), screen reader compatibility

Don'ts

  • Never use JavaScript - All <script> tags, inline event handlers (onclick), and javascript: URLs will be blocked
  • Don't load external resources - CDN scripts, external stylesheets, and third-party libraries will be blocked
  • Never embed credentials - Don't include API keys, passwords, or connection strings
  • Don't rely on dynamic behavior - No API calls, no DOM manipulation, no real-time updates
  • Avoid iframes - Embedding external content will be restricted
  • Don't rely on color alone - Use icons + text for status indicators (WCAG AA)
  • Don't build critical functionality - Custom widgets are transitional and will be deprecated

Troubleshooting

Widget Not Appearing

Problem

Widget HTML file created but not visible on Dashboard.

Solutions

  1. Verify IIS App Pool Recycled

    • Open IIS Manager → Application Pools → Find Nodinite pool → Recycle

  2. Check File Location

    • Dashboard widgets: WebClient\Plugins\*.html
    • File must have .html extension
    • Ensure file is directly in Plugins\ folder, not in a subfolder

  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)
    • Clear browser cache and reload

Styling Conflicts

Problem

Widget styling clashes with Nodinite built-in styles.

Solution

  1. Use Bootstrap Classes

    • Leverage existing classes: mb-3, text-center, alert-info
    • Consistent styling with Nodinite UI

  2. Avoid Global CSS Resets

    • Don't use * { margin: 0; } or body { font-family: ... }
    • These override Nodinite styles

  3. Scope CSS to Widget

    • Use specific class names: .my-widget-container { ... }
    • Avoid generic selectors that affect entire page

Security Considerations

Current Security Risks

  • Script injection vulnerabilities - Malicious HTML files could execute unauthorized JavaScript
  • Session hijacking - Widgets execute with full user privileges and access to cookies
  • Data exfiltration - Unrestricted API access could leak sensitive integration data
  • Credential theft - Fake login forms could harvest user credentials

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, blogs, or community templates
  6. Prepare for sanitization - Upcoming security updates will block JavaScript to prevent these risks

For security administrators: This feature will be replaced with a secure extensibility framework. Current implementation relies on administrative trust and file system access controls.

Next Steps

Before creating custom widgets:

  1. Evaluate alternatives - Review built-in Dashboard features, Stylesheets, and Display Field Configurations first
  2. Understand limitations - Only static HTML will be supported after sanitization; no JavaScript or external resources
  3. Plan for migration - This feature will be deprecated; prepare to migrate to the new extensibility framework
  4. Keep it simple - Create minimal, static content widgets for environment badges or announcements only
  5. Test thoroughly - Verify accessibility, responsiveness, and appearance after IIS recycle

Recommendation: Use custom widgets only for critical static content that cannot be achieved through built-in features. Avoid building complex functionality that will need to be rewritten when the new extensibility system is released.