Multiple Buttons on Multiple Tabs

Introduction

A block module holding tabs.  The tabs contain action buttons to drive to other resources.  This can be utilized to provide many fast link buttons on a TDNext desktop without taking up too much space.  You could direct technicians to items such as alternate TDX webpages (TDClient, TDAdmin, etc.), ticketing forms, Org Resources (intranet), KB sections, etc.

This module was originally designed by TDX.

Screenshot

Uploaded Image (Thumbnail) 

Uploaded Image (Thumbnail)

Module Settings

  • Show Border: unchecked
  • Show Name: unchecked
  • Sanitize Content: Checked
  • Layout Notes: This works well on desktops in TDNext to provide fast buttons for technicians while saving space

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

<ul class="nav nav-tabs">
    <li class="active"><a aria-expanded="true" data-toggle="tab" href="div.home">Home</a></li>
    <li><a aria-expanded="false" data-toggle="tab" href="div.specific">Specific</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane fade home active in">
<div class="row" style="width: 100%">
<div class="col-md-6" style="padding: 5px;"><a class="btn btn-primary btn-block mb-2" href="https://www.google.com" style="background-color: #2c71b9;" target="_blank">Home L1</a><a class="btn btn-primary btn-block mb-2" href="https://www.google.com" style="background-color: #2c71b9;">Home L2</a></div>

<div class="col-md-6" style="padding: 5px;"><a class="btn btn-primary btn-block mb-2" href="https://www.google.com" style="background-color: #2c71b9;">Home R1</a><a class="btn btn-primary btn-block mb-2" href="https://www.google.com" style="background-color: #2c71b9;">Home R2</a></div>
</div>
</div>

<div class="tab-pane fade specific">
<div class="row" style="width: 100%">
<div class="col-md-6" style="padding: 5px;"><a class="btn btn-primary btn-block mb-2" href="https://www.google.com" style="background-color: #2c71b9;" target="_blank">Specific L1</a><a class="btn btn-primary btn-block mb-2" href="https://www.google.com" style="background-color: #2c71b9;">Specific L2</a></div>

<div class="col-md-6" style="padding: 5px;"><a class="btn btn-primary btn-block mb-2" href="https://www.google.com" style="background-color: #2c71b9;">Specific R1</a><a class="btn btn-primary btn-block mb-2" href="https://www.google.com" style="background-color: #2c71b9;">Specific R2</a></div>
</div>
</div>
</div>
 

Print Article