Custom Elements and Locations

The platform supports the addition of various UI elements, including buttons (generic, link, and dropdown) and panels (generic, sidebar, and tab). These elements can be incorporated into specific sections of the user interface in the Customers, Inbox, Orders, Projects, Reports, and Vendors areas.

Section View Location key Supported element types Default on-render selector keys Notes
Customers Customers list customers-list-tabpanel customers-list-tabpanel location tab
Inbox Tasks list tasks-list-tabpanel tasks-list-tabpanel location tab
New tasks list new-tasks-list-sidebar new-tasks-list-sidebar location sidebarBox inboxActiveTab, selectedNewTasks
new-tasks-list-toolbar new-tasks-list-toolbar location button inboxActiveTab, newTaskPreview
Active tasks list active-tasks-list-toolbar active-tasks-list-toolbar location button inboxActiveTab, selectedActiveTasks
active-tasks-list-sidebar active-tasks-list-sidebar location sidebarBox inboxActiveTab, activeTaskPreview
Completed tasks list completed-tasks-list-toolbar >completed-tasks-list-toolbar location button inboxActiveTab, selectedCompletedTasks
completed-tasks-list-sidebar completed-tasks-list-sidebar location sidebarBox inboxActiveTab, completedTaskPreview
Task task-toolbar task-toolbar location button taskActiveTab, task
task-tabpanel task-tabpanel location tab taskActiveTab, task
task-sidebar task-sidebar location sidebarBox taskActiveTab, task
task-details-toolbar task-details-toolbar location button taskActiveTab, task
task-details-main task-details-main location panel taskActiveTab, task
task-files-toolbar task-files-toolbar location button taskActiveTab, task
Orders Orders list orders-list-tabpanel orders-list-tabpanel location tab
Projects Projects list projects-list-tabpanel projects-list-tabpanel location tab
projects-list-toolbar projects-list-toolbar location button selectedProjects
project-details-dashboard-sidebar * project-details-dashboard-sidebar location sidebarBox projectDetailsActiveTab, projectDetails element visible in two views
Project project-details-toolbar project-details-toolbar location button projectDetailsActiveTab, projectDetails
project-details-tabpanel project-details-tabpanel location tab projectDetailsActiveTab, projectDetails
project-details-dashboard-toolbar project-details-dashboard-toolbar location button projectDetailsActiveTab, projectDetails
project-details-dashboard-main project-details-dashboard-main location panel projectDetailsActiveTab, projectDetails
project-details-dashboard-sidebar * project-details-dashboard-sidebar location sidebarBox projectDetailsActiveTab, projectDetails element visible in two views
project-details-stages-toolbar project-details-stages-toolbar location button projectDetailsActiveTab, projectDetails, projectStages
project-details-files-toolbar project-details-files-toolbar location button projectDetailsActiveTab, projectDetails, projectFiles
project-details-task-history-toolbar project-details-task-history-toolbar location button projectDetailsActiveTab, projectDetails, projectTaskHistory
project-details-task-history-sidebar project-details-task-history-sidebar location sidebarBox projectDetailsActiveTab, projectDetails, projectTaskHistory
Reports Reports list reports-list-tabpanel reports-list-tabpanel location tab
Vendors Vendors list vendors-list-tabpanel vendors-list-tabpanel location tab

* The sidebarBox element targeting the project-details-dashboard-sidebar location key is also displayed in the Projects list view when a project in the list is selected.