I ended up solving this using a styled gallery widget with some extra logic. Here’s the result:
Here’s how it looks in mendix:
Here’s the domain model:
Here are the properties of the gallery widget that is being used as the tag filter. Not pictured is that it sorts by the label attribute, and buttons call ACT_Tag_SetActive on click:
Here’s ACT_Tag_SetActive:
Here’s ACT_Tag_SetInactive:
Here’s the data source flow for the gallery tag filtering widget, DS_GetSortedTagList:
Here’s SUB_RefreshList. DS_SortedNoteList is the data source flow for note-displaying gallery widget:
Here’s DS_SortedNoteList:
I also added the following CSS class to the tag filtering gallery widget:
.tag-selector {
display: flex;
::-webkit-scrollbar {
height: 6px;
background: #00000000;
}
::-webkit-scrollbar-thumb {
background-color: #cccccc;
border-radius: 20px;
transition: all 0.2s ease-in-out;
}
::-webkit-scrollbar-thumb:hover {
background-color: #999999;
border-radius: 20px;
transition: all 0.2s ease-in-out;
}
.widget-gallery-filter {
max-width: 100px;
margin-right: 8px;
}
.widget-gallery-items {
height: 38px;
display: flex;
overflow-x: auto;
}
.widget-gallery-item {
.btn {
padding: 5px 8px;
border-radius: 999px;
}
}
.widget-gallery-pagination {
display: none;
}
}
Hope this helps anyone dealing with the same issue as I was.