Display in-app filter choices as chips

[gannonatwork]

Is there any way to display in-app filter choices as chips instead of checkboxes? Similar to how we have the styling option to display Choice component items. Looked under feature requests and haven’t seen anything requested yet.

I’ve searched the community and everything I’ve found so far related to filtering with chips has to do with the previous workaround before Glide deployed native in-app filtering. Thx

[Andrew_Davies]

Hi

I am afraid not. The in-app filter is very good, and a very quick way of adding filtering - but a lot of people use a choice component (displayed as a chip), and user specific columns to deploy filtering.

Takes more work, but is more customisable

[Himaladin]

Isn’t using checkboxes simpler and more elegant? Why do you prefer the pill shape?

[gannonatwork]

Hey, @Andrew_Davies. I appreciate you weighing in on this. I do like to stick to native components on something like this to reduce maintenance; I’ll just keep my fingers crossed that future enhancements might show up in the future.

[gannonatwork]

I agree, the checkboxes are simple and do the job. Our testing has shown users prefer the chips in our form screens and have commented that it’s faster/easier to make selections.

That got us to thinking the use of chips/pills in the filtering component, especially where we have several categories of multi-layered filtering to help users winnow down collections.

[Andrew_Davies]

No worries

That is a sensible approach! I’ve spent hours making things work in a very specific way - only to find GLide adds the feature natively!

[Himaladin]

The following code may not be perfect, especially as it could interfere with other components on the same screen.

/* Hide the original checkbox */
#root:has(.pill-filter)  #app-modal-root label > div, #root:has(.allCollection)  #overlay-scroll label > div {
  display: none;
}
/* Style for the pill-shaped element */
#root:has(.pill-filter) 
.children-container > div{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
/* Style for the pill-shaped element */
#root:has(.pill-filter) .children-container label {
  display: inline-flex;
  align-items: center;  
  background-color: rgba(100,100,100,0.3);
  border-radius: 20px;
  padding: 5px 10px; 
  margin: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease; 
}

/* Change background color on hover */
#root:has(.pill-filter) .children-container label:hover {
  background-color: rgba(100,100,100,0.5);
}

#root:has(.pill-filter) .children-container label:has(input:checked) {
  background-color: var(--gv-accent);
  color: #fff;
}

[Himaladin]

Revision:
Use the Title or Group Header Name to isolate the filter from other components, for example, “Names” in this case. So, it’s not about using the class name.

/* Hide the original checkbox */
#root:has([data-testid="filter-group-header-Names"]) #app-modal-root label > div,
#root:has([data-testid="filter-group-header-Names"]) #overlay-scroll label > div {
  display: none;
}

/* Style for the element */
#root:has([data-testid="filter-group-header-Names"]) .children-container > div {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

/* Style for the element */
#root:has([data-testid="filter-group-header-Names"]) .children-container label {
  display: inline-flex;
  align-items: center;  
  background-color: rgba(100,100,100,0.3);
  border-radius: 20px;
  padding: 5px 10px; 
  margin: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease; 
}

/* Change background color on hover */
#root:has([data-testid="filter-group-header-Names"]) .children-container label:hover {
  background-color: rgba(100,100,100,0.5);
}

#root:has([data-testid="filter-group-header-Names"]) .children-container label:has(input:checked) {
  background-color: var(--gv-accent);
  color: #fff;
}