- 0 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.

Warning

Security Notice: Custom HTML widgets are subject to strict content sanitization that removes JavaScript, inline event handlers, and external resource loading. This sanitization is necessary to meet enterprise security standards. Do not build critical functionality that depends on unrestricted HTML/JavaScript execution.

Important

Breaking Change in 7.4.0: Custom Dashboard functionality now requires an explicit flag in your Nodinite product key. Existing installations that used custom dashboards prior to version 7.4.0 will stop displaying custom HTML widgets unless the product key is updated. Contact Nodinite support to request the Custom Dashboard feature flag if you have a legitimate business requirement. This feature cannot be enabled locally—the attack vector is now fully closed.

Tip

Granular Security Controls (7.4.0+): The DashboardPluginSettings system parameter provides fine-grained control over allowed HTML elements, JavaScript execution, and external resources in custom dashboards. All security settings are disabled by default. This parameter is only functional if your product key includes the Custom Dashboard feature flag. Contact [Nodinite support]: for configuration guidance.

Available Custom Dashboard Items

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

  1. HTML Widgets - Static content (environment badges, team announcements) and dynamic counters using internal APIs
  2. Embedded Power BI Reports - Business intelligence dashboards
  3. Metrics Charts - Performance graphs from Monitoring Agents

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

  • 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
  • Dynamic counters from internal APIs - Display counts, metrics, and KPIs from Nodinite Log Views and internal Web API endpoints

Blocked Use Cases

  • ❌ External API data fetching - Calls to third-party APIs and external services are blocked for security
  • ❌ External alerting integrations - Webhook calls and external HTTP requests are blocked
  • ❌ Custom JavaScript libraries - Chart.js and other third-party JavaScript libraries are blocked
  • ❌ Arbitrary JavaScript execution - <script> tags, inline event handlers, and eval() are blocked

Step-by-Step: Adding Dashboard HTML Widget

Prerequisites

New 7.4.0

  • Nodinite product key with Custom Dashboard feature flag enabled (contact support to request)
  • Nodinite Administrator access to web server
  • File system permissions for C:\Program Files\Nodinite\[Instance]\WebClient\Plugins\
  • IIS Manager access for app pool recycling

Version 7.4.0+ Breaking Change: If custom HTML widgets do not appear after upgrading to 7.4.0 or later, your product key does not include the Custom Dashboard feature flag. This is a security-by-design requirement—the feature cannot be enabled locally or through configuration files.

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: Content sanitization is active - unsafe JavaScript, external resources, and inline event handlers are blocked. Use static HTML, Bootstrap classes, and Angular directives for internal API calls only

  4. 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

Dynamic Log View Counter Example

Important

Breaking Change in 7.3.0: Parameter replacement syntax changed from 'eval' to 'text'. If you have existing Log View widgets from earlier versions, you must update the replace configuration as shown below.

Using any of the user-defined Log Views, the returned number of events can be rendered dynamically. Use the customJsonCountController with simple parameter replacement as exemplified below.
Number of Log Events from Log View
Example: Number of Log Events from a :Nodinite. Log View

<!-- File: orders-today.html -->
<div class="card mb-3" ng-controller="customJsonCountController" ng-init="init('',{'title':'Events today',progressbar:true, refreshInterval:30, call:{ webapi: webApiUrl + 'api/Search/FlowSearch?logViewId=17&searchJson=%7B%22FilterGroups%22%3A%5B%5D,%22NumberOfItems%22%3A0,%22Page%22%3A1,%22From%22%3A%22$from$%22,%22To%22%3A%22$to$%22,%22DataSource%22%3A%7B%7D%7D',jsonPath:'Collection.Pagination.TotalNumberOfItemsAvailable','replace':[{'find':'$from$', 'text':'encodeURIComponent(moment().startOf('day').format(variables.dateTimeFormat))'},{'find':'$to$', 'text':'encodeURIComponent(moment().endOf('day').format(variables.dateTimeFormat))'}]}})">
    <div ng-show="gui.loading" class="card-header"><span><i class="fa fa-spinner fa-spin"></i> Loading...</span></div>
    <div ng-show="!gui.loading" class="card-header ng-hide"><i ng-if="gui.titleIcon" class="fa" ng-class="gui.titleIcon"></i> <span class="ng-hide" ng-show="gui.title">{{gui.title}}</span></div>
    <div class="card-body p-1">
        <div style="font-size:100px; text-align:center;" ng-style="{'color':gui.count == 0?'#FF3F2C':'#3d9970'}">
            <div class="ng-hide" ng-show="!gui.loading">{{gui.count}}</div>
            <div ng-show="gui.loading">&nbsp;</div>
        </div>
        <div style="font-size:8px; padding-right:4px;" class="text-gray pull-right ng-hide" ng-show="!gui.loading">Last updated: {{gui.lastupdated}}</div>
        <div class="clearfix"></div>
        <div class="widget-progressbar">
            <div ng-if="gui.progressbar.enabled" ng-class="{'notransition':gui.progressbar.value==0}" class="progress" ng-style="{'width':gui.progressbar.value + '%'}"></div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

Configuration:

  • Replace logViewId=17 with the ID of your Log View (17 in this example)
  • The widget automatically refreshes every 30 seconds (refreshInterval:30)
  • Set a title ('title':'Events today')
  • Colors change based on count: Red (#FF3F2C) for 0 events, Green (#3d9970) for >0
  • Date range is dynamically set to "today" using $from$ and $to$ parameter replacement

Migration from pre-7.4.0 versions:

If you have existing widgets using the old 'eval' syntax, update your replace configuration:

// ❌ Old syntax (pre-7.3.0) - Will be blocked by sanitization
'replace':[
  {'find':'$from$', 'eval':'encodeURIComponent(moment().startOf(\'day\').format(variables.dateTimeFormat))'},
  {'find':'$to$', 'eval':'encodeURIComponent(moment().endOf(\'day\').format(variables.dateTimeFormat))'}
]

// ✅ New syntax (7.3.0+) - Simplified without escaping
'replace':[
  {'find':'$from$', 'text':'encodeURIComponent(moment().startOf('day').format(variables.dateTimeFormat))'},
  {'find':'$to$', 'text':'encodeURIComponent(moment().endOf('day').format(variables.dateTimeFormat))'}
]

Key changes:

  1. Replace 'eval' with 'text'
  2. Remove backslash escaping from single quotes inside the text value (e.g., \'day\' becomes 'day')

Status: Will work after sanitization - Angular directives and parameter replacement are safe

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 arbitrary JavaScript - All <script> tags, inline event handlers (onclick), and javascript: URLs are blocked
  • Don't load external resources - External CDN scripts, stylesheets, and third-party libraries are blocked
  • Never embed credentials - Don't include API keys, passwords, or connection strings
  • Don't call external APIs - Only Nodinite internal Web API endpoints are allowed
  • Avoid iframes to external sites - Embedding external content is restricted for security
  • Don't rely on color alone - Use icons + text for status indicators (WCAG AA)
  • Keep widgets simple - Complex functionality may be better suited for built-in features or Power BI

Troubleshooting

Widget Not Appearing

Problem

Widget HTML file created but not visible on Dashboard.

Solutions

New 7.4.0

  1. Verify Product Key Includes Custom Dashboard Feature Flag (7.4.0+)

    • Custom dashboards require an explicit feature flag in your Nodinite product key
    • Contact Nodinite support to request the Custom Dashboard feature flag
    • Check product key status: Administration → Settings → License Information
    • Security by design: This feature cannot be enabled locally or through configuration files

  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

New 7.4.0

Security Model (Version 7.4.0+)

As of version 7.4.0, Nodinite has implemented defense-in-depth security controls for custom dashboards:

  1. Product Key Authentication - Custom dashboard functionality requires an explicit feature flag in the product key. This attack vector is now fully closed—malicious actors cannot locally enable custom dashboards.
  2. Content Sanitization - All HTML content is sanitized to remove JavaScript, inline event handlers, external scripts, and unsafe attributes.
  3. File System Access Control - Only administrators with server file system access can deploy widget files.
  4. Granular Security Settings - The DashboardPluginSettings system parameter allows administrators to control JavaScript execution, external content loading, and API calls. All capabilities disabled by default for zero-trust security.

Security Best Practices

  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. Request feature flag only when needed - Only request Custom Dashboard product key flag for legitimate business requirements (7.4.0+)
  7. Use internal APIs only - Only Nodinite internal Web API endpoints are supported; external API calls are blocked for security
  8. Review DashboardPluginSettings - Configure granular security controls based on your specific requirements; start with defaults (all disabled) and enable only necessary capabilities

For security administrators (7.4.0+): Custom dashboards require product key authentication (cannot be enabled locally), content sanitization removes unsafe code, and the DashboardPluginSettings system parameter provides granular control over JavaScript, external content, and API calls. This multi-layered approach ensures enterprise-grade security.

Next Steps

Before creating custom widgets:

  1. Evaluate alternatives - Review built-in Dashboard features, Stylesheets, and Display Field Configurations first
  2. Understand security controls - Content sanitization blocks external resources, arbitrary JavaScript, and unsafe HTML attributes
  3. Request product key flag - Contact support to enable Custom Dashboard feature in your license
  4. Use internal APIs only - Dynamic widgets can call Nodinite Web API endpoints; external API calls are blocked
  5. Test thoroughly - Verify accessibility, responsiveness, and appearance after IIS recycle

Recommendation: Custom dashboards are now secure with product key authentication and content sanitization. Use them for static content, team announcements, and internal API counters. For complex analytics, consider Power BI integration.