Body
Introduction
A block of color with the Service Support Portal header, a reminder to sign in, and an embedded search bar. Underneath this top color block is a grey block with 6 application icons that link to how-to articles for those applications.
This module was originally designed by Bowdoin College.
Screenshot
Module Settings
- Show Border: unchecked
- Show Name: unchecked
- Sanitize Content: unchecked
- Layout Notes: This module works best in a module that spans the entire window.
Module Code
To use the code in the box below, when creating a new module:
- Click the Source button in the top-left of the WYSIWYG editor
- Paste the code from below
- Update links or images to match your environment references
- This module requires changing the SiteSearch ID information, which you can pull from inspecting your existing client portal. In addition, there is a SearchURL value and autocompleteSearchUrl value which will need to be updated to reference your environment.
- Click the Source button again to see a preview of the content
Note: some styling may not display until the module is viewed in the client portal
- Save the module
<!-- Start New Header Section-->
<div class="row" style="margin-top: 0%; margin-bottom: 0; padding: 0%; background-color: #000000">
<center>
<p> </p>
<h1><span style="font-family:Arial; color:#ffffff;"><strong>TDX Service Support Portal</strong></span></h1>
<div style="font-family:Arial; color:#ffffff; font-size:20px; max-width: 90%;"><big>A one-stop place for technology and application support</big></div>
<div style="font-family:Arial; color:#ffffff; font-size:18px; max-width: 95%;"><big><a aria-label="Sign in" class="button--link" href="/TDClient/Login.aspx?ReturnUrl=%2fTDClient%2fHome%2f" style="color: #ffffff !important;">Sign-in</a> to access all of the TDX help resources</big></div>
<br />
<br />
<!-- Begin Search Bar Row -->
<fieldset class="container search-box" style="background: #000000; color: #fff; padding: 20px 15px; display: flex; justify-content: center; align-items: center; flex-direction: column; max-width: 100%;">
<div class="row" style="width: 100%">
<div class="col-xs-11 col-sm-12 col-md-12 col-lg-12">
<div class="gutter-bottom input-group site-search" id="SiteSearch-57dc7fc5efef4209971578ff09fff400" style="max-width: 700px;"><label class="sr-only" for="SiteSearch-text-6a347ad7af5c4fc38d0dca4792f99441">How can we help you?</label> <input autocomplete="off" class="form-control" id="SiteSearch-text-6a347ad7af5c4fc38d0dca4792f99441" placeholder="How can we help you?" title="To search for items with a specific tag, enter the # symbol followed by the name of the tag. To search for items using exact match, place double quotes around your text." type="text" /> <span class="input-group-btn"><button class="btn btn-default" id="SiteSearch-button-6a347ad7af5c4fc38d0dca4792f99441" title="Search" type="button"><span aria-hidden="true" aria-label="icon" contenteditable="false" role="region" tabindex="-1"> <span aria-hidden="true" class="fa fa-arrow-right blue"> </span></span> <span class="sr-only">Search</span></button> </span></div>
<script>
$(function() {
var siteSearch = new TeamDynamix.SiteSearch({
searchUrl: "/TDClient/165/Portal/Shared/Search",
enableAutocompleteSearch: true,
autocompleteSearchUrl: '/TDClient/165/Portal/Shared/AutocompleteSearch',
searchTextBoxSelector: '#SiteSearch-text-6a347ad7af5c4fc38d0dca4792f99441',
searchComponentFilterButtonSelector: '#SiteSearch-filter-6a347ad7af5c4fc38d0dca4792f99441',
searchButtonSelector: '#SiteSearch-button-6a347ad7af5c4fc38d0dca4792f99441',
searchFilterDropdownSelector: '#SiteSearch-dropdown-6a347ad7af5c4fc38d0dca4792f99441',
showKnowledgeBaseOption: true,
showServicesOption: true,
showForumsOption: false,
autoFocusSearch: false
containerExtraWidth: 0
});
});
</script></div>
</div>
<!-- End Search Bar Row --></fieldset>
<a class="button--link" href="/TDClient/Login.aspx?ReturnUrl=%2fTDClient%2fHome%2f" style="color: #ffffff !important;">Sign in to access all available services</a><br />
<script>
function isSignedIn() {
var node = document.querySelector('[title="Sign In"]');
if (node) {
document.querySelector('[class="sign-in-note"]').style.display = 'block';
}
return;
}
isSignedIn();
</script></center>
</div>
<!-- End Search Header Section -->