Hello! I understand from the Freshworks support team that it is possible to enable sub-categories in the support portal for end users. They provided the notes and code below but weren’t 100% clear on where the code should be added in the Portal Designer. I’m hoping someone here has come across this and can point me in the right direction. Thanks in advance!
To achieve subcategory classifications in the service catalog category list page in the new portal, please add the following code in the head layout of the portal customization.
Steps to create a sub-category on the admin side:
Go to Service Catalog from the Admin Home
For categories with subcategories, use a splitter. For eg, to achieve, “Hardware” as parent category and “Laptops”, “Desktops”, “Printers” as subcategories, you need to have the category names configured like
Hardware: Laptops
Hardware: Desktops
Hardware: Printers
The separator (
can be configured as any special characters in the code. You can also have them as “Hardware | Laptops” or “Hardware > Laptops”
Advantages:
You can create any number of nested subcategories like “Hardware: Laptops: Dell”, “Hardware: Laptops: Microsoft”, “Hardware: Laptops: Dell: Inspiron”. But please advised not to create more than two subcategories for better UI
Admin or agents can rename, add, delete any categories or subcategories at any time without making any code changes in the customization.
Head:
JavaScript
Stylesheet:
#catalog-list-page #catalog-list-categories #categories-list ul.sub-category {
margin-left: 12px;
padding-left: 12px;
display: none;
}
#catalog-list-page #catalog-list-categories #categories-list li.active > ul.sub-category {
display: block;
}
#layout-container #catalog-list-page #catalog-list-categories #categories-list li.active {
background: none
}
#layout-container #catalog-list-page #catalog-list-categories #categories-list li.active a{
color: inherit;
font-weight: inherit;
font-size: inherit;
background-color: inherit;
}
#layout-container #catalog-list-page #catalog-list-categories #categories-list li.active > a {
color: #2C5CC5;
font-size: 16px;
font-weight: 600;
background-color: #F5F7F9;
position: relative;
}
#categories-list ul.sub-category > li {
list-style: none;
}
#catalog-list-page #catalog-list-categories #categories-list li.active > ul.sub-category {
display: block;
overflow-y: hidden
}
#categories-list ul.sub-category .icon {
position: absolute;
left: -15px;
top: -25px;
height: 50px;
width: 20px;
background-repeat: no-repeat;
background-position: center;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAeCAQAAAClQKc1AAAAE0lEQVQYV2M4858BAUY59OQgIAA3nj7C66R89wAAAABJRU5ErkJggg==);
background-size: 10px;
}
/* Sub category List items */
#list-category span.ficon-arrow-right {
margin: 0 8px;
}
.sub-category-container {
flex: 100%;
padding-left: 12px;
}
.list-items-subcategory {
display: flex;
flex-flow: row wrap;
}
#catalog-list-page #catalog-list-container #catalog-list-items #list-items.parent-list > a {
display: none;
}