TDClient-Portal

This is simple repository to share the front-end code for a custom designed homepage that we built for our IT Help Center using the TeamDynamix TDClient portal application.

Prerequisites

In order to make the needed changes to the homepage of your TDClient portal application, you will need an system administrator account with the permission Create/Modify Unsanitized HTML Modules enabled (see the TeamDynamix documentation HTML Content Allowlists). If you do not have this permission, please contact your system administrator to enable it or contact TeamDynamix Support to request access.

Helpful Links

• TeamDynamix GitHub Repository
• Create and Customize Client Portal Pages
• Create and Edit HTML Modules

Important Notes

The code included in this repository is a template for your own TDClient portal application. We've used double curly brace {{variable}} syntax to make it easier to replace the values with your own. You'll need to replace each of these placeholders with actual values when implementing the Search Bar, Homepage, and Footer.

Many of the UI components use fonts/icons from Google Fonts and Font Awesome. The ones we used are included in the code already, replace them with your own if you want to use different ones. Those components are under their respective copyrights. We are not responsible for any issues that may arise from using these components.

Preparation

1. Obtain your Client Portal Application variables from TDAdmin
   1. Go to TDAdmin > Applications > Select the Client Portal Application (see image below)
   2. Copy the application ID and Partial URL and save them for later
2. Get your specific search bar code from TDClient
   1. Go to your TDClient portal application in your browser
   2. On the page, right click and select "Inspect"
   3. Inspect the default search bar code (see image below)
      
   4. Find your unique ID for the search bar in the HTML code, typically looks like SiteSearch-xxxxxxxxx in the class name pull-left topLevelSearch input-group. This is your Search Bar ID.
   5. Copy just the unique ID string that is trailing SiteSearch- and save it for later
3. When done, you should have the following variables:
   • Client Application ID
   • Partial URL
   • Search Bar ID
4. Clone this repository
   • git clone https://github.com/BYUI-Information-Technology/TDClient-Portal.git

Updating the Search Bar

1. Open the index.html file in the cloned repository

2. Replace the following variables in the <script> tag with your own:

   • Client Application ID
   • Partial URL
   • Search Bar ID

     <script>
         $(function () {
             var siteSearch = new TeamDynamix.SiteSearch({
                 searchUrl: "/TDClient/{{Client Application ID}}/{{Partial URL}}/Shared/Search",
                 enableAutocompleteSearch: true,
                 autocompleteSearchUrl: "/TDClient/{{Client Application ID}}/{{Partial URL}}/Shared/AutocompleteSearch",
                 searchTextBoxSelector: "#SiteSearch-text-{{Search Bar ID}}",
                 searchComponentFilterButtonSelector: "#SiteSearch-filter-{{Search Bar ID}}",
                 searchButtonSelector: "#SiteSearch-button-{{Search Bar ID}}",
                 searchFilterDropdownSelector: "#SiteSearch-dropdown-{{Search Bar ID}}",
                 showKnowledgeBaseOption: true,
                 showServicesOption: true,
                 showForumsOption: false,
                 autoFocusSearch: false,
                 containerExtraWidth: 0
             });
         });
     </script>

Updating the Homepage HTML links

1. Replace the search-container HTML element, ID with your own #SiteSearch-text-{{Search Bar ID}}
2. Replace the button-tile HTML elements with your own links such as:
   • Submit Ticket - Standard ticket request form link
   • View My Tickets - My Tickets page link
   • System Status - System Status (if applicable)
   • Ask Question - Ask Question page link
   • Knowledge Base - Knowledge Base page link
3. Replace the support-options tiles with your own links such as:
   • Call Us - Phone number link (uses tel: protocol)
   • Chat - Chat link (if applicable)
   • Email - Email link (uses mailto: protocol)
4. Replace the business-hours text with your own business hours
5. Save the file
6. Preview the changes (if using an IDE, you can preview the changes by clicking the "Preview" button)

Updating the Footer

The code for the footer is located in the footer.html file. We've used double curly brace {{variable}} syntax to make it easier to replace the values with your own. You'll need to replace each of these placeholders with actual values when implementing this footer in your application.

1. Open the footer.html file in the cloned repository
2. Replace the following variables in the footer container with your own:
   • Organization Name
   • Address
   • Home Page Link
   • Site Policies Link
   • Contact Us Link
   • About Link
   • Facebook Link
   • Instagram Link
   • WhatsApp Link
   • Year

Deploying to TeamDynamix

Step 1: Create a new HTML module

1. Go to TDAdmin > Applications > Select the Client Portal Application > Modules & Pages > HTML Modules > + New
2. Select Client Portal from the Category dropdown
3. Provide a new page name (such as "Main Content")
4. Click the Source button in the content editor
5. Copy and paste your updated index.html file content into the source editor
6. Deselect Show Border, Show Name, and Sanitize Content
7. Click the Save button

Step 2: Create a new Page

1. Go to TDAdmin > Applications > Select the Client Portal Application > Modules & Pages > Pages > + New
2. Provide a new page name and description (such as "Home") and click the "Save" button
3. Open the Content tab after saving
4. Click Edit Layout and select 100% layout option
5. Drag and drop the new HTML module into the layout
6. Click the Save button

Step 3: Update the Client Portal Footer

1. Go to TDAdmin > Applications > Select the Client Portal Application > Settings > Client HTML Footer
2. Deselect the Use Default Client Footer checkbox
3. Click the Save button

Credits

• Google Fonts
• Font Awesome
• TeamDynamix

About

This project was created as a public repository by engineers at Brigham Young University-Idaho. For more open source projects, please visit our GitHub Homepage.