Check with your designers to help you design this section
Check with your designers to help you design this section
Inside the header, there is an icon representing the App Switcher. It is the waffle icon, which looks like a grid of boxes. When your team is ready for implementation, this icon needs to be added by your team. In future iterations, this will be dynamically added based on your integration with books.
With the icon added, your team will need to add an Ajax call to fetch the data from your server, or preload the data on page render. For the time being, that data should be acquired from green book, and cached on your product's server. To instatiate the AppSwitcher, you will use the following switcher APIs:
// Option 1, via AppSwitcher extension method
var appSwitcher = RAUL.AppSwitcher.fromOptions({switcherData: response});
// Option 2, direct instantiation
var appSwitcher = new RAUL.AppSwitcher({switcherData: response});
An example of using jQuery Ajax to fetch the data
<script type="text/javascript">
jQuery
.ajax({
method: "GET",
dataType: "json",
url: '/api/v1/app-switcher',
})
.done(function(response) {
RAUL.AppSwitcher.fromOptions({switcherData: response});
})
.fail(function(jqXHR, error) { console.log(jqXHR); });
</script>
<header id="raul-header" class="raul-header">
<i id="raul-header-menu-button" class="raul-header-menu-button fa fa-bars"></i>
<div id="raul-header-logo" class="raul-header-logo">
<img
id="raul-header-logo-mobile"
class="raul-header-logo-mobile"
src="https://cdn.realpage.com/images/rp-logo-dots.svg"
alt="RealPage Inc. Logo"
/>
</div>
<div id="raul-header-title" class="raul-header-title has-sub-info">
<h1 id="raul-header-product" class="raul-header-product">Product Name</h1>
<h2
id="raul-header-company"
class="raul-header-company d-none d-sm-inline-block"
title="Acme Property Management Company"
>
Acme Property Management Company
</h2>
<span id="raul-header-divider" class="raul-header-divider d-none d-sm-inline-block">|</span>
<div id="raul-header-properties" class="raul-header-properties">The Village</div>
</div>
<div id="raul-header-user" class="raul-header-user d-none d-sm-block">
<div
id="raul-header-user-info"
class="raul-header-user-info d-none d-md-inline-flex"
>
<p id="raul-header-user-handle" class="raul-header-user-handle d-none d-md-block m-0">
John W Smith
</p>
<p id="raul-header-user-title" class="raul-header-user-title d-none d-md-block m-0">
Leasing Agent
</p>
</div>
<div id="raul-header-user-avatar" class="raul-header-user-avatar"></div>
<i
id="raul-header-user-angle"
class="raul-header-user-angle fa fa-angle-down"
aria-hidden="true"
></i>
</div>
<div id="raul-header-more" class="raul-header-more d-xl-none">
<i id="raul-header-more-icon" class="raul-header-more-icon fa fa-ellipsis-v"></i>
</div>
<div id="raul-header-icon-wrap" class="unified-navbar">
<div class="unified-navbar-item">
<a href="#home">
<i id="raul-header-home" class="raul-header-home fa fa-home d-none d-xl-inline-block"></i>
</a>
</div>
<div class="unified-navbar-item">
<a href="#switcher">
<i id="raul-header-app-switcher" class="raul-header-app-switcher fa fa-th"></i>
</a>
</div>
<div class="unified-navbar-item">
<a href="#help">
<i
id="raul-header-help"
class="raul-header-help fa fa-question-circle d-none d-xl-inline-block"
></i>
</a>
</div>
<div class="unified-navbar-item">
<a href="#settings">
<i
id="raul-header-settings"
class="raul-header-custom-icon fa fa-cog d-none d-xl-inline-block"
></i>
</a>
</div>
<div class="unified-navbar-item">
<a href="#shopping">
<i
id="raul-header-shopping"
class="raul-header-shopping fa fa-shopping-cart d-none d-xl-inline-block"
data-badge="2"
></i>
</a>
</div>
<div class="unified-navbar-item">
<a href="#notifications">
<i
id="raul-header-notifications"
class="raul-header-notifications fa fa-bell"
data-badge="20"
></i>
</a>
</div>
</div>
<div id="raul-header-search" class="raul-header-search d-none d-lg-block">
<input id="raul-header-search-input" class="raul-header-search-input" placeholder="Search">
<i id="raul-header-search-icon" class="raul-header-search-icon fa fa-search"></i>
</div>
<div id="raul-header-search-mobile" class="raul-header-search-mobile d-lg-none">
<input
id="raul-header-search-input-mobile"
class="raul-header-search-input-mobile"
placeholder="Search"
>
<i id="raul-header-search-icon-mobile" class="raul-header-search-icon-mobile fa fa-search"></i>
</div>
</header>
<div id="raul-header-more-context" class="raul-header-more-context d-xl-none">
<div id="raul-header-more-context-inner" class="raul-header-more-context-inner">
<div class="raul-header-user clearfix d-sm-none">
<div class="raul-header-user-avatar"></div>
<div class="raul-header-user-info">
<p class="raul-header-user-handle m-0">John Smith</p>
<p class="raul-header-user-title m-0">Leasing Agent</p>
</div>
<i class="raul-header-user-angle fa fa-angle-down" aria-hidden="true"></i>
</div>
<a class="raul-header-context-home" href="#home">
<i class="raul-header-home fa fa-home"></i>
<span>Home</span>
</a>
<a class="raul-header-context-help" href="#help">
<i class="raul-header-help fa fa-question-circle"></i>
<span>Help</span>
</a>
<a class="raul-header-context-custom" href="#settings">
<i class="raul-header-custom-icon fa fa-cog"></i>
<span>Settings</span>
</a>
<a class="raul-header-context-shopping" href="#shopping">
<i class="raul-header-shopping fa fa-shopping-cart" data-badge="2"></i>
<span>Shopping Card <span class="badge badge-pill badge-default">2</span></span>
</a>
</div>
</div>