Category Select Component
· 2 min read
The category select component displays a navigation or tree structure in drop down boxes.
- the first dropdown lists all entry from level 0
- when the user select an entry in the first dropdown, a second dropdown apears which contains all childs of the selected
- the siblings of the first dropdown keep visible
advantages
- the tree can have a lot of elements but keeps small
- for each level, just one drop down box
API
-
in the the API the data is returned as a facet
-
the id starts with the configured id: myCategory
-
followed by the Suffix Tree
-
and the number of the level
-
myCategoryTree0
-
myCategoryTree1
-
myCategoryTree2
-
when the user select the entry in the first dropdown the filter of this entry must be used as a filter in the request
-
the QSC automatically returns the next level
|--> Kunden
| |--> Buchhaltung
| | |--> Konto
| | |--> Service
| | |--> Kontakte
| | |--> Kündigung
| |--> Konzerne
| |--> SMB
|--> Vertrieb
|--> Marketing
{
"facets": [
{
"name": "myCategory",
"id": "myCategoryTree0",
"type": "categorySelect",
"filterName": "myCategoryTree0",
"count": 3,
"resultCount": 67,
"values": [
{
"value": "Kunden",
"count": 63,
"filter": "myCategoryTree0=123456%7C-%7C2%7C-%7CKunden"
},
{
"value": "Vertrieb",
"count": 2,
"filter": "myCategoryTree0=211022%7C-%7C1%7C-%7CVertrieb"
},
{
"value": "Marketing",
"count": 2,
"filter": "myCategoryTree0=255044%7C-%7C3%7C-%7CMarketing"
}
]
},
{
"name": "myCategory",
"id": "myCategoryTree1",
"type": "categorySelect",
"filterName": "myCategoryTree1",
"count": 3,
"resultCount": 18,
"values": [
{
"value": "Buchhaltung",
"count": 10,
"filter": "myCategoryTree1=123456%7C-%7C2%7C-%7CKunden%7C___%7C789012%7C-%7C14%7C-%7CBuchhaltung"
},
{
"value": "Konzerne",
"count": 4,
"filter": "myCategoryTree1=123456%7C-%7C2%7C-%7CKunden%7C___%7C132277%7C-%7C8%7C-%7CKonzerne"
},
{
"value": "SMB",
"count": 4,
"filter": "myCategoryTree1=123456%7C-%7C2%7C-%7CKunden%7C___%7C732606%7C-%7C12%7C-%7CSMB"
}
]
},
{
"name": "myCategory",
"id": "myCategoryTree2",
"type": "categorySelect",
"filterName": "myCategoryTree2",
"count": 4,
"resultCount": 10,
"values": [
{
"value": "Konto",
"count": 4,
"filter": "myCategoryTree2=123456%7C-%7C2%7C-%7CKunden%7C___%7C789012%7C-%7C14%7C-%7CBuchhaltung%7C___%7C237126%7C-%7C2%7C-%7CKonto"
},
{
"value": "Service",
"count": 2,
"filter": "myCategoryTree2=123456%7C-%7C2%7C-%7CKunden%7C___%7C789012%7C-%7C14%7C-%7CBuchhaltung%7C___%7C244122%7C-%7C0%7C-%7CService"
},
{
"value": "Kontakte",
"count": 2,
"filter": "myCategoryTree2=123456%7C-%7C2%7C-%7CKunden%7C___%7C789012%7C-%7C14%7C-%7CBuchhaltung%7C___%7C937264%7C-%7C1%7C-%7CKontakte"
},
{
"value": "Kündigung",
"count": 2,
"filter": "myCategoryTree2=123456%7C-%7C2%7C-%7CKunden%7C___%7C789012%7C-%7C14%7C-%7CBuchhaltung%7C___%7C837440%7C-%7C4%7C-%7CK%C3%BCndigung"
}
]
}
]
}
