Simple Embedded Portal Search Banner with Icon Links to Key Applications (Bowdoin College)

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:

  1. Click the Source button in the top-left of the WYSIWYG editor
  2. Paste the code from below
  3. Update links or images to match your environment references
    1. 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.
  4. 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
  5. Save the module

<!-- Start New Header Section-->
<div class="row" style="margin-top: 0%; margin-bottom: 0; padding: 0%; background-color: #000000">
<center>
<p>&nbsp;</p>

<h1><span style="font-family:Arial; color:#ffffff;"><strong>TDX&nbsp;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>
&nbsp;

<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 />
&nbsp; <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 -->

Print Article