Insites Docs Web Components V1Data EntryFilter Item

Filter Item

Last updated on August 02, 2024.

Element: <ins-filter-item>

Displays dropdown items of ins-filter.

Complete Example

Code Snippet

<ins-filter with-date-filter date-title="Date Period">
  <ins-filter-item 
    name="Operating System" 
    options='["Windows", "macOS", "Linux"]'>
  </ins-filter-item>
</ins-filter>
Direct Set Data

Code Snippet

<ins-filter>
  <ins-filter-item id="directSetDataFilterItem"></ins-filter-item>
</ins-filter>
<script>
  var filter = document.getElementById('directSetDataFilterItem');
  filter.addEventListener('didLoad', function(e) {
    var options = ["CEO", "Manager"];
    filter.name = 'Position';
    filter.options = options;
  });
</script>
Default State

Code Snippet

<ins-filter>
  <ins-filter-item></ins-filter-item>
</ins-filter>
Static Data Source

Code Snippet

<ins-filter>
  <ins-filter-item
    name="Operating System"
    options='["Windows", "macOS", "Linux"]'>
  </ins-filter-item>
</ins-filter>
Events - Static Data Source

Code Snippet

<ins-filter>
  <ins-filter-item 
    name="Operating System" 
    id="onFilter" 
    options='["Windows", "macOS", "Linux"]'>
  </ins-filter-item>
</ins-filter>
<script>
  const onFilter = document.getElementById('onFilter')
  onFilter.addEventListener('onFilter', event => {
    console.log(event.detail.name);
    console.log(event.detail.option);
    alert("Hello! I am an alert box!!");
  });
</script>

 

Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
name string "Category Label" any Defines name of filter items
options string/array ["Category 1", "Category 2", "Category 3"] any Defines item options
selected string any any Defines selected option

 

Events

 

EVENT OBJECT DESCRIPTION
onFilter stateFrom, stateTo Execute a script when a filter item has been selected

 

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.