Save and apply filters on an Alarm Table

🟡 Intermediate

alarm dashboard collections scripts

osp-alarms osp-web osp-scripts osp-collections

This example aims to demonstrate how you could use a collection to store the current filters of an Alarm Table in order to allow the user to use them to quickly filter a table. This could be useful if you have users that tend to redo the same filters on a table everyday. In this example, every filter saved in the collection is available for every user of the platform, but you could expand on this by using collections rights to limit the access of each user to only the ones they created or by any other condition.

git checkout origin/osp-alarms-configuration .
git checkout origin/osp-web-configuration .
git checkout origin/osp-scripts-configuration .
git checkout origin/osp-collections-configuration .
git checkout origin/example-dashboard-alarm-table-copy-filters .

Steps

1. Define the filters collection

The filters collections is the one that will contain all the saved filters from any users. We need:

• name: Name to identify the filter

• filters: copy of the filters from the table.

The filters must match what the alarm table produces. Therefore, filters is declarer as an array of objects with:

• columnName: name of the table column

• operation: operation of the filter (equal, contains, less than, …)

• value: value of the filter

root/alarm_copy_filters/collections/filters/schema.ospp

{
    "schema": {
        "type": "object",
        "properties": {
            "name": {
                "type": "string"
            },
            "filters": {
                "type": "array",
                "items": {
                    "type": "object",
                    "properties": {
                        "columnName": {
                            "type": "string"
                        },
                        "operation": {
                            "type": "string"
                        },
                        "value": {
                            "oneOf": [
                                {
                                    "type": [
                                        "string",
                                        "number",
                                        "boolean"
                                    ]
                                },
                                {
                                    "type": "array",
                                    "items": {
                                        "type": [
                                            "string",
                                            "number",
                                            "boolean"
                                        ]
                                    }
                                }
                            ]
                        }
                    }
                }
            }
        }
    },
    "uniqueFields": [
        "name"
    ],
    "filters": [
        {
            "id": "all",
            "name": "All"
        }
    ]
}

We will also make a dashboard with a Collection Table in order to delete or edit the filters. We will define a form for this collection with a Json render to easily display the filters. For the delete menu, you can simply follow the Add a delete menu to a CollectionTable example.

root/alarm_copy_filters/form/filters/form.web

{
    "moduleId": [
        "modules.web.web-1"
    ],
    "name": "Alarms filters",
    "description": "Alarms filters",
    "schema": "root.alarm_copy_filters.collections.filters",
    "ui": {
        "type": "VerticalLayout",
        "elements": [
            {
                "type": "Group",
                "elements": [
                    {
                        "type": "Control",
                        "scope": "#/properties/name"
                    }
                ]
            },
            {
                "type": "Group",
                "label": "Filtres",
                "elements": [
                    {
                        "type": "Json",
                        "scope": "#/properties/filters"
                    }
                ]
            }
        ]
    },
    "initialValue": {
        "filters": []
    },
    "submit": {
        "type": "Deferred",
        "destination": "Request"
    }
}

2. Define the menu/script to save into the collection

The menu will run a script to insert the current filters of the table into the collection. To do so, we need to define as inputs:

• name: retrieved from a prompt that ask the user to set a name

• filters: retrieved automatically from the table context

root/alarm_copy_filters/menus/save/menu.web

        {
            "label": "Save filters",
            "icon": "save",
            "context": [
                {
                    "type": "AlarmTable",
                    "action": "root.alarm_copy_filters.actions.run_script",
                    "condition": "${columnFilter}.length > 0",
                    "scopes": [
                        "Toolbar"
                    ],
                    "input": {
                        "scriptId": "root.alarm_copy_filters.scripts.save",
                        "name": {
                            "prompt": {
                                "type": "INPUT",
                                "labels": {
                                    "title": "Pick a name",
                                    "message": "Choose a name for these filters",
                                    "save": "Confirm",
                                    "cancel": "Cancel"
                                }
                            }
                        },
                        "columnFilters": {
                            "extract": "columnFilter",
                            "expression": "${extraction}[0]"
                        }
                    },
                    "output": [
                        {
                            "operation": "snackbar",
                            "input": {
                                "message": {
                                    "extract": "result.message",
                                    "as": "string"
                                },
                                "variant": {
                                    "extract": "result.success",
                                    "expression": "${extraction}[0] ? 'success' : 'error'"
                                }
                            }
                        }
                    ]
                }
            ]
        },

This run a script in which we simply insert into the collection if every input is valid.

root/alarm_copy_filters/scripts/save/save_filters.js

function main() {

    const parameter = trigger.parameters[0];
    const name = parameter.name;
    const columnFilters = parameter.columnFilters;

    if (name && columnFilters && columnFilters.length > 0) {
        const result = collections.insert("root.alarm_copy_filters.collections.filters", {
            name: name,
            filters: [...columnFilters]
        })

        if (result.success) {
            execution.reportResult(`Filter saved - ${name}`, {})
        } else {
            execution.reportFailure("Error while saving filters")
        }
    }
}

main()

3. Define the menu to apply a filter from the collection

For this menu, we will need a prompt to pick a filter from the collection. To achieve this, we have to use a form as a prompt.

To create the form, we first need a schema for it. We only need one property, which references the filters collection.

root/alarm_copy_filters/form/filters-picker/schema.ospp

{
    "schema": {
        "type": "object",
        "properties": {
            "collection": {
                "$ref": "root.alarm_copy_filters.collections.filters"
            }
        }
    }
}

Then, the form need a Collection component to pick from the filter collection.

root/alarm_copy_filters/form/filters-picker/form.web

{
    "moduleId": ["modules.web.web-1"],
    "description": "Pick alarm filter",
    "name": "Pick alarm filter",
    "schema": "root.alarm_copy_filters.form.filters-picker",
    "ui": {
       "type": "VerticalLayout",
        "elements": [
            {
                "type": "Collection",
                "scope": "#/properties/collection",
                "label": "Filtre",
                "options": {
                    "schema": "root.alarm_copy_filters.collections.filters",
                    "format": "${name}",
                    "as": "object"
                }
            }
        ]
    }
}

4. Use the menus on any Alarm Table

Add these menus to any Alarm Table and you should be able to save the current filters, if there are any currently set on the table, and any time later re-apply these same filters with a single-click.

Additional notes

It’s noteworthy that any filter saved into the collection could then be use on any table. We could implement the same functionality for a Collection Table as well, as they both expose the necessary values from their context.