Insites Docs Web Components V1Data EntryFilters

Filters

Last updated on August 02, 2024.

Element: <ins-filter>

Complete Example

Code Snippet

<ins-filter with-date-filter date-title="Date Period"></ins-filter>
Default State

Code Snippet

<ins-filter></ins-filter>
Direct Set Data

Code Snippet

<ins-filter id="directDataSourceFilter"></ins-filter>

<script>
    // Update `withDataFilter`, `defaultData` and `dateTitle` attribute of the component
    var filter = document.getElementById('directDataSourceFilter');
    filter.withDateFilter = true;
    filter.dateTitle = 'Direct Set Value';
    filter.dateFrom = '2018-08-04';
    filter.dateTo = '2018-08-31';
</script>
Static Data Source

Code Snippet

<ins-filter with-date-filter
  date-title="Custom Date Filter Title"
  default-date="Last Year">
</ins-filter>
Events - onFilterApply

Code Snippet

<ins-filter id="date-filter" with-date-filter date-from="05-26-2018" date-to="05-27-2018"></ins-filter>
<script>
  const onFilterApply = document.getElementById('date-filter')
  onFilterApply.addEventListener('onFilterApply', event => {
    console.log(event.detail["Date Period"]);
    console.log(event.detail["Date Period"].from);
    console.log(event.detail["Date Period"].to);
    alert("Date From: " + event.detail["Date Period"].from + " Date to: " + event.detail["Date Period"].to);
  });
</script>

 

Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
with-date-filter boolean false true, false Displays date filter
date-title any "Date Period" any Displays date filter title
default-date string "" any Displays default date displayed
date-from string "" any Displays starting date of date filter
date-to string "" any Displays end date of date filter

 

Events

 

EVENT OBJECT DESCRIPTION
onFilterApply stateFrom, stateTo Execute a script when a date filter 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.