Documentation on different components and their usage.
Modern Search Widget (HPE Style)
Full-screen overlay search widget with slide-in animation, auto-complete, and live
results. Styled to match HPE.com search interface with white background and clean design.
Usage:
<!-- Include CSS -->
<link rel="stylesheet" type="text/css" href="https://www.juniper.net/documentation/pf-assets/css/ke-next-search-009373594b.css">
<!-- Search Overlay Structure -->
<div class="ke-search-next-overlay">
<div class="ke-search-next-search-form">
<div class="ke-search-next-container">
<div class="ke-search-next-input-wrapper">
<input type="search" class="ke-search-next-input" placeholder="Search Assets"
autocomplete="off" maxlength="200" />
<i class="fa fa-search ke-search-next-input-icon"></i>
</div>
</div>
<div class="ke-search-next-close">
<div class="gn-search-close" title="Close" aria-label="Close">
<img src="../images/close.svg" class="close-icon">
<span class="close-text">Close</span>
</div>
</div>
</div>
<div class="ke-search-next-results"></div>
</div>
<div class="ke-search-next-backdrop"></div>
<!-- Search Icon Trigger -->
<div class="ke-search-next-wrapper">
<div class="ke-search-next-icon ke-header-icon">
<i class="fa fa-search headericon" title="Search"></i>
</div>
</div>
<!-- Include JavaScript -->
<script type="text/javascript" src="https://www.juniper.net/documentation/pf-assets/js/vendor/jquery.3.6.0.js"></script>
<script type="text/javascript" src="https://www.juniper.net/documentation/pf-assets/js/ke-next-search-3535095898.js"></script>
Pathfinder AI Chatbot
To add Pathfinder AI Chatbot to the page, follow below component initiator by
including related JS and CSS dependencies. [Ignore the hash added to the file names]
Usage:
<link rel="stylesheet" type="text/css" href="https://www.juniper.net/documentation/pf-assets/css/doc-askai-bundle.css">
<script type="text/javascript" src="https://www.juniper.net/documentation/pf-assets/js/vendor/jquery.3.2.0.js"></script>
<script type="text/javascript" src="https://js.hcaptcha.com/1/api.js?render=explicit"></script>
<pf-ai-bot initiator="Technical Documentation"></pf-ai-bot>
<script type="text/javascript" src="https://www.juniper.net/documentation/pf-assets/js/pf-usr-chk-0a46ddb57f.js"></script>
<script type="text/javascript" src="https://www.juniper.net/documentation/pf-assets/js/doc-askai-bundle.js"></script>
Modern KE Header (Next Generation)
Redesigned header container with an explicit three-slot flex layout:
ke-hero-title (brand, left) →
app-menu-next (nav, grows to fill remaining space) →
iconwrap (icons, right). Responsive: collapses to a hamburger-triggered
full-screen sidebar on mobile (≤768 px). Use
ke-header-wrap-next +
ke-header-inner-next to avoid style conflicts with the legacy component.
Usage:
<!-- CSS (compiled from scss/ke-header-wrap-next.scss via global.scss) -->
<link rel="stylesheet" type="text/css" href="public/css/global-f75c18b567.css">
<!-- JS for mobile toggle -->
<script type="text/javascript" src="js/ke-header-next-e0eb1b09ba.js"></script>
<!-- HTML structure -->
<div class="ke-header-wrap-next">
<header class="ke-header-inner-next">
<!-- Slot 1: Brand title -->
<h1 class="ke-hero-title">
<a class="full-name" href="/">App Name</a>
</h1>
<!-- Slot 2: Navigation (simple links OR nested links with submenu) -->
<nav class="app-menu-next">
<button class="app-menu-next-toggle" aria-label="Toggle Menu">
<i class="fa fa-bars"></i>
</button>
<ul class="app-menu-next-items">
<!-- Simple link -->
<li class="app-menu-next-item">
<a href="#home">Home</a>
</li>
<!-- Nested link -->
<li class="app-menu-next-item app-menu-next-item-with-submenu">
<a href="#explore">
Explore
<span class="app-menu-next-chevron"><i
class="fa fa-chevron-down"></i></span>
</a>
<ul class="app-menu-next-submenu">
<li class="app-menu-next-subitem"><a href="#features">Features</a></li>
<li class="app-menu-next-subitem"><a href="#by-product">By Product</a></li>
</ul>
</li>
</ul>
<div class="app-menu-next-backdrop"></div>
</nav>
<!-- Slot 3: Action icons -->
<div class="iconwrap">
<div class="user ke-header-icon">
<i class="fa fa-user-circle-o headericon"></i>
<div class="user-icon-reveal ke-header-icon-content ke-fade">
<div class="user-notlogin hidden clearfix">
<p>Welcome to Juniper Networks. Please login to find more information.</p>
<a href="#" class="pull-right">Login <i class="fa fa-sign-in"></i></a>
</div>
<div class="user-loggedin hidden clearfix">
<p>Hello, <span class="user-name">${user.firstName}</span></p>
<a href="./saml/logout" class="pull-right">Logout</a>
</div>
</div>
</div>
</div>
</header>
</div>
Modern KE Header
Usage:
<jnpr-std-hdr app-name="Assets"></jnpr-std-hdr>
<div class="ke-header-wrap-dyn sticky">
<header class="ke-header-inner">
<h1 class="ke-hero-title">
<a class="full-name" href="/assets/public/html/index.html">Pathfinder Assets</a>
</h1>
<div class="iconwrap">
<div class="user ke-header-icon"> <i class="fa fa-user-circle headericon"></i>
<div class="user-icon-reveal ke-header-icon-content ke-fade">
<div class="user-notlogin hidden clearfix">
<p>Welcome to Juniper Networks. Please login to find more information.
</p>
<a href="#" class="pull-right">Login <i class="fa fa-sign-in"></i></a>
</div>
<div class="user-loggedin hidden clearfix">
<p>Hello, <span class="user-name">${user.firstName}
${user.lastName}</span></p>
<a href="./saml/logout" class="pull-right">Logout <i
class="fa fa-sign-out"></i></a>
</div>
</div>
</div>
</div>
<div class="search-wrap">
<div class="kesearch"><input placeholder="Search Assets" type="search" name="#"
autocomplete="off" class="search-input" id="ke-search-id" maxlength="200"><i
class="fa fa-search icon-search"></i>
<div class="ke-search-results"></div>
</div>
</div>
<div class="app-menu">
<div class="flexbox">
<div class="menu-item menu-sel">
<a href="#" class="primary-link">Explore</a>
</div>
<div class="menu-item">
<a href="#" class="primary-link">Compare</a>
</div>
<div class="menu-item">
<a href="#" class="primary-link">Admin</a>
</div>
</div>
</div>
</header>
</div>
How to use Assets in application
Usage:
Assuming propertyConfigurer is configured in the application and respective assets URL is available
in the property "apps.assets.url" of config.properties file.
Use JSTL import statements as below to import the styles and scripts.
To get global styles:
<c:import url="${propertyConfigurer ['apps.assets.url']}/html/styles.html"></c:import>
To get global scripts:
<c:import url="${propertyConfigurer ['apps.assets.url']}/html/scripts.html"></c:import>
To get legacy footer:
<c:import url="${propertyConfigurer ['apps.assets.url']}/html/footer.html"></c:import>
To get modern footer:
<c:import url="${propertyConfigurer ['apps.assets.url']}/html/footer-mod.html"></c:import>
To get modern footer (without app menu section):
<c:import url="${propertyConfigurer ['apps.assets.url']}/html/footer-mod-min.html"></c:import>
Responsive
To make an application responsive, add the "ke-responsive" class to the page body.
Usage:
<body class="ke-responsive"></body>
Announcement
Usage:
Announcements can be setup by adding them to announcements.json file available in the resources
folder following below structure.
Example JSON:
[
{
"showIn": [
"All"
],
"messageHead": "System Outage",
"messageBody": "System Outage due to AWS Migration.",
"setupDate": "26Nov2018",
"appId": "All"
},
{
"showIn": [
"Assets"
],
"messageHead": "Announcing new functionality in Assets to add announcements",
"messageBody": "Going forward, announcements can be added to all the applications through assets.
Follow instructions in Assets index page to use it.",
"setupDate": "26Nov2018",
"appId": "assets"
}
]
JSON Parameters and its usage:
1. showIn: List of all applications names where the announcements should be displayed. (Application
names used should match with the values in application menu. And value "All" should not be used
together with other application names)
2. messageHead: Announcement header text.
3. messageBody: Announcement body text (can contain html tags).
4. setupDate: Announcement setupDate in format DDMMMYYYY (Ex: 01JAN2018)
5. appId: "All" for the generic announcement, and specific application names in lower case for all
other apps(without spaces).
Announcement Precedence & other notes:
1. App level announcements will take precedence over "All" anouncement. (no matter where we place it
in the JSON object)
2. Generic announcements(with showIn=All & appId=All) to be used only if there is a common
announement to be made across all applications.
3. If there is an already posted announcement(live) and if any changes are needed in either
messageHead/messagBody, along with the text changes, also update the setupDate to the current date
for the updated announcement to be displayed.
BeyondX Page Head Text
Page Header Text in BeyondX
Usage:
<h2 class="bx-page-head">Page Header Text in BeyondX</h2>
BeyondX Buttons
Usage:
<button class="bx-btn-prim-green bx-btn-xs">Primary Green Xs</button>
<button class="bx-btn-prim-black bx-btn-xs">Primary Black Xs</button>
<button class="bx-btn-prim-white bx-btn-xs">Primary White Xs</button>
<button class="bx-btn-prim-green bx-btn-sm">Primary Green Sm</button>
<button class="bx-btn-prim-black bx-btn-sm">Primary Black Sm</button>
<button class="bx-btn-prim-white bx-btn-sm">Primary White Sm</button>
<button class="bx-btn-prim-green bx-btn-lg">Primary Green Lg</button>
<button class="bx-btn-prim-black bx-btn-lg">Primary Black Lg</button>
<button class="bx-btn-prim-white bx-btn-lg">Primary White Lg</button>
BeyondX Page Anchor Links
Anchor Link
Usage:
<a href="#" class="bx-link-animate">Anchor Link</a>
BeyondX Table
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Test content | Test content | Test content |
| Test content | Test content | Test content |
| Test content | Test content | Test content |
| Test content | Test content | Test content |
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Test content | Test content | Test content |
| Test content | Test content | Test content |
| Test content | Test content | Test content |
| Test content | Test content | Test content |
Usage:
<table class="bx-table">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test content</td>
<td>Test content</td>
<td>Test content</td>
</tr>
<tr>
<td>Test content</td>
<td>Test content</td>
<td>Test content</td>
</tr>
</tbody>
</table>
<table class="bx-table-alt">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test content</td>
<td>Test content</td>
<td>Test content</td>
</tr>
<tr>
<td>Test content</td>
<td>Test content</td>
<td>Test content</td>
</tr>
</tbody>
</table>
Folder/File Structure
Usage:
<div class="expandcollapse">
<div class="ke-collapse ke-panel">
<i class="fa fa-angle-double-right"></i> Folder/File structure
</div>
<div class="expandcollapse-content">
<div id="folder"></div>
</div>
</div>
Full image on click
Usage:
Include below scripts in your application
1)jQuery library :
<script src="${propertyConfigurer ['apps.assets.url']}/js/vendor/jquery.min.js"
type="text/javascript"></script>
2)jQuery fancybox plugin :
<script src="${propertyConfigurer ['apps.assets.url']}/js/vendor/jquery.fancybox.min.js"
type="text/javascript"></script>
HTML: <div class="ke-single-image-zoom"></div>
JS : var imageURL =
"https://apps-dev.juniper.net/assets/public/images/hct/transceivers/XCVR-10G-SFP-AOC.jpg";
buildSingleImageZoom('.ke-single-image-zoom',imageURL,250,250);
<!-- Hint: buildSingleImageZoom('HTML element','imageURL','width','height')> -->
Image drag & zoom
Usage:
Include below scripts in your application
1)jQuery library :
<script src="${propertyConfigurer ['apps.assets.url']}/js/vendor/jquery.min.js"
type="text/javascript"></script>
2)jQuery zoom plugin :
<script src="${propertyConfigurer ['apps.assets.url']}/js/vendor/jquery.zoom.js"
type="text/javascript"></script>
HTML: <div class="ke-image-drag-zoom"></div>
JS : var imageArrayDrag =
["https://apps-dev.juniper.net/assets/public/images/hct/transceivers/XCVR-10G-SFP-AOC.jpg"];
buildImageDragZoom('.ke-image-drag-zoom', imageArrayDrag,250, 250);
<!-- Hint: buildImageDragZoom('HTML element','imageArrayDrag','width','height')> -->
Carousel
Usage:
Include below scripts in your application
1)jQuery library :
<script src="${propertyConfigurer ['apps.assets.url']}/js/vendor/jquery.min.js"
type="text/javascript"></script>
2)jQuery slider plugin :
<script src="${propertyConfigurer ['apps.assets.url']}/js/vendor/jssor-slider.min.js"
type="text/javascript"></script>
3)jQuery fancybox plugin :
<script src="${propertyConfigurer ['apps.assets.url']}/js/vendor/jquery.fancybox.min.js"
type="text/javascript"></script>
HTML: <div class="ke-carousel"></div>
JS : var imageArray = ["XCVR-10G-SFP-AOC.jpg","XCVR-10GBASE-SFPP-DAC.jpg"];
buildImageCarousel('.ke-carousel',imageArray,25,20);
<!-- Hint: buildImageCarousel('HTML element','imageURLArray','width percentage in view port of screen width','height percentage in view port of screen width')> -->
Buttons
Usage:
<button class="button button-inline">Default</button>
<button class="button button-inline button-teal">Teal</button>
<button class="button button-inline button-green">Green</button>
<button class="button button-inline button-lightgrey button-arrow">Ligtgrey with arrow</button>
<button class="button button-inline button-disabled">Disabled</button>
Modal box
Usage:
<button class="launchmodal" data-modal-open="myke-Modal">Launch Modal</button>
<div class="ke-modal ke-fade " id="myke-Modal">
<div class="ke-modal-dialog ke-modal-lg">
<div class="ke-modal-content">
<div class="ke-modal-header">
<button type="button" class="ke-close" data-modal-close="myke-Modal"></button>
<h4 class="ke-modal-title" id="myke-ModalLabel">ke-Modal title</h4>
</div>
<div class="ke-modal-body">
<h4>Text in a ke-modal</h4>
<p>Use class "ke-nodrop-close" to not close the modal box on body click</p>
</div>
<div class="ke-modal-footer">
<button type="button" class="btn btn-default button button-inline"
data-modal-close="myke-Modal">Close</button>
<button type="button" class="btn btn-primary button button-inline">Save
changes</button>
</div>
</div>
</div>
</div>
Tooltip
Usage:
<span class="link" data-tip="Tooltip content here">SHOW TOOLTIP</span>
SearchBox
Search group 1
Search result 1
Search result 1 description
Search result 2
Search result 1 description
Search result 3
Search result 1 description
Search group 2
Search result 1
Search result 1 description
Search result 2
Search result 1 description
Usage:
<div class="ke-search-box">
<input type="text" class="ke-search-input" placeholder="Search here" maxlength="200" />
<div id="ke-search-button" class="left"><i class="fa fa-search"></i></div>
<div class="ke-search-results">
<h2 class="ke-search-group">Search group 1</h2>
<div class="ke-search-item">
<p class="ke-search-link">Search <span class="ke-search-match">result</span> 1</p>
<p class="ke-search-link-desc">Search <span class="ke-search-match">result</span> 1
description</p>
</div>
<div class="ke-search-item">
<p class="ke-search-link">Search <span class="ke-search-match">result</span> 2</p>
<p class="ke-search-link-desc">Search <span class="ke-search-match">result</span> 1
description</p>
</div>
<div class="ke-search-item">
<p class="ke-search-link">Search <span class="ke-search-match">result</span> 3</p>
<p class="ke-search-link-desc">Search <span class="ke-search-match">result</span> 1
description</p>
</div>
<h2 class="ke-search-group">Search group 2</h2>
<div class="ke-search-item">
<p class="ke-search-link">Search <span class="ke-search-match">result</span> 1</p>
<p class="ke-search-link-desc">Search <span class="ke-search-match">result</span> 1
description</p>
</div>
<div class="ke-search-item">
<p class="ke-search-link">Search <span class="ke-search-match">result</span> 2</p>
<p class="ke-search-link-desc">Search <span class="ke-search-match">result</span> 1
description</p>
</div>
</div>
</div>
Expand/Collapse
Usage:
<div class="expandcollapse">
<div class="ke-collapse ke-panel">
<i class="fa fa-angle-double-right"></i> Collapse
</div>
<div class="expandcollapse-content">
expand collpase content.
</div>
</div>
Rating widget
Usage:
<rating-widget wfsys_id="5"></rating-widget>
Message
Usage:
<div class="ke-message">
<i class="ke-close"></i>
<h3>Message Head</h3>
<p>Message content.Starting in October, the Pathfinder SKU Lookup Tool used to support the RoHS
2 program will retire.</p>
</div>
More Tabs
Usage:
<nav role="navigation" class="ke-automated-tabs">
<ul id="ke-auto-tabs-wrap">
<li><span class="ke-automated-tab ke-tab-nav-selected">Home</a></li>
<li><span class="ke-automated-tab">Tab1</span></li>
<li><span class="ke-automated-tab">Tabb2</span></li>
<li><span class="ke-automated-tab">Lengthy tab</span></li>
<li><span class="ke-automated-tab">Tab4</span></li>
<li><span class="ke-automated-tab">Tab5</span></li>
<li class="more">
<span>More <i class="fa fa-caret-square-o-down" aria-hidden="true"></i>
</span>
<ul></ul>
</li>
</ul>
</nav>
Tab
Home
Menu
Tab3
Home content
Menu content
Tab3 content
Usage:
<div class="ke-tabs">
<div class="ke-tab" data-target="Target1">Home</div>
<div class="ke-tab active" data-target="Target2">Menu</div>
<div class="ke-tab" data-target="Target3">Tab3</div>
</div>
<div class="ke-tabcontent">
<div class="ke-tabtarget" data-tabfor="Target1">Home content</div>
<div class="ke-tabtarget active" data-tabfor="Target2">Menu content</div>
<div class="ke-tabtarget" data-tabfor="Target3">Tab3 content</div>
</div>
Table
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Test content | Test content | Test content |
| Test content | Test content | Test content |
| Test content | Test content | Test content |
| Test content | Test content | Test content |
Usage:
<table class="table-alt">
<thead class="table-head">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tr>
<td>Test content</td>
<td>Test content</td>
<td>Test content</td>
</tr>
<tr>
<td>Test content</td>
<td>Test content</td>
<td>Test content</td>
</tr>
<tr>
<td>Test content</td>
<td>Test content</td>
<td>Test content</td>
</tr>
<tr>
<td>Test content</td>
<td>Test content</td>
<td>Test content</td>
</tr>
</table>
PopOver
Usage:
<div class="ke-popover-link"
data-popover="Popover title||And here's some amazing content. It's very engaging. Right?">Hover
me</div>
Grid
column-3
column-3
column-6
column-4
column-4
column-4
column-2
column-2
column-1
column-4
column-1
column-1
column-1
column-12
Home Page Links
Usage:
<section class="ke-home">
<div class="ke-home-links">
<a class="ke-home-link" data-view="config" title="Compare"><i
class="fa fa-balance-scale"></i> <span>Compare</span></a>
<a class="ke-home-link" data-view="admin" title="Administration"><i class="fa fa-cogs"></i>
<span>Administration</span></a>
<a class="ke-home-link" data-view="dashboard" title="Dashboard"><i
class="fa fa-dashboard"></i> <span>Dashboard</span></a>
<a class="ke-home-link" data-view="explore" title="Explore"><i class="fa fa-compass"></i>
<span>Explore</span></a>
</div>
</section>
Page Head
Header text here
Usage:
<div class="ke-page-head">Header text here</div>
Page Description
Page description here
Usage:
<div class="ke-page-desc">Header text here</div>
Product List and Selection
Products 1
Products 2
Products 3 (Selected)
Products 4
Products 5
Products 6
Products 7
Usage:
<div class="ke-tile-box">Products 1</div>
<div class="ke-tile-box">Products 2</div>
<div class="ke-tile-box ke-prodSel">Products 3(Selected)</div>
<div class="ke-tile-box">Products 4</div>
<div class="ke-tile-box">Products 5</div>
<div class="ke-tile-box">Products 6</div>
<div class="ke-tile-box">Products 7</div>
Product List and Selection (small)
Prod 1
Prod 2
Prod 3 (sel)
Prod 4
Prod 5
Prod 6
Prod 7
Usage:
<div class="ke-tile-box-sm">Prod 1</div>
<div class="ke-tile-box-sm">Prod 2</div>
<div class="ke-tile-box-sm ke-prodSel">Prod 3(sel)</div>
<div class="ke-tile-box-sm">Prod 4</div>
<div class="ke-tile-box-sm">Prod 5</div>
<div class="ke-tile-box-sm">Prod 6</div>
<div class="ke-tile-box-sm">Prod 7</div>
Product List and Selection (extra-small)
R1
R2
R3
R4
R5
R6
R7
Usage:
<div class="ke-tile-box-xs">R1</div>
<div class="ke-tile-box-xs">R2</div>
<div class="ke-tile-box-xs ke-prodSel">R3</div>
<div class="ke-tile-box-xs">R4</div>
<div class="ke-tile-box-xs">R5</div>
<div class="ke-tile-box-xs">R6</div>
<div class="ke-tile-box-xs">R7</div>
Toggle Switch Button
Accessible toggle switch component with customizable states. Used for boolean
options and feature toggles with smooth animations and visual feedback.
Demo Examples:
Usage:
<!-- Include CSS -->
<link rel="stylesheet" type="text/css" href="https://www.juniper.net/documentation/pf-assets/css/global-f75c18b567.css">
<!-- Basic Toggle Switch -->
<label class="ke-toggle-switch-wrap" for="myToggle">
<span class="ke-toggle-text">Label Text:</span>
<div class="ke-toggle-switch">
<input type="checkbox" class="ke-toggle-input" id="myToggle">
<div class="ke-toggle-slider"></div>
</div>
</label>
<!-- JavaScript to handle toggle events (optional) -->
<script>
document.getElementById('myToggle').addEventListener('change', function () {
if (this.checked) {
console.log('Toggle is ON');
} else {
console.log('Toggle is OFF');
}
});
</script>
CSS Classes Reference:
.ke-toggle-switch-outer-wrap - Main wrapper container for toggle with label
.ke-toggle-text - Label text styling
.ke-toggle-switch - Toggle switch container
.ke-custom-switch - Switch control wrapper
.ke-toggle-input - Hidden checkbox input (for accessibility)
.ke-toggle-slider - Visual slider/track element
States:
.ke-toggle-input:checked - Checked/ON state
.ke-toggle-input:focus - Focus state (keyboard navigation)
.ke-toggle-input:disabled - Disabled state