mirror/NetAlertX
1
0
Fork 0
mirror of https://github.com/jokob-sk/NetAlertX.git synced 2026-01-29 09:01:22 -05:00
Code Issues Packages Projects Releases Wiki Activity
Files
2c00ec7b656dbd080279ea3eaacc2ba425f8f372
NetAlertX/PLUGINS_DEV_UI_COMPONENTS/index.html

6411 lines
148 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="The main documentation resource for NetAlertX - a network scanner and presence detector">
<link rel="canonical" href="https://docs.netalertx.com/PLUGINS_DEV_UI_COMPONENTS/">
<link rel="prev" href="../PLUGINS_DEV_DATASOURCES/">
<link rel="next" href="../PLUGINS_DEV_CONFIG/">
<link rel="icon" href="../img/netalertx_docs.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.7.1">
<title>UI Components - NetAlertX Documentation</title>
<link rel="stylesheet" href="../assets/stylesheets/main.484c7ddc.min.css">
<link rel="stylesheet" href="../assets/stylesheets/palette.ab4e12ef.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
<!-- Google Tag Manager -->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-KCRSGLP8J2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-KCRSGLP8J2');
</script>
<!-- End Google Tag Manager -->
</head>
<body dir="ltr" data-md-color-scheme="slate" data-md-color-primary="indigo" data-md-color-accent="deep-purple">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#plugin-ui-components" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KCRSGLP8J2"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href=".." title="NetAlertX Documentation" class="md-header__button md-logo" aria-label="NetAlertX Documentation" data-md-component="logo">
<img src="../img/netalertx_docs.png" alt="logo">
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
NetAlertX Documentation
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
UI Components
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="" data-md-color-scheme="slate" data-md-color-primary="indigo" data-md-color-accent="deep-purple" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 2.38 1.19 4.47 3 5.74V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.26c1.81-1.27 3-3.36 3-5.74a7 7 0 0 0-7-7M9 21a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-1H9z"/></svg>
</label>
<input class="md-option" data-md-color-media="" data-md-color-scheme="default" data-md-color-primary="black" data-md-color-accent="deep-purple" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 7 7c0 2.38-1.19 4.47-3 5.74V17a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 0 1 7-7M9 21v-1h6v1a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1m3-17a5 5 0 0 0-5 5c0 2.05 1.23 3.81 3 4.58V16h4v-2.42c1.77-.77 3-2.53 3-4.58a5 5 0 0 0-5-5"/></svg>
</label>
</form>
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<a href="javascript:void(0)" class="md-search__icon md-icon" title="Share" aria-label="Share" data-clipboard data-clipboard-text="" data-md-component="search-share" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08"/></svg>
</a>
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</nav>
<div class="md-search__suggest" data-md-component="search-suggest"></div>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/jokob-sk/NetAlertX/" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M439.6 236.1 244 40.5c-5.4-5.5-12.8-8.5-20.4-8.5s-15 3-20.4 8.4L162.5 81l51.5 51.5c27.1-9.1 52.7 16.8 43.4 43.7l49.7 49.7c34.2-11.8 61.2 31 35.5 56.7-26.5 26.5-70.2-2.9-56-37.3L240.3 199v121.9c25.3 12.5 22.3 41.8 9.1 55-6.4 6.4-15.2 10.1-24.3 10.1s-17.8-3.6-24.3-10.1c-17.6-17.6-11.1-46.9 11.2-56v-123c-20.8-8.5-24.6-30.7-18.6-45L142.6 101 8.5 235.1C3 240.6 0 247.9 0 255.5s3 15 8.5 20.4l195.6 195.7c5.4 5.4 12.7 8.4 20.4 8.4s15-3 20.4-8.4l194.7-194.7c5.4-5.4 8.4-12.8 8.4-20.4s-3-15-8.4-20.4"/></svg>
</div>
<div class="md-source__repository">
GitHub
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href=".." class="md-tabs__link">
Home
</a>
</li>
<li class="md-tabs__item">
<a href="../INSTALLATION/" class="md-tabs__link">
Installation
</a>
</li>
<li class="md-tabs__item">
<a href="../SUBNETS/" class="md-tabs__link">
Setup
</a>
</li>
<li class="md-tabs__item">
<a href="../DEVICE_MANAGEMENT/" class="md-tabs__link">
Device guides
</a>
</li>
<li class="md-tabs__item">
<a href="../DEBUG_TIPS/" class="md-tabs__link">
Troubleshooting
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="../DEV_ENV_SETUP/" class="md-tabs__link">
Development
</a>
</li>
</ul>
</div>
</nav>
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href=".." title="NetAlertX Documentation" class="md-nav__button md-logo" aria-label="NetAlertX Documentation" data-md-component="logo">
<img src="../img/netalertx_docs.png" alt="logo">
</a>
NetAlertX Documentation
</label>
<div class="md-nav__source">
<a href="https://github.com/jokob-sk/NetAlertX/" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M439.6 236.1 244 40.5c-5.4-5.5-12.8-8.5-20.4-8.5s-15 3-20.4 8.4L162.5 81l51.5 51.5c27.1-9.1 52.7 16.8 43.4 43.7l49.7 49.7c34.2-11.8 61.2 31 35.5 56.7-26.5 26.5-70.2-2.9-56-37.3L240.3 199v121.9c25.3 12.5 22.3 41.8 9.1 55-6.4 6.4-15.2 10.1-24.3 10.1s-17.8-3.6-24.3-10.1c-17.6-17.6-11.1-46.9 11.2-56v-123c-20.8-8.5-24.6-30.7-18.6-45L142.6 101 8.5 235.1C3 240.6 0 247.9 0 255.5s3 15 8.5 20.4l195.6 195.7c5.4 5.4 12.7 8.4 20.4 8.4s15-3 20.4-8.4l194.7-194.7c5.4-5.4 8.4-12.8 8.4-20.4s-3-15-8.4-20.4"/></svg>
</div>
<div class="md-source__repository">
GitHub
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href=".." class="md-nav__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" >
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
<span class="md-ellipsis">
Installation
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Installation
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../INSTALLATION/" class="md-nav__link">
<span class="md-ellipsis">
Installation options
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../INITIAL_SETUP/" class="md-nav__link">
<span class="md-ellipsis">
Quick setup
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_3" >
<label class="md-nav__link" for="__nav_2_3" id="__nav_2_3_label" tabindex="0">
<span class="md-ellipsis">
Docker
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_3">
<span class="md-nav__icon md-icon"></span>
Docker
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../DOCKER_INSTALLATION/" class="md-nav__link">
<span class="md-ellipsis">
Docker Guide
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../DOCKER_COMPOSE/" class="md-nav__link">
<span class="md-ellipsis">
Docker Compose
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../FILE_PERMISSIONS/" class="md-nav__link">
<span class="md-ellipsis">
Docker File Permissions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../UPDATES/" class="md-nav__link">
<span class="md-ellipsis">
Docker Updates
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../DOCKER_MAINTENANCE/" class="md-nav__link">
<span class="md-ellipsis">
Docker Maintenance
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_4" >
<label class="md-nav__link" for="__nav_2_4" id="__nav_2_4_label" tabindex="0">
<span class="md-ellipsis">
Docker Startup Troubleshooting
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_4">
<span class="md-nav__icon md-icon"></span>
Docker Startup Troubleshooting
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../docker-troubleshooting/aufs-capabilities/" class="md-nav__link">
<span class="md-ellipsis">
Aufs capabilities
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../docker-troubleshooting/excessive-capabilities/" class="md-nav__link">
<span class="md-ellipsis">
Excessive capabilities
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../docker-troubleshooting/file-permissions/" class="md-nav__link">
<span class="md-ellipsis">
File permissions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../docker-troubleshooting/incorrect-user/" class="md-nav__link">
<span class="md-ellipsis">
Incorrect user
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../docker-troubleshooting/missing-capabilities/" class="md-nav__link">
<span class="md-ellipsis">
Missing capabilities
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../docker-troubleshooting/mount-configuration-issues/" class="md-nav__link">
<span class="md-ellipsis">
Mount issues
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../docker-troubleshooting/network-mode/" class="md-nav__link">
<span class="md-ellipsis">
Network mode
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../docker-troubleshooting/nginx-configuration-mount/" class="md-nav__link">
<span class="md-ellipsis">
Nginx mount
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../docker-troubleshooting/port-conflicts/" class="md-nav__link">
<span class="md-ellipsis">
Port conflicts
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../docker-troubleshooting/read-only-filesystem/" class="md-nav__link">
<span class="md-ellipsis">
Read only
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../docker-troubleshooting/running-as-root/" class="md-nav__link">
<span class="md-ellipsis">
Running as root
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_5" >
<label class="md-nav__link" for="__nav_2_5" id="__nav_2_5_label" tabindex="0">
<span class="md-ellipsis">
Other
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_5">
<span class="md-nav__icon md-icon"></span>
Other
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../SYNOLOGY_GUIDE/" class="md-nav__link">
<span class="md-ellipsis">
Synology Guide
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../DOCKER_PORTAINER/" class="md-nav__link">
<span class="md-ellipsis">
Portainer Stacks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../COMMUNITY_GUIDES/" class="md-nav__link">
<span class="md-ellipsis">
Community Guides
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../HW_INSTALL/" class="md-nav__link">
<span class="md-ellipsis">
Bare-metal (Experimental)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../MIGRATION/" class="md-nav__link">
<span class="md-ellipsis">
Migration Guide
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_6" >
<label class="md-nav__link" for="__nav_2_6" id="__nav_2_6_label" tabindex="0">
<span class="md-ellipsis">
Help
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_6">
<span class="md-nav__icon md-icon"></span>
Help
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../COMMON_ISSUES/" class="md-nav__link">
<span class="md-ellipsis">
Common issues
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
<label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
<span class="md-ellipsis">
Setup
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
Setup
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_1" >
<label class="md-nav__link" for="__nav_3_1" id="__nav_3_1_label" tabindex="0">
<span class="md-ellipsis">
Getting started
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_1">
<span class="md-nav__icon md-icon"></span>
Getting started
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../SUBNETS/" class="md-nav__link">
<span class="md-ellipsis">
Subnets
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../PLUGINS/" class="md-nav__link">
<span class="md-ellipsis">
Enable Plugins
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../PIHOLE_GUIDE/" class="md-nav__link">
<span class="md-ellipsis">
Pi-hole Guide
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../HOME_ASSISTANT/" class="md-nav__link">
<span class="md-ellipsis">
Home Assistant
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../SMTP/" class="md-nav__link">
<span class="md-ellipsis">
Emails
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../BACKUPS/" class="md-nav__link">
<span class="md-ellipsis">
Backups
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../SECURITY_FEATURES/" class="md-nav__link">
<span class="md-ellipsis">
Security Features
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../SECURITY/" class="md-nav__link">
<span class="md-ellipsis">
Security Considerations
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_2" >
<label class="md-nav__link" for="__nav_3_2" id="__nav_3_2_label" tabindex="0">
<span class="md-ellipsis">
Advanced guides
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_2">
<span class="md-nav__icon md-icon"></span>
Advanced guides
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../REMOTE_NETWORKS/" class="md-nav__link">
<span class="md-ellipsis">
Remote Networks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../NOTIFICATIONS/" class="md-nav__link">
<span class="md-ellipsis">
Notifications Guide
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../PUID_PGID_SECURITY/" class="md-nav__link">
<span class="md-ellipsis">
Custom PUID/GUID
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../NAME_RESOLUTION/" class="md-nav__link">
<span class="md-ellipsis">
Name Resolution
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../AUTHELIA/" class="md-nav__link">
<span class="md-ellipsis">
Authelia
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../PERFORMANCE/" class="md-nav__link">
<span class="md-ellipsis">
Performance
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../REVERSE_DNS/" class="md-nav__link">
<span class="md-ellipsis">
Reverse DNS
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_2_8" >
<label class="md-nav__link" for="__nav_3_2_8" id="__nav_3_2_8_label" tabindex="0">
<span class="md-ellipsis">
Reverse Proxy
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_2_8_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_2_8">
<span class="md-nav__icon md-icon"></span>
Reverse Proxy
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../REVERSE_PROXY/" class="md-nav__link">
<span class="md-ellipsis">
Reverse Proxy Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../REVERSE_PROXY_CADDY/" class="md-nav__link">
<span class="md-ellipsis">
Caddy and Authentik
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../REVERSE_PROXY_TRAEFIK/" class="md-nav__link">
<span class="md-ellipsis">
Traefik
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../WEBHOOK_N8N/" class="md-nav__link">
<span class="md-ellipsis">
Webhooks (n8n)
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../WORKFLOWS/" class="md-nav__link">
<span class="md-ellipsis">
Workflows
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../WORKFLOW_EXAMPLES/" class="md-nav__link">
<span class="md-ellipsis">
Workflow Examples
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../DOCKER_SWARM/" class="md-nav__link">
<span class="md-ellipsis">
Docker Swarm
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_3" >
<label class="md-nav__link" for="__nav_3_3" id="__nav_3_3_label" tabindex="0">
<span class="md-ellipsis">
Help
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_3">
<span class="md-nav__icon md-icon"></span>
Help
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../COMMON_ISSUES/" class="md-nav__link">
<span class="md-ellipsis">
Common issues
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../RANDOM_MAC/" class="md-nav__link">
<span class="md-ellipsis">
Random MAC
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../FIX_OFFLINE_DETECTION/" class="md-nav__link">
<span class="md-ellipsis">
Incorrect Offline Detection
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" >
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0">
<span class="md-ellipsis">
Device guides
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Device guides
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_1" >
<label class="md-nav__link" for="__nav_4_1" id="__nav_4_1_label" tabindex="0">
<span class="md-ellipsis">
Editing Devices
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_1">
<span class="md-nav__icon md-icon"></span>
Editing Devices
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../DEVICE_MANAGEMENT/" class="md-nav__link">
<span class="md-ellipsis">
Management
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../DEVICES_BULK_EDITING/" class="md-nav__link">
<span class="md-ellipsis">
Bulk Editing
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../CUSTOM_PROPERTIES/" class="md-nav__link">
<span class="md-ellipsis">
Custom Properties
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../DEVICE_DISPLAY_SETTINGS/" class="md-nav__link">
<span class="md-ellipsis">
Device Display Settings
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../SESSION_INFO/" class="md-nav__link">
<span class="md-ellipsis">
Session Info
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../DEVICE_FIELD_LOCK/" class="md-nav__link">
<span class="md-ellipsis">
Field Lock/Unlock
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_2" >
<label class="md-nav__link" for="__nav_4_2" id="__nav_4_2_label" tabindex="0">
<span class="md-ellipsis">
Icons and Topology
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_2">
<span class="md-nav__icon md-icon"></span>
Icons and Topology
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../ICONS/" class="md-nav__link">
<span class="md-ellipsis">
Icons
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../NETWORK_TREE/" class="md-nav__link">
<span class="md-ellipsis">
Network Topology
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
<label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="0">
<span class="md-ellipsis">
Troubleshooting
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
Troubleshooting
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../DEBUG_TIPS/" class="md-nav__link">
<span class="md-ellipsis">
General Tips
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../COMMON_ISSUES/" class="md-nav__link">
<span class="md-ellipsis">
Common issues
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../LOGGING/" class="md-nav__link">
<span class="md-ellipsis">
Inspecting Logs
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../DEBUG_API_SERVER/" class="md-nav__link">
<span class="md-ellipsis">
API Server Issues
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../DEBUG_INVALID_JSON/" class="md-nav__link">
<span class="md-ellipsis">
Invalid JSON Issues
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../DEBUG_PHP/" class="md-nav__link">
<span class="md-ellipsis">
PHP Issues
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../DEBUG_PLUGINS/" class="md-nav__link">
<span class="md-ellipsis">
Plugin Issues
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../WEB_UI_PORT_DEBUG/" class="md-nav__link">
<span class="md-ellipsis">
Web UI Port Issues
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../WORKFLOWS_DEBUGGING/" class="md-nav__link">
<span class="md-ellipsis">
Workflows Issues
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" checked>
<label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="">
<span class="md-ellipsis">
Development
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_6">
<span class="md-nav__icon md-icon"></span>
Development
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_1" checked>
<label class="md-nav__link" for="__nav_6_1" id="__nav_6_1_label" tabindex="">
<span class="md-ellipsis">
Plugin and app development
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_1_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_6_1">
<span class="md-nav__icon md-icon"></span>
Plugin and app development
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../DEV_ENV_SETUP/" class="md-nav__link">
<span class="md-ellipsis">
Environment Setup
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../BUILDS/" class="md-nav__link">
<span class="md-ellipsis">
Builds
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../DEV_DEVCONTAINER/" class="md-nav__link">
<span class="md-ellipsis">
Devcontainer
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../DEV_PORTS_HOST_MODE/" class="md-nav__link">
<span class="md-ellipsis">
Devcontainer Ports
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_1_5" checked>
<label class="md-nav__link" for="__nav_6_1_5" id="__nav_6_1_5_label" tabindex="0">
<span class="md-ellipsis">
Custom Plugins
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_6_1_5_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_6_1_5">
<span class="md-nav__icon md-icon"></span>
Custom Plugins
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../PLUGINS_DEV/" class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../PLUGINS_DEV_QUICK_START/" class="md-nav__link">
<span class="md-ellipsis">
Quick Start
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../PLUGINS_DEV_DATA_CONTRACT/" class="md-nav__link">
<span class="md-ellipsis">
Data Contract
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../PLUGINS_DEV_SETTINGS/" class="md-nav__link">
<span class="md-ellipsis">
Settings System
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../PLUGINS_DEV_DATASOURCES/" class="md-nav__link">
<span class="md-ellipsis">
Data Sources
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
UI Components
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
UI Components
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#overview" class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#column-definition-structure" class="md-nav__link">
<span class="md-ellipsis">
Column Definition Structure
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#properties" class="md-nav__link">
<span class="md-ellipsis">
Properties
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#render-types" class="md-nav__link">
<span class="md-ellipsis">
Render Types
</span>
</a>
<nav class="md-nav" aria-label="Render Types">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#display-only-types" class="md-nav__link">
<span class="md-ellipsis">
Display-Only Types
</span>
</a>
<nav class="md-nav" aria-label="Display-Only Types">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#label" class="md-nav__link">
<span class="md-ellipsis">
label
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#device_mac" class="md-nav__link">
<span class="md-ellipsis">
device_mac
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#device_ip" class="md-nav__link">
<span class="md-ellipsis">
device_ip
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#device_name_mac" class="md-nav__link">
<span class="md-ellipsis">
device_name_mac
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#url" class="md-nav__link">
<span class="md-ellipsis">
url
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#url_http_https" class="md-nav__link">
<span class="md-ellipsis">
url_http_https
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#textarea_readonly" class="md-nav__link">
<span class="md-ellipsis">
textarea_readonly
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#interactive-types" class="md-nav__link">
<span class="md-ellipsis">
Interactive Types
</span>
</a>
<nav class="md-nav" aria-label="Interactive Types">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#textbox_save" class="md-nav__link">
<span class="md-ellipsis">
textbox_save
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#styledtransformed-types" class="md-nav__link">
<span class="md-ellipsis">
Styled/Transformed Types
</span>
</a>
<nav class="md-nav" aria-label="Styled/Transformed Types">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#label-with-threshold" class="md-nav__link">
<span class="md-ellipsis">
label with threshold
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#replace" class="md-nav__link">
<span class="md-ellipsis">
replace
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#regex" class="md-nav__link">
<span class="md-ellipsis">
regex
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#eval" class="md-nav__link">
<span class="md-ellipsis">
eval
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#chaining-types" class="md-nav__link">
<span class="md-ellipsis">
Chaining Types
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#dynamic-options" class="md-nav__link">
<span class="md-ellipsis">
Dynamic Options
</span>
</a>
<nav class="md-nav" aria-label="Dynamic Options">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#sql-driven-select" class="md-nav__link">
<span class="md-ellipsis">
SQL-Driven Select
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#setting-driven-select" class="md-nav__link">
<span class="md-ellipsis">
Setting-Driven Select
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#mapping-to-database-tables" class="md-nav__link">
<span class="md-ellipsis">
Mapping to Database Tables
</span>
</a>
<nav class="md-nav" aria-label="Mapping to Database Tables">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#mapping-to-currentscan" class="md-nav__link">
<span class="md-ellipsis">
Mapping to CurrentScan
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#using-static-values" class="md-nav__link">
<span class="md-ellipsis">
Using Static Values
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#filters" class="md-nav__link">
<span class="md-ellipsis">
Filters
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#example-complete-column-definitions" class="md-nav__link">
<span class="md-ellipsis">
Example: Complete Column Definitions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#css-classes" class="md-nav__link">
<span class="md-ellipsis">
CSS Classes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#validation-checklist" class="md-nav__link">
<span class="md-ellipsis">
Validation Checklist
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#see-also" class="md-nav__link">
<span class="md-ellipsis">
See Also
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../PLUGINS_DEV_CONFIG/" class="md-nav__link">
<span class="md-ellipsis">
Config Lifecycle
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../FRONTEND_DEVELOPMENT/" class="md-nav__link">
<span class="md-ellipsis">
Frontend Development
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../DATABASE/" class="md-nav__link">
<span class="md-ellipsis">
Database
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../SETTINGS_SYSTEM/" class="md-nav__link">
<span class="md-ellipsis">
Settings
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../VERSIONS/" class="md-nav__link">
<span class="md-ellipsis">
Versions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../DEVICE_HEURISTICS/" class="md-nav__link">
<span class="md-ellipsis">
Icon and Type guessing
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_2" >
<label class="md-nav__link" for="__nav_6_2" id="__nav_6_2_label" tabindex="">
<span class="md-ellipsis">
API
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6_2">
<span class="md-nav__icon md-icon"></span>
API
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../API/" class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../API_DEVICES/" class="md-nav__link">
<span class="md-ellipsis">
Devices Collection
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../API_DEVICE/" class="md-nav__link">
<span class="md-ellipsis">
Device
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../API_DEVICE_FIELD_LOCK/" class="md-nav__link">
<span class="md-ellipsis">
Device Field Lock
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../API_SESSIONS/" class="md-nav__link">
<span class="md-ellipsis">
Sessions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../API_SETTINGS/" class="md-nav__link">
<span class="md-ellipsis">
Settings
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../API_EVENTS/" class="md-nav__link">
<span class="md-ellipsis">
Events
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../API_MESSAGING_IN_APP/" class="md-nav__link">
<span class="md-ellipsis">
Messaging in-app
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../API_METRICS/" class="md-nav__link">
<span class="md-ellipsis">
Metrics
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../API_NETTOOLS/" class="md-nav__link">
<span class="md-ellipsis">
Net Tools
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../API_ONLINEHISTORY/" class="md-nav__link">
<span class="md-ellipsis">
Online History
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../API_SYNC/" class="md-nav__link">
<span class="md-ellipsis">
Sync
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../API_LOGS/" class="md-nav__link">
<span class="md-ellipsis">
Logs
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../API_SSE/" class="md-nav__link">
<span class="md-ellipsis">
SSE
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../API_GRAPHQL/" class="md-nav__link">
<span class="md-ellipsis">
GraphQL
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../API_DBQUERY/" class="md-nav__link">
<span class="md-ellipsis">
DB query
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../API_MCP/" class="md-nav__link">
<span class="md-ellipsis">
MCP
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../API_TESTS/" class="md-nav__link">
<span class="md-ellipsis">
Tests
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../API_OLD/" class="md-nav__link">
<span class="md-ellipsis">
SUPERSEDED OLD API Overview
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_3" >
<label class="md-nav__link" for="__nav_6_3" id="__nav_6_3_label" tabindex="">
<span class="md-ellipsis">
Integrations
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6_3">
<span class="md-nav__icon md-icon"></span>
Integrations
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../WEBHOOK_SECRET/" class="md-nav__link">
<span class="md-ellipsis">
Webhook Secret
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../HELPER_SCRIPTS/" class="md-nav__link">
<span class="md-ellipsis">
Helper scripts
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#overview" class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#column-definition-structure" class="md-nav__link">
<span class="md-ellipsis">
Column Definition Structure
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#properties" class="md-nav__link">
<span class="md-ellipsis">
Properties
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#render-types" class="md-nav__link">
<span class="md-ellipsis">
Render Types
</span>
</a>
<nav class="md-nav" aria-label="Render Types">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#display-only-types" class="md-nav__link">
<span class="md-ellipsis">
Display-Only Types
</span>
</a>
<nav class="md-nav" aria-label="Display-Only Types">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#label" class="md-nav__link">
<span class="md-ellipsis">
label
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#device_mac" class="md-nav__link">
<span class="md-ellipsis">
device_mac
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#device_ip" class="md-nav__link">
<span class="md-ellipsis">
device_ip
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#device_name_mac" class="md-nav__link">
<span class="md-ellipsis">
device_name_mac
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#url" class="md-nav__link">
<span class="md-ellipsis">
url
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#url_http_https" class="md-nav__link">
<span class="md-ellipsis">
url_http_https
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#textarea_readonly" class="md-nav__link">
<span class="md-ellipsis">
textarea_readonly
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#interactive-types" class="md-nav__link">
<span class="md-ellipsis">
Interactive Types
</span>
</a>
<nav class="md-nav" aria-label="Interactive Types">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#textbox_save" class="md-nav__link">
<span class="md-ellipsis">
textbox_save
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#styledtransformed-types" class="md-nav__link">
<span class="md-ellipsis">
Styled/Transformed Types
</span>
</a>
<nav class="md-nav" aria-label="Styled/Transformed Types">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#label-with-threshold" class="md-nav__link">
<span class="md-ellipsis">
label with threshold
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#replace" class="md-nav__link">
<span class="md-ellipsis">
replace
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#regex" class="md-nav__link">
<span class="md-ellipsis">
regex
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#eval" class="md-nav__link">
<span class="md-ellipsis">
eval
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#chaining-types" class="md-nav__link">
<span class="md-ellipsis">
Chaining Types
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#dynamic-options" class="md-nav__link">
<span class="md-ellipsis">
Dynamic Options
</span>
</a>
<nav class="md-nav" aria-label="Dynamic Options">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#sql-driven-select" class="md-nav__link">
<span class="md-ellipsis">
SQL-Driven Select
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#setting-driven-select" class="md-nav__link">
<span class="md-ellipsis">
Setting-Driven Select
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#mapping-to-database-tables" class="md-nav__link">
<span class="md-ellipsis">
Mapping to Database Tables
</span>
</a>
<nav class="md-nav" aria-label="Mapping to Database Tables">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#mapping-to-currentscan" class="md-nav__link">
<span class="md-ellipsis">
Mapping to CurrentScan
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#using-static-values" class="md-nav__link">
<span class="md-ellipsis">
Using Static Values
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#filters" class="md-nav__link">
<span class="md-ellipsis">
Filters
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#example-complete-column-definitions" class="md-nav__link">
<span class="md-ellipsis">
Example: Complete Column Definitions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#css-classes" class="md-nav__link">
<span class="md-ellipsis">
CSS Classes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#validation-checklist" class="md-nav__link">
<span class="md-ellipsis">
Validation Checklist
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#see-also" class="md-nav__link">
<span class="md-ellipsis">
See Also
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<a href="https://github.com/jokob-sk/NetAlertX/blob/main/docs/PLUGINS_DEV_UI_COMPONENTS.md" title="Edit this page" class="md-content__button md-icon" rel="edit">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4zm10.2-7c.1 0 .3.1.4.2l1.3 1.3c.2.2.2.6 0 .8l-1 1-2.1-2.1 1-1c.1-.1.2-.2.4-.2m0 3.9L14.1 23H12v-2.1l6.1-6.1z"/></svg>
</a>
<a href="https://github.com/jokob-sk/NetAlertX/raw/main/docs/PLUGINS_DEV_UI_COMPONENTS.md" title="View source of this page" class="md-content__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 18c.56 0 1 .44 1 1s-.44 1-1 1-1-.44-1-1 .44-1 1-1m0-3c-2.73 0-5.06 1.66-6 4 .94 2.34 3.27 4 6 4s5.06-1.66 6-4c-.94-2.34-3.27-4-6-4m0 6.5a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5M9.27 20H6V4h7v5h5v4.07c.7.08 1.36.25 2 .49V8l-6-6H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4.5a8.2 8.2 0 0 1-1.23-2"/></svg>
</a>
<h1 id="plugin-ui-components">Plugin UI Components</h1>
<p>Configure how your plugin's data is displayed in the NetAlertX web interface.</p>
<h2 id="overview">Overview</h2>
<p>Plugin results are displayed in the UI via the <strong>Plugins page</strong> and <strong>Device details tabs</strong>. You control the appearance and functionality of these displays by defining <code>database_column_definitions</code> in your plugin's <code>config.json</code>.</p>
<p>Each column definition specifies:
- Which data field to display
- How to render it (label, link, color-coded badge, etc.)
- What CSS classes to apply
- What transformations to apply (regex, string replacement, etc.)</p>
<h2 id="column-definition-structure">Column Definition Structure</h2>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Object_PrimaryID&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;mapped_to_column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;devMac&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;mapped_to_column_data&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;css_classes&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;col-sm-2&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;device_mac&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;default_value&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;options&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[],</span>
<span class="w"> </span><span class="nt">&quot;options_params&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[],</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;MAC Address&quot;</span>
<span class="w"> </span><span class="p">}</span>
<span class="w"> </span><span class="p">]</span>
<span class="p">}</span>
</code></pre></div>
<h2 id="properties">Properties</h2>
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>column</code></td>
<td>string</td>
<td><strong>YES</strong></td>
<td>Source column name from data contract (e.g., <code>Object_PrimaryID</code>, <code>Watched_Value1</code>)</td>
</tr>
<tr>
<td><code>mapped_to_column</code></td>
<td>string</td>
<td>no</td>
<td>Target database column if mapping to a table like <code>CurrentScan</code></td>
</tr>
<tr>
<td><code>mapped_to_column_data</code></td>
<td>object</td>
<td>no</td>
<td>Static value to map instead of using column data</td>
</tr>
<tr>
<td><code>css_classes</code></td>
<td>string</td>
<td>no</td>
<td>Bootstrap CSS classes for width/spacing (e.g., <code>"col-sm-2"</code>, <code>"col-sm-6"</code>)</td>
</tr>
<tr>
<td><code>show</code></td>
<td>boolean</td>
<td><strong>YES</strong></td>
<td>Whether to display in UI (must be <code>true</code> to appear)</td>
</tr>
<tr>
<td><code>type</code></td>
<td>string</td>
<td><strong>YES</strong></td>
<td>How to render the value (see <a href="#render-types">Render Types</a>)</td>
</tr>
<tr>
<td><code>default_value</code></td>
<td>varies</td>
<td><strong>YES</strong></td>
<td>Default if column is empty</td>
</tr>
<tr>
<td><code>options</code></td>
<td>array</td>
<td>no</td>
<td>Options for <code>select</code>/<code>threshold</code>/<code>replace</code>/<code>regex</code> types</td>
</tr>
<tr>
<td><code>options_params</code></td>
<td>array</td>
<td>no</td>
<td>Dynamic options from SQL or settings</td>
</tr>
<tr>
<td><code>localized</code></td>
<td>array</td>
<td><strong>YES</strong></td>
<td>Which properties need translations (e.g., <code>["name", "description"]</code>)</td>
</tr>
<tr>
<td><code>name</code></td>
<td>array</td>
<td><strong>YES</strong></td>
<td>Display name in UI (localized strings)</td>
</tr>
<tr>
<td><code>description</code></td>
<td>array</td>
<td>no</td>
<td>Help text in UI (localized strings)</td>
</tr>
<tr>
<td><code>maxLength</code></td>
<td>number</td>
<td>no</td>
<td>Character limit for input fields</td>
</tr>
</tbody>
</table>
<h2 id="render-types">Render Types</h2>
<h3 id="display-only-types">Display-Only Types</h3>
<p>These render as read-only display elements:</p>
<h4 id="label"><code>label</code></h4>
<p>Plain text display (read-only).</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Watched_Value1&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;label&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Status&quot;</span><span class="p">}]</span>
<span class="p">}</span>
</code></pre></div>
<p><strong>Output:</strong> <code>online</code></p>
<hr />
<h4 id="device_mac"><code>device_mac</code></h4>
<p>Renders as a clickable link to the device with the given MAC address.</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;ForeignKey&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;device_mac&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Device&quot;</span><span class="p">}]</span>
<span class="p">}</span>
</code></pre></div>
<p><strong>Input:</strong> <code>aa:bb:cc:dd:ee:ff</code>
<strong>Output:</strong> Clickable link to device details page</p>
<hr />
<h4 id="device_ip"><code>device_ip</code></h4>
<p>Resolves an IP address to a MAC address and creates a device link.</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Object_SecondaryID&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;device_ip&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Host&quot;</span><span class="p">}]</span>
<span class="p">}</span>
</code></pre></div>
<p><strong>Input:</strong> <code>192.168.1.100</code>
<strong>Output:</strong> Link to device with that IP (if known)</p>
<hr />
<h4 id="device_name_mac"><code>device_name_mac</code></h4>
<p>Creates a device link with the target device's name as the link label.</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Object_PrimaryID&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;device_name_mac&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Device Name&quot;</span><span class="p">}]</span>
<span class="p">}</span>
</code></pre></div>
<p><strong>Input:</strong> <code>aa:bb:cc:dd:ee:ff</code>
<strong>Output:</strong> Device name (clickable link to device)</p>
<hr />
<h4 id="url"><code>url</code></h4>
<p>Renders as a clickable HTTP/HTTPS link.</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Watched_Value1&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;url&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Endpoint&quot;</span><span class="p">}]</span>
<span class="p">}</span>
</code></pre></div>
<p><strong>Input:</strong> <code>https://example.com/api</code>
<strong>Output:</strong> Clickable link</p>
<hr />
<h4 id="url_http_https"><code>url_http_https</code></h4>
<p>Creates two links (HTTP and HTTPS) as lock icons for the given IP/hostname.</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Object_SecondaryID&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;url_http_https&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Web Links&quot;</span><span class="p">}]</span>
<span class="p">}</span>
</code></pre></div>
<p><strong>Input:</strong> <code>192.168.1.50</code>
<strong>Output:</strong> 🔓 HTTP link | 🔒 HTTPS link</p>
<hr />
<h4 id="textarea_readonly"><code>textarea_readonly</code></h4>
<p>Multi-line read-only display with newlines preserved.</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Extra&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;textarea_readonly&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Details&quot;</span><span class="p">}]</span>
<span class="p">}</span>
</code></pre></div>
<hr />
<h3 id="interactive-types">Interactive Types</h3>
<h4 id="textbox_save"><code>textbox_save</code></h4>
<p>User-editable text box that persists changes to the database (typically <code>UserData</code> column).</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;UserData&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;textbox_save&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;default_value&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Notes&quot;</span><span class="p">}]</span>
<span class="p">}</span>
</code></pre></div>
<hr />
<h3 id="styledtransformed-types">Styled/Transformed Types</h3>
<h4 id="label-with-threshold"><code>label</code> with <code>threshold</code></h4>
<p>Color-codes values based on ranges. Useful for status codes, latency, capacity percentages.</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Watched_Value1&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;threshold&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;options&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;maximum&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">199</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;hexColor&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;#792D86&quot;</span><span class="w"> </span><span class="c1">// Purple for &lt;199</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;maximum&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">299</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;hexColor&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;#5B862D&quot;</span><span class="w"> </span><span class="c1">// Green for 200-299</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;maximum&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">399</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;hexColor&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;#7D862D&quot;</span><span class="w"> </span><span class="c1">// Orange for 300-399</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;maximum&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">499</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;hexColor&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;#BF6440&quot;</span><span class="w"> </span><span class="c1">// Red-orange for 400-499</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;maximum&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">999</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;hexColor&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;#D33115&quot;</span><span class="w"> </span><span class="c1">// Dark red for 500+</span>
<span class="w"> </span><span class="p">}</span>
<span class="w"> </span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;HTTP Status&quot;</span><span class="p">}]</span>
<span class="p">}</span>
</code></pre></div>
<p><strong>How it works:</strong></p>
<ul>
<li>Value <code>150</code> → Purple (≤199)</li>
<li>Value <code>250</code> → Green (≤299)</li>
<li>Value <code>350</code> → Orange (≤399)</li>
<li>Value <code>450</code> → Red-orange (≤499)</li>
<li>Value <code>550</code> → Dark red (&gt;500)</li>
</ul>
<hr />
<h4 id="replace"><code>replace</code></h4>
<p>Replaces specific values with display strings or HTML.</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Watched_Value2&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;replace&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;options&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;equals&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;online&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;replacement&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;&lt;i class=&#39;fa-solid fa-circle&#39; style=&#39;color: green;&#39;&gt;&lt;/i&gt; Online&quot;</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;equals&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;offline&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;replacement&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;&lt;i class=&#39;fa-solid fa-circle&#39; style=&#39;color: red;&#39;&gt;&lt;/i&gt; Offline&quot;</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;equals&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;idle&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;replacement&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;&lt;i class=&#39;fa-solid fa-circle&#39; style=&#39;color: yellow;&#39;&gt;&lt;/i&gt; Idle&quot;</span>
<span class="w"> </span><span class="p">}</span>
<span class="w"> </span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Status&quot;</span><span class="p">}]</span>
<span class="p">}</span>
</code></pre></div>
<p><strong>Output Examples:</strong>
- <code>"online"</code> → 🟢 Online
- <code>"offline"</code> → 🔴 Offline
- <code>"idle"</code> → 🟡 Idle</p>
<hr />
<h4 id="regex"><code>regex</code></h4>
<p>Applies a regular expression to extract/transform values.</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Watched_Value1&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;regex&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;options&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;regex&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;param&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;([0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3})&quot;</span>
<span class="w"> </span><span class="p">}</span>
<span class="w"> </span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;IP Address&quot;</span><span class="p">}]</span>
<span class="p">}</span>
</code></pre></div>
<ul>
<li><strong>Input:</strong> <code>Host: 192.168.1.100 Port: 8080</code></li>
<li><strong>Output:</strong> <code>192.168.1.100</code></li>
</ul>
<hr />
<h4 id="eval"><code>eval</code></h4>
<p>Evaluates JavaScript code with access to the column value (use <code>${value}</code> or <code>{value}</code>).</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Watched_Value1&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;eval&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;default_value&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Formatted Value&quot;</span><span class="p">}]</span>
<span class="p">}</span>
</code></pre></div>
<p><strong>Example with custom formatting:</strong>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Watched_Value1&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;eval&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;options&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;eval&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;param&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;`&lt;b&gt;${value}&lt;/b&gt; units`&quot;</span>
<span class="w"> </span><span class="p">}</span>
<span class="w"> </span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Value with Units&quot;</span><span class="p">}]</span>
<span class="p">}</span>
</code></pre></div></p>
<ul>
<li><strong>Input:</strong> <code>42</code></li>
<li><strong>Output:</strong> <strong>42</strong> units</li>
</ul>
<hr />
<h3 id="chaining-types">Chaining Types</h3>
<p>You can chain multiple transformations with dot notation:</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Watched_Value3&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;regex.url_http_https&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;options&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;regex&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;param&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;([\\d.:]+)&quot;</span><span class="w"> </span><span class="c1">// Extract IP/host</span>
<span class="w"> </span><span class="p">}</span>
<span class="w"> </span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;HTTP/S Links&quot;</span><span class="p">}]</span>
<span class="p">}</span>
</code></pre></div>
<p><strong>Flow:</strong></p>
<ol>
<li>Apply regex to extract <code>192.168.1.50</code> from input</li>
<li>Create HTTP/HTTPS links for that host</li>
</ol>
<hr />
<h2 id="dynamic-options">Dynamic Options</h2>
<h3 id="sql-driven-select">SQL-Driven Select</h3>
<p>Use SQL query results to populate dropdown options:</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Watched_Value2&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;select&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;options&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;{value}&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;options_params&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;value&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;sql&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;value&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;SELECT devType as id, devType as name FROM Devices UNION SELECT &#39;Unknown&#39; as id, &#39;Unknown&#39; as name ORDER BY id&quot;</span>
<span class="w"> </span><span class="p">}</span>
<span class="w"> </span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Device Type&quot;</span><span class="p">}]</span>
<span class="p">}</span>
</code></pre></div>
<p>The SQL query must return exactly <strong>2 columns:</strong></p>
<ul>
<li><strong>First column (id):</strong> Option value</li>
<li><strong>Second column (name):</strong> Display label</li>
</ul>
<hr />
<h3 id="setting-driven-select">Setting-Driven Select</h3>
<p>Use plugin settings to populate options:</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Watched_Value1&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;select&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;options&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;{value}&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;options_params&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;value&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;setting&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;value&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;MYPLN_AVAILABLE_STATUSES&quot;</span>
<span class="w"> </span><span class="p">}</span>
<span class="w"> </span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Status&quot;</span><span class="p">}]</span>
<span class="p">}</span>
</code></pre></div>
<hr />
<h2 id="mapping-to-database-tables">Mapping to Database Tables</h2>
<h3 id="mapping-to-currentscan">Mapping to <code>CurrentScan</code></h3>
<p>To import plugin data into the device scan pipeline (for notifications, heuristics, etc.):</p>
<ol>
<li>Add <code>"mapped_to_table": "CurrentScan"</code> at the root level of <code>config.json</code></li>
<li>Add <code>"mapped_to_column"</code> property to each column definition</li>
</ol>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;code_name&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;my_device_scanner&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;unique_prefix&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;MYSCAN&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;mapped_to_table&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;CurrentScan&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;database_column_definitions&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Object_PrimaryID&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;mapped_to_column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;scanMac&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;device_mac&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;MAC Address&quot;</span><span class="p">}]</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Object_SecondaryID&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;mapped_to_column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;scanLastIP&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;device_ip&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;IP Address&quot;</span><span class="p">}]</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;NameDoesntMatter&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;mapped_to_column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;scanSourcePlugin&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;mapped_to_column_data&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;value&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;MYSCAN&quot;</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;label&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Scan Method&quot;</span><span class="p">}]</span>
<span class="w"> </span><span class="p">}</span>
<span class="w"> </span><span class="p">]</span>
<span class="p">}</span>
</code></pre></div>
<hr />
<h3 id="using-static-values">Using Static Values</h3>
<p>Use <code>mapped_to_column_data</code> to map a static value instead of reading from a column:</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;NameDoesntMatter&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;mapped_to_column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;scanSourcePlugin&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;mapped_to_column_data&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;value&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;MYSCAN&quot;</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;label&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Discovery Method&quot;</span><span class="p">}]</span>
<span class="p">}</span>
</code></pre></div>
<p>This always sets <code>scanSourcePlugin</code> to <code>"MYSCAN"</code> regardless of column data.</p>
<hr />
<h2 id="filters">Filters</h2>
<p>Control which rows are displayed based on filter conditions. Filters are applied on the client-side in JavaScript.</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;data_filters&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;compare_column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Object_PrimaryID&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;compare_operator&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;==&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;compare_field_id&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;txtMacFilter&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;compare_js_template&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;&#39;{value}&#39;.toString()&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;compare_use_quotes&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span>
<span class="w"> </span><span class="p">}</span>
<span class="w"> </span><span class="p">]</span>
<span class="p">}</span>
</code></pre></div>
<table>
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>compare_column</code></td>
<td>The column from plugin results to compare (left side)</td>
</tr>
<tr>
<td><code>compare_operator</code></td>
<td>JavaScript operator: <code>==</code>, <code>!=</code>, <code>&lt;</code>, <code>&gt;</code>, <code>&lt;=</code>, <code>&gt;=</code>, <code>includes</code>, <code>startsWith</code></td>
</tr>
<tr>
<td><code>compare_field_id</code></td>
<td>HTML input field ID containing the filter value (right side)</td>
</tr>
<tr>
<td><code>compare_js_template</code></td>
<td>JavaScript template to transform values. Use <code>{value}</code> placeholder</td>
</tr>
<tr>
<td><code>compare_use_quotes</code></td>
<td>If <code>true</code>, wrap result in quotes for string comparison</td>
</tr>
</tbody>
</table>
<p><strong>Example: Filter by MAC address</strong></p>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;data_filters&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;compare_column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;ForeignKey&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;compare_operator&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;==&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;compare_field_id&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;txtMacFilter&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;compare_js_template&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;&#39;{value}&#39;.toString()&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;compare_use_quotes&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span>
<span class="w"> </span><span class="p">}</span>
<span class="w"> </span><span class="p">]</span>
<span class="p">}</span>
</code></pre></div>
<p>When viewing a device detail page, the <code>txtMacFilter</code> field is populated with that device's MAC, and only rows where <code>ForeignKey == MAC</code> are shown.</p>
<hr />
<h2 id="example-complete-column-definitions">Example: Complete Column Definitions</h2>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;database_column_definitions&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Object_PrimaryID&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;mapped_to_column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;scanMac&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;css_classes&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;col-sm-2&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;device_mac&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;default_value&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;MAC Address&quot;</span><span class="p">}]</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Object_SecondaryID&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;mapped_to_column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;scanLastIP&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;css_classes&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;col-sm-2&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;device_ip&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;default_value&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;unknown&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;IP Address&quot;</span><span class="p">}]</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;DateTime&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;css_classes&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;col-sm-2&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;label&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;default_value&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Last Seen&quot;</span><span class="p">}]</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Watched_Value1&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;css_classes&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;col-sm-2&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;threshold&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;options&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span>
<span class="w"> </span><span class="p">{</span><span class="nt">&quot;maximum&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">199</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;hexColor&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;#792D86&quot;</span><span class="p">},</span>
<span class="w"> </span><span class="p">{</span><span class="nt">&quot;maximum&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">299</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;hexColor&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;#5B862D&quot;</span><span class="p">},</span>
<span class="w"> </span><span class="p">{</span><span class="nt">&quot;maximum&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">399</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;hexColor&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;#7D862D&quot;</span><span class="p">},</span>
<span class="w"> </span><span class="p">{</span><span class="nt">&quot;maximum&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">499</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;hexColor&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;#BF6440&quot;</span><span class="p">},</span>
<span class="w"> </span><span class="p">{</span><span class="nt">&quot;maximum&quot;</span><span class="p">:</span><span class="w"> </span><span class="mi">999</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;hexColor&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;#D33115&quot;</span><span class="p">}</span>
<span class="w"> </span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;HTTP Status&quot;</span><span class="p">}]</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Watched_Value2&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;css_classes&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;col-sm-1&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;label&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;default_value&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Response Time&quot;</span><span class="p">}]</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;column&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Extra&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;css_classes&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;col-sm-3&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;show&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;type&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;textarea_readonly&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;default_value&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;localized&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">&quot;name&quot;</span><span class="p">],</span>
<span class="w"> </span><span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[{</span><span class="nt">&quot;language_code&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;en_us&quot;</span><span class="p">,</span><span class="w"> </span><span class="nt">&quot;string&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Additional Info&quot;</span><span class="p">}]</span>
<span class="w"> </span><span class="p">}</span>
<span class="w"> </span><span class="p">]</span>
<span class="p">}</span>
</code></pre></div>
<hr />
<h2 id="css-classes">CSS Classes</h2>
<p>Use Bootstrap grid classes to control column widths in tables:</p>
<table>
<thead>
<tr>
<th>Class</th>
<th>Width</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>col-sm-1</code></td>
<td>~8%</td>
<td>Very narrow (icons, status)</td>
</tr>
<tr>
<td><code>col-sm-2</code></td>
<td>~16%</td>
<td>Narrow (MACs, IPs)</td>
</tr>
<tr>
<td><code>col-sm-3</code></td>
<td>~25%</td>
<td>Medium (names, URLs)</td>
</tr>
<tr>
<td><code>col-sm-4</code></td>
<td>~33%</td>
<td>Medium-wide (descriptions)</td>
</tr>
<tr>
<td><code>col-sm-6</code></td>
<td>~50%</td>
<td>Wide (large content)</td>
</tr>
</tbody>
</table>
<hr />
<h2 id="validation-checklist">Validation Checklist</h2>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" disabled/> All columns have <code>"show": true</code> or <code>false</code></li>
<li class="task-list-item"><input type="checkbox" disabled/> Display columns with <code>"type"</code> specified from supported types</li>
<li class="task-list-item"><input type="checkbox" disabled/> Localized strings include at least <code>en_us</code></li>
<li class="task-list-item"><input type="checkbox" disabled/> <code>mapped_to_column</code> matches target table schema (if using mapping)</li>
<li class="task-list-item"><input type="checkbox" disabled/> Options/thresholds have correct structure</li>
<li class="task-list-item"><input type="checkbox" disabled/> CSS classes are valid Bootstrap grid classes</li>
<li class="task-list-item"><input type="checkbox" disabled/> Chaining types (e.g., <code>regex.url_http_https</code>) are supported combinations</li>
</ul>
<hr />
<h2 id="see-also">See Also</h2>
<ul>
<li><a href="../PLUGINS_DEV_DATA_CONTRACT/">Plugin Data Contract</a> - What data fields are available</li>
<li><a href="../PLUGINS_DEV_SETTINGS/">Plugin Settings System</a> - Configure user input</li>
<li><a href="../PLUGINS_DEV/#-mapping-the-plugin-results-into-a-database-table">Database Mapping</a> - Map data to core tables</li>
<li><a href="../DEBUG_PLUGINS/">Debugging Plugins</a> - Troubleshoot display issues</li>
</ul>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
Back to top
</button>
</main>
<footer class="md-footer">
<nav class="md-footer__inner md-grid" aria-label="Footer" >
<a href="../PLUGINS_DEV_DATASOURCES/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Data Sources">
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</div>
<div class="md-footer__title">
<span class="md-footer__direction">
Previous
</span>
<div class="md-ellipsis">
Data Sources
</div>
</div>
</a>
<a href="../PLUGINS_DEV_CONFIG/" class="md-footer__link md-footer__link--next" aria-label="Next: Config Lifecycle">
<div class="md-footer__title">
<span class="md-footer__direction">
Next
</span>
<div class="md-ellipsis">
Config Lifecycle
</div>
</div>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg>
</div>
</a>
</nav>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"annotate": null, "base": "..", "features": ["announce.dismiss", "content.action.edit", "content.action.view", "content.code.annotate", "content.code.copy", "content.tooltips", "navigation.footer", "navigation.indexes", "navigation.sections", "navigation.tabs", "navigation.top", "navigation.tracking", "search.highlight", "search.share", "search.suggest", "toc.follow"], "search": "../assets/javascripts/workers/search.2c215733.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": null}</script>
<script src="../assets/javascripts/bundle.79ae519e.min.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink