Introduction

There are two types of filters in Arrigo. Passive filters, found in Alarm status views, user log, history lists and such, are not possible to configure. Dynamic filters, however, are a combination of a browserbased filter object, and the cabability of use context object and server side functions to gain dynamic complex filters.

Note

Dynamic filters are available in Arrigo Local Charts and Arrigo Local Reports only. The Filters attribute are accessable through the Arrigo Generic SVG Tool and Arrigo Chart Tool.

The filter attribute is a Javascript callback attribute. Its purpose is to serve a filter object to the view. The filter attribute code is executed once.

Filter execution

graph LR
  A[Page Load] --> B[Execute filter code once];
  B -->C[Return initial filter object];
  C-->D[Render initial filter panel];

Each page load, the above sequence is followed for filter attribute code. The result from the filter code is used as the initial filter object which is set as current filter object and its contents renders in filter panel.

Event code

Each time a filter item interaction is done (A button press, toggle switch, select box change), that items OnChanged or OnClicked function is triggered. The function takes one parameter, the current filter object. This means that the item, and its eventcode can alter the current filter object. Each time the eventcode is executed completely, the current filter object is used as source object and a complete rerender of the filter panel are made.

graph LR
  A[Item change]-->B[Item value changed];
  B--> C[Event code executed];

  C-->D[Current filter object altered];

  D-->E[Rerender of filter panel];
  E-->A;

Tip

The current filter object is reread completely each filter change, wich means that new filter items can be added, or existing item can be removed by altering the current filter object.

Filter code layout

The filter attribute should be devided in a couple of sections to ease the readability:

Note

The last statement executed in filter code MUST be the return of the filter object array.

//First section: Initial ssf calls, constants and helper functions
const INITIAL_RESOLUTION = '%INITIAL_RESOLUTION%';
const filterConfig = await context.call('.getInitialValues');

//Second section: Helper functions, common functions. 
async function resetDates(){
  const fromDate = await context.setfromDate(context.getNow(), '-1 w');
  await context.setToDate(fromDate, '1 m');
}

//The filter element array with its configuration
return [
  {
    type:'Date',
    name:'datePicker', 
    title: filterConfig.date.title, 
    resolution: INITIAL_RESOLUTION, 
    visible: filterConfig.date.visible,
    onChanged: async function (currentConfig){
        const thisElement = currentConfig[0];
        await context.setFromDate(thisElement.value);
    }
  },
  {
    type: 'Button',
    name: 'rstBtn', 
    title: 'Reset', 
    onClicked: async function(currentConfig){
      await resetDates();
    }
  }

]

Tip

If macros are used in attribute, put them together and use constants in code instead. It makes the code cleaner and more easy to read.