Filter Gallery/Data Grid 2 using labels

0
I’m using the label selector widget to organize objects. I have a gallery widget that displays a list of those objects, and I would like to be able to filter the list by selecting a label to only show the objects that are associated with that label. Is there a way to do this?   I found a page which has a solution using the original data grid widget, but I haven’t found a way to apply that solution to the gallery/data grid 2 widget. Here’s the link: https://www.mendix.com/blog/speeding-information-retrieval-with-tags/
asked
1 answers
6

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.

answered