Search Bar Embedded in Image with Submit/View Ticket Buttons (North Central University)

Introduction

A Self-Service Portal header with a quick summary of searching and submitting tickets is embedded on top of an image.  There are two buttons, one to submit a ticket and one to view tickets just below the search bar.

This module was originally designed by North Central University.

Screenshot

A Self-Service Portal header with a quick summary of searching and submitting tickets is embedded on top of an image.  There are two buttons, one to submit a ticket and one to view tickets just below the search bar.

Module Settings

  • Show Border: unchecked
  • Show Name: unchecked
  • Sanitize Content: checked
  • Layout Notes: Works best in 100% width column

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
  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

<div class="container-fluid headerBlock" style="padding-left: 0; padding-right: 0">
<div class="row" style="margin: 0 auto; max-width: 1170px">
<div class="col-md-12" style="min-height: 380px; background-image: url(&quot;https://ncuhosted.s3.amazonaws.com/skyline_04.jpg&quot;); background-position: right; background-size: cover; background-repeat: no-repeat">
<div class="row">
<div class="col-md-6 hidden-sm hidden-xs" style="margin: 50px 20px 0">
<div class="row" style="padding: 15px">
<div class="col-md 12">
<h1 style="font-size: 4rem; text-shadow: 1px 1px 1px rgba(41, 41, 41, 0.1); letter-spacing: -0.02rem"><strong>Self-Service Portal</strong></h1>

<p style="font-size: 1.7rem; text-shadow: 1px 1px 1px rgba(41, 41, 41, 0.1)">Submit a ticket, report an issue, request a service, search knowledge base articles, and find answers to your questions.</p>
</div>
</div>

<div class="row">
<div class="col-md-12" style="padding: 10px 5px">
<div class="gutter-bottom input-group site-search" id="SiteSearch-9f1813bc7cdc49ed946563a9aa77a323" style="max-width: 600px; margin-left: 10px; margin-right: auto;">
<div class="input-group-btn" id="SiteSearch-dropdown-9f1813bc7cdc49ed946563a9aa77a323"><lt-highlighter contenteditable="false" style="display: none; z-index: 1 !important;"><lt-div class="lt-highlighter__wrapper" spellcheck="false" style="width: 11px !important; height: 11px !important; transform: none !important; transform-origin: 11px 17px 0px !important; margin-top: 1px !important; margin-left: 1px !important;"><lt-div class="lt-highlighter__scrollElement" style="top: 0px !important; left: 0px !important; width: 58px !important; height: 32px !important;"></lt-div></lt-div></lt-highlighter><button aria-expanded="false" aria-haspopup="true" class="btn btn-default dropdown-toggle" data-component="all" data-component-icon="fa-reorder" data-gramm="false" data-toggle="dropdown" id="SiteSearch-filter-9f1813bc7cdc49ed946563a9aa77a323" spellcheck="false" title="Filter your search by categories" type="button"><span aria-label="icon" contenteditable="false" role="region" tabindex="-1"><span class="fa fa-reorder"></span></span><span aria-label="icon" contenteditable="false" role="region" tabindex="-1"><span aria-hidden="true" class="fa fa-fw fa-nopad fa-caret-down"></span></span> <span class="sr-only"> Filter your search by category. Current category: <span class="js-current-component">All</span> </span></button>

<ul class="dropdown-menu" style="z-index: 90;">
    <li><a data-component="all" data-component-text="Entire Site" href="javascript:void(0);" title="Search all areas"><span aria-label="icon" contenteditable="false" role="region" tabindex="-1"><span aria-hidden="true" class="fa fa-fw fa-nopad fa-globe"></span></span> Entire Site</a></li>
    <li class="divider" role="separator">&nbsp;</li>
    <li role="presentation"><a data-component="kb" data-component-icon="fa-lightbulb-o" data-component-text="Knowledge Base" href="javascript:void(0);" role="menuitem" title="Search Knowledge Base"><span aria-label="icon" contenteditable="false" role="region" tabindex="-1"><span aria-hidden="true" class="fa fa-fw fa-nopad fa-lightbulb-o"></span></span> Knowledge Base </a></li>
    <li role="presentation"><a data-component="sc" data-component-icon="fa-compass" data-component-text="Service Catalog" href="javascript:void(0);" role="menuitem" title="Search Service Catalog"><span aria-label="icon" contenteditable="false" role="region" tabindex="-1"><span aria-hidden="true" class="fa fa-fw fa-nopad fa-compass"></span></span> Service Catalog </a></li>
</ul>
</div>
<input aria-label="Search the Enterprise Service Site" autocomplete="on" class="form-control" id="SiteSearch-text-9f1813bc7cdc49ed946563a9aa77a323" placeholder="Services and Knowledge Base Articles" 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 active="" class="btn btn-default" id="SiteSearch-button-9f1813bc7cdc49ed946563a9aa77a323" title="Search" type="button"><span aria-label="icon" contenteditable="false" role="region" tabindex="-1"><span aria-hidden="true" class="fa fa-fw fa-nopad fa-search blue"></span> Search</span> <span class="sr-only">Search</span></button> </span></div>
<script>
          $(function() {
            var siteSearch = new TeamDynamix.SiteSearch({
              searchUrl: "/TDClient/1980/Portal/Shared/Search",
              tagLookupServiceUrl: "/TDClient/1946/Portal/WebServices/JSON/TagLookupService.asmx/GetItems",
              searchTextBoxSelector: '#SiteSearch-text-9f1813bc7cdc49ed946563a9aa77a323',
              searchComponentFilterButtonSelector: '#SiteSearch-filter-9f1813bc7cdc49ed946563a9aa77a323',
              searchButtonSelector: '#SiteSearch-button-9f1813bc7cdc49ed946563a9aa77a323',
              searchFilterDropdownSelector: '#SiteSearch-dropdown-9f1813bc7cdc49ed946563a9aa77a323',
              showKnowledgeBaseOption: true,
              showServicesOption: true,
              showForumsOption: false,
              autoFocusSearch: false
            });
          });
        </script></div>

<div class="row">
<div class="col-md-6" style="padding: 10px 15px"><a class="btn btn-primary" href="../Requests/ServiceCatalog" style="width: 100%; padding-top: 12px; padding-bottom: 12px; font-size: 1.5rem; box-shadow: 0 1px 10px rgba(41, 41, 41, 0.2)"><strong>Submit a Ticket</strong> <span aria-label="icon" role="region" tabindex="-1"><span aria-hidden="true" class="fa fa-chevron-right" style="padding-left: 5px; font-size: 0">&nbsp;</span></span></a></div>

<div class="col-md-6" style="padding: 10px 15px"><a class="btn btn-primary" href="../Requests/RecentRequests" style="width: 100%; padding-top: 12px; padding-bottom: 12px; font-size: 1.5rem; box-shadow: 0 1px 10px rgba(41, 41, 41, 0.2)"><strong>View My Tickets</strong> <span aria-label="icon" role="region" tabindex="-1"><span aria-hidden="true" class="fa fa-chevron-right" style="padding-left: 5px; font-size: 0">&nbsp;</span></span> </a></div>
</div>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-6 hidden-md hidden-lg" style="background-color: rgba(255, 255, 255, 0.95); margin: -160px 20px 0; border: 2px solid rgba(222, 225, 226, 1)">
<div class="row" style="padding: 5px">
<div class="col-md 12"><img alt="" src="https://ncuhosted.s3.amazonaws.com/ncu_logo.svg" style="max-width: 350px; padding: 15px 0 30px" />
<h1 style="font-size: 3rem; text-shadow: 1px 1px 1px rgba(41, 41, 41, 0.1); letter-spacing: -0.02rem"><strong>Self-Service Portal</strong></h1>

<p style="font-size: 1.6rem; text-shadow: 1px 1px 1px rgba(41, 41, 41, 0.1)">Submit a ticket, report an issue, request a service, search knowledge base articles, and find answers to your questions.</p>
</div>
</div>

<div class="row" style="padding: 5px 15px">
<div class="row">
<div class="col-md-6" style="padding: 5px 35px">
<div class="gutter-bottom input-group site-search" id="SiteSearch-9f1813bc7cdc49ed946563a9aa77a323" style="max-width: 600px; margin-left: 10px; margin-right: auto;">
<div class="input-group-btn" id="SiteSearch-dropdown-9f1813bc7cdc49ed946563a9aa77a323"><lt-highlighter contenteditable="false" style="display: none; z-index: 1 !important;"><lt-div class="lt-highlighter__wrapper" spellcheck="false" style="width: 11px !important; height: 32px !important; transform: none !important; transform-origin: 30px 17px 0px !important; margin-top: 1px !important; margin-left: 1px !important;"><lt-div class="lt-highlighter__scrollElement" style="top: 0px !important; left: 0px !important; width: 58px !important; height: 32px !important;"></lt-div></lt-div></lt-highlighter><button aria-expanded="false" aria-haspopup="true" class="btn btn-default dropdown-toggle" data-component="all" data-component-icon="fa-reorder" data-gramm="false" data-toggle="dropdown" id="SiteSearch-filter-9f1813bc7cdc49ed946563a9aa77a323" spellcheck="false" title="Filter your search by categories" type="button"><span aria-label="icon" contenteditable="false" role="region" tabindex="-1"><span class="fa fa-reorder"></span></span><span aria-label="icon" contenteditable="false" role="region" tabindex="-1"><span aria-hidden="true" class="fa fa-fw fa-nopad fa-caret-down"></span></span> <span class="sr-only"> Filter your search by category. Current category: <span class="js-current-component">All</span> </span></button>

<ul class="dropdown-menu" style="z-index: 90;">
    <li><a data-component="all" data-component-text="Entire Site" href="javascript:void(0);" title="Search all areas"><span aria-label="icon" contenteditable="false" role="region" tabindex="-1"><span aria-hidden="true" class="fa fa-fw fa-nopad fa-globe"></span></span> Entire Site</a></li>
    <li class="divider" role="separator">&nbsp;</li>
    <li role="presentation"><a data-component="kb" data-component-icon="fa-lightbulb-o" data-component-text="Knowledge Base" href="javascript:void(0);" role="menuitem" title="Search Knowledge Base"><span aria-label="icon" contenteditable="false" role="region" tabindex="-1"><span aria-hidden="true" class="fa fa-fw fa-nopad fa-lightbulb-o"></span></span> Knowledge Base </a></li>
    <li role="presentation"><a data-component="sc" data-component-icon="fa-compass" data-component-text="Service Catalog" href="javascript:void(0);" role="menuitem" title="Search Service Catalog"><span aria-label="icon" contenteditable="false" role="region" tabindex="-1"><span aria-hidden="true" class="fa fa-fw fa-nopad fa-compass"></span></span> Service Catalog </a></li>
</ul>
</div>
<input aria-label="Search the Enterprise Service Site" autocomplete="on" class="form-control" id="SiteSearch-text-9f1813bc7cdc49ed946563a9aa77a323" placeholder="Services and Knowledge Base Articles" 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 active="" class="btn btn-default" id="SiteSearch-button-9f1813bc7cdc49ed946563a9aa77a323" title="Search" type="button"><span aria-label="icon" contenteditable="false" role="region" tabindex="-1"><span aria-hidden="true" class="fa fa-fw fa-nopad fa-search blue"></span> Search</span> <span class="sr-only">Search</span></button> </span></div>
<script>
          $(function() {
            var siteSearch = new TeamDynamix.SiteSearch({
              searchUrl: "/TDClient/1980/Portal/Shared/Search",
              tagLookupServiceUrl: "/TDClient/1946/Portal/WebServices/JSON/TagLookupService.asmx/GetItems",
              searchTextBoxSelector: '#SiteSearch-text-9f1813bc7cdc49ed946563a9aa77a323',
              searchComponentFilterButtonSelector: '#SiteSearch-filter-9f1813bc7cdc49ed946563a9aa77a323',
              searchButtonSelector: '#SiteSearch-button-9f1813bc7cdc49ed946563a9aa77a323',
              searchFilterDropdownSelector: '#SiteSearch-dropdown-9f1813bc7cdc49ed946563a9aa77a323',
              showKnowledgeBaseOption: true,
              showServicesOption: true,
              showForumsOption: false,
              autoFocusSearch: false
            });
          });
        </script><br />
&nbsp;</div>
</div>

<div class="col-md-6" style="padding: 5px 15px"><a class="btn btn-primary" href="../Requests/ServiceCatalog" style="width: 100%; padding-top: 12px; padding-bottom: 12px; font-size: 1.75rem; box-shadow: 0 1px 10px rgba(41, 41, 41, 0.2)"><strong>Submit a Ticket</strong> <span aria-label="icon" role="region" tabindex="-1"><span aria-hidden="true" class="fa fa-chevron-right" style="padding-left: 5px; font-size: 0">&nbsp;</span></span></a></div>

<div class="col-md-6" style="padding: 5px 15px"><a class="btn btn-default" href="../Requests/RecentRequests" style="width: 100%; padding-top: 12px; padding-bottom: 12px; font-size: 1.75rem; box-shadow: 0 1px 10px rgba(41, 41, 41, 0.2)"><strong>View My Tickets</strong> <span aria-label="icon" role="region" tabindex="-1"><span aria-hidden="true" class="fa fa-chevron-right" style="padding-left: 5px; font-size: 0">&nbsp;</span></span> </a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

50% helpful - 2 reviews
Print Article

Attachments (0)

No attachments found.