Skip to main content
Mitratech Success Center

Client Support Center

Need help? Click a product group below to select your application and get access to knowledge articles, webinars, training content, and release notes or to contact our support team.

Authorized users - log in to create a ticket, view tickets status and check your success plan details.

 

New Home Page Portal Panes - TCE 7.1

  1. Last updated
  2. Save as PDF

As part of the revamped user experience in TeamConnect 7.1, ten new portal panes have been introduced to the library of components that can be used to create home pages. These redesigned portal panes were designed to assist users quickly understand data and focus on the most important tasks and decisions.

clipboard_e24ec4699bed70d9b3b9701c98448b23a.png

Please see the video for the updates to working with Home pages and Portal panes.

Introduced New Portal Panes

Name

Portlet Code Name

Description

Double Search View Insights

DoubleSearchViewInsightPortlet

Similar to Single Search View, but with two search view options instead of one.

Note: Users who want to search for “My Invoices Awaiting Approval” should use the “My Invoices”.

For more information, please see the video.

clipboard_ea49313fd62e0d8ad8e3966a13531ad53.png

Single Search View Insights

SearchViewSingleInsightPortlet

Displays a record count from an object search view, such as My Matters. By clicking on the value, the user will get to the search results. Also, it is possible to provide a wizard link, such as Create New Matter. Intended for users that monitor and update multiple records and need to swiftly take action or refer to critical information.

Note: Users who want to search for “My Invoices Awaiting Approval” should use the “My Invoices”.

For more information, please see the video.

clipboard_e34f4e39c8147e2f5acdaa880d95a11ca.png

My Invoices Insights

InvoiceSearchViewInsightPortlet

Similar to Search View insights, but specifically for invoices filtered by the logged-in user. Intended for invoice approvers to view how many invoices require their attention. Provides various status of invoices which are Not posted, Pending, Rejected, Failed, Approved or Pending InvoiceIQ predictions.

For more information, please see the video.

clipboard_e67f046c80d58fb6bc8d68aceea81ed87.png

Workflows Insights

WorkflowInsightPortlet

Similar to Search View Insights, but specifically for workflows. It is intended for workflow managers to ensure that appropriate data actions are performed.

For more information, please see the video.

clipboard_e03f7c23746bfd2d8a00e77c5c393fffd.png

Recently Viewed Records List

RecentlyViewedInsightPortlet

Displays a combined list of the logged-in user's most recently seen records. Includes a variety of record kinds and up to five objects.

For more information, please see the video.

clipboard_ebae88dde6e328fda38c6cdc014ee8210.png
New Timekeepers TimekeepersPortlet

A list of vendors who have submitted new timekeepers for authorization through Collaborati, along with the number of timekeepers that require approval. Intended to help e-billing managers stay on top of the vendor and timekeeper authorization processes.

Note- Requires CSM.

For more information, please see the video.

clipboard_e9e69f8cf894ecd091c4684dbd3fde5c7.png

Tasks & Appointments List

UpcomingEventsAndTasksPortlet

Similar to Search View insights, but specifically for tasks and appointments filtered to the logged in user.  Intended to give users a quick insight into their scheduled work.

For more information, please see the video.

clipboard_e0fcd1bec6a29fdbf56a830b18fd3bbc1.png

Search Results

SearchViewListInsightPortlet

Displays a list of records based on an object search view, such as My Matters.  Intended to allow users to quickly access critical records. This widget is similar to the current list portal pane, except it is stylized like the other new portlets, rather than a table view.

For more information, please see the video.

clipboard_efcc6d86d597c22dc68f53b9748c746a0.png

Actions

ActionsInsightPortlet

Contains links to tools or wizards. Intended to allow users to take quick actions from the home page such as creating a new matter. This widget is similar to the current actions portlet, but it is styled to match the other new portlets.

For more information, please see the video.

clipboard_e7d172129a23b21cfeaf497d3e9590d35.png

TCBI Dashboard

TCBIDashboardPortlet

Allows the user to embed a TCBI Dashboard to display analytics. Intended to accelerate decision-making using the most critical key metrics.

For more information, please see the video.

clipboard_e1da04edbb17e6b7bd20a488de2df54da.png

How to create a new Portal Pane

To build a new portal pane, the user should follow the instructions below:

Note: To test the home page, the administrator must first ensure that they have the necessary rights and permissions, then log out and log back into TeamConnect.

Steps to follow Screenshots for reference
  1. Login TeamConnect.
  2. Navigate to Setup > Click the "Go to…" dropdown > Select ". Portal Panes" from the dropdown.
 clipboard_e82de838509736ab04d7adc9fee0dde2e.png
  1. Click on the New button from the Portal Panes page.
 clipboard_e3d675bba3467b7a2840f0819bcf9bd14.png
  1. Enter the required details like title, unique key.

Note: 

  • We recommend unchecking the “Editable by User” checkbox, as this will allow users to customize the design as intended by the admin (designer).
  • When the "Show title" option is unchecked in portal panes, the title bar will still appear, but without the title text and all other controls are still available (edit, minimize/maximize, and the ability to grab the title bar).
 clipboard_ee7301b2311e7a9f6d146af20a58fe924.png

  1. Select "Dynamic Content" from the "Content Type" drop down of "Portal Pane Contents" section.

Note: Following the TCE 7.1 PB1 upgrade, Custom Content is now referred to as Dynamic Content which functions the same manner as picking Custom Content, only the name has been changed.

 clipboard_e343c04672fe473287f16a79b6c7d7967.png
  1. Once selected, enter an appropriate Label & Unique Key.
  2. Select the "Class Name" from the dropdown.

Note: The “Class Name” field is displayed as a dropdown with a combination of the pre-defined portal panes as well as class files found in the portal panes directory of the TeamConnect file structure.

 clipboard_e244ae30a8af0082564d19f3b09a43c8b.png
  1. Add the Order and the Alignment from the dropdown.
  2. Click “Add Items” to create Portal Pane content.
  3. Click the Save button.
  4. Now Click the “Edit Parameters” link under the Class Name section to open the “Edit Dynamic Content Parameter” window.
  1. Select the below parameters:
    • First select the Object from the dropdown and then the Search View.
    • Select the required Color for object icon.
    • Enter the FontAwesome icon in the field.

Important: To enter the FontAwesome icon field, the user can type or copy/paste the name of the font awesome icon they want to use, with the “fa-” as a prefix following with the required icon name by referring to the article “List of Font Awesome icons”. For example: fa-user, fa-file, fa-calculator, etc.

Note: To refer to the detailed information on parameters for all the 10 newly created portal panes, refer to the article “Introduced New Portal Panes”.

  1. Once all the fields are populated, click the “Ok” button to close the edit parameter window.

Important: The user should enter edit parameters for each dynamic content type. Empty edit parameters will result in a blank portal pane and an error message will appear on the portal pane after adding to the homepage.

 clipboard_e6890f904334fd97cd9bb57356a9f09ca.png


clipboard_ebba985d9822fe53da70b36c5338b82f9.png
  1. Close the portal pane window.
 clipboard_ebcf721b742c0eb7c6fac86919aaed50d.png
  1. Go back to the specific portal pane and select it to open again.
  2. Click the “Synchronize Settings” and “Synchronize Content” button to synchronize the portal pane with TeamConnect user interface.
  3. Now select the Home Page from the “Go to..” dropdown of the setup.
 clipboard_e675c46fac639a9a67c5e79c342a1c612.png
  1. Select the homepage of your choice and click on it. In this, we select “Insight”.
 clipboard_e64cd3426db2b690a9256374eff9eb47d.png
  1. Select the content tab and the newly created Portal Pane “My Portal Pane” from the drop down and click “Add Portal Pane” button.

 

 

 

 

 

 

 

 

 

Note: When a user edits a portal pane in setup > home pages > content and uncheck "Show Title", the title remains visible on the content page. There will be an indicator after the name of the portal pane indicating that the title is hidden. This functionality allows the user to edit and move portal panes around on the home page content even if they don’t want the title bar to appear on users' home pages via the front end.

 clipboard_e9482625dccb286c9e302b6527219f4ff.png


clipboard_edbf58075b0e8b8e48a5bf699a8515646.png
  1. Click save and after that click on the "Synchronize setting" and "Synchronize Content" button.
  2. Close the Setup window.
  3. The user can see the newly created portal pane on the selected TeamConnect homepage “Insights”.
 clipboard_e63165898e318b9d9e48d965b2f66f755.png

Note:

  • When showing two or three columns, the width of each column does not alter dynamically in response to the contents of the portal panes; instead, they display according to the percentage of width specified in the setup. Introduced two new options to regulate the number of columns (dropdown for 1, 2, or 3) and the relative percentage of widths. The user can use 33:33:33 to ensure that the portal panes are split evenly.

 

Note: The user can edit all the parameters except the object of the portal pane in TeamConnect’s frontend homepage as the refresh functionality is only available at setup side and not at frontend side.

Font Awesome icons

When editing parameters for portal pane, there are two Font Awesome icon fields:

For more information, please see the video.

  1. Font Awesome Family dropdown - specifically in the Action portal pane where Solid, Regular, or Light controls the look of the selected icon.


 

  1. Font Awesome Icon text field - The user can type or copy/paste the name of the font awesome icon they want to use, with the “fa-” as a prefix following with the required icon name.
    • The user can use “far-” for regular, “fal-” for light and “fas-” for default appearance of the icon.

 

 

Note: Not all the portlets have the family field; we recommend to use the standard styling. Custom icon style family is missing in below mentioned portlets:

  • ActionsInsightPortlet
  • InvoiceSearchViewInsightsPortlet
  • SearchViewSingleInsightPortlet
  • SearchViewlistInsightPortlet
  • DoubleSearchViewInsightPortlet

 

Note: Below are some lists of examples. You can use the full list of font awesome icons from here “https://fontawesome.com/v5/search”.

 

FA ICON NAME

ICON IMAGE

TEAMCONNECT DEFAULT

fa-calculator

Account

fa-calendar

Appointment

fa-user

Contact

fa-file

Document

fa-receipt

Expense

fa-file-invoice

Invoice

fa-clipboard-check

Task

fa-briefcase

Generic Default

fa-address-card

 

fa-alarm-clock

 

fa-archive

 

fa-business-time

 

fa-cabinet-filing

 

fa-clipboard-list

 

fa-comment-lines

 

fa-balance-scale

 

fa-boxes

 

fa-car-side

 

fa-cash-register

 

fa-chart-pie

 

fa-clock

 

fa-database

 

fa-envelope

 

fa-file-chart-line

 

fa-file-image

 

fa-folder

 

fa-globe

 

fa-hospital

 

fa-lightbulb

 

fa-lock

 

fa-phone

 

fa-plane

 

fa-question-circle

 

fa-shapes

 

fa-shield

 

fa-sitemap

 

fa-star

 

fa-taco

 

fa-truck

 

fa-university

 

fa-unicorn

 

fa-usd-circle

 

fa-users

 

fa-video

 

fa-warehouse

 

fa-watch

 

fa-wrench