Menu Filter Structuring

A very useful element in an app is the menu filter, which enables fast transition between multiple devices in the same app. This means that with a simple selection in a list you can change the visualization of dashboards and a screen:

When should I manually edit a menu filter?

When the business context, which you want to implement using the thingable! platform, is already mature enough to arrive at a definitive filter structure, it is recommended to make use of a filter template in conjunction with the Application Configurator. This way you can automatically add new devices to an app. For more details see our dedicated App Configurator(Application Configurator) material.

When the business context is still in the prototype phase, or not mature enough, it is recommended to manually edit the menu filter. This document provides the details you need to make edits to a filter yourself.

How does the menu filter work?

A menu is basically a list of attributes of a device. These attributes are available on the current application screen after each selection. And they can be passed on as parameterization for several on-screen elements such as dashboards and graphics. The following figure illustrates this process:Figure 2: Menu screen

The following is a code of a basic menu filter structure. Copy this code into a preferred editor and compare the title and level objects with figure 3.

{
  "title": "Unidades",
  "items": [
    {
      "title": "Dispositivo 1",
      "items": {
        "alias_tag1": "9997_AI_0001",
        "alias_tag2": "9997_AI_0002",
        "alias_tag3": "9997_AI_0003",
        "alias_graph1": {
          "group": {
            "useRealTime": false,
            "useAutoUpdate": true,
            "intervalAutoUpdate": 300000,
            "interval": 3600000,
            "day": "line",
            "month": "column",
            "year": "column"
          },
          "series": [
            {
              "tag": "9997_AI_0001",
              "alias": "Temperatura",
              "symbol": "ºC",
              "titleColor": "#000000",
              "labelColor": "#000000",
              "group": {
                "day": {
                  "type": "normal",
                  "defaultClick": true
                },
                "month": {
                  "type": "avg",
                  "extract": "day"
                },
                "year": {
                  "type": "avg",
                  "extract": "month"
                }
              }
            },
            {
              "tag": "9997_AI_0002",
              "alias": "Umidade",
              "symbol": "%",
              "titleColor": "#0934d4",
              "labelColor": "#0934d4ff",
              "group": {
                "day": {
                  "type": "normal",
                  "defaultClick": true
                },
                "month": {
                  "type": "avg",
                  "extract": "day"
                },
                "year": {
                  "type": "avg",
                  "extract": "month"
                }
              }
            }
          ]
        },
        "alias_graph2": {
          "group": {
            "useRealTime": false,
            "useAutoUpdate": true,
            "intervalAutoUpdate": 300000,
            "interval": 3600000,
            "day": "line",
            "month": "column",
            "year": "column"
          },
          "series": [
            {
              "tag": "9997_AI_0003",
              "alias": "Pressão",
              "symbol": "bar",
              "titleColor": "#f3f900",
              "labelColor": "#f3f900ff",
              "group": {
                "day": {
                  "type": "normal",
                  "defaultClick": true
                },
                "month": {
                  "type": "avg",
                  "extract": "day"
                },
                "year": {
                  "type": "avg",
                  "extract": "month"
                }
              }
            },
            {
              "tag": "9997_AI_0002",
              "alias": "Umidade",
              "symbol": "%",
              "titleColor": "#0934d4",
              "labelColor": "#0934d4ff",
              "group": {
                "day": {
                  "type": "normal",
                  "defaultClick": true
                },
                "month": {
                  "type": "avg",
                  "extract": "day"
                },
                "year": {
                  "type": "avg",
                  "extract": "month"
                }
              }
            }
          ]
        },
        "device": 9997
      },
      "device": 9997,
      "level": 1
    },
    {
  "title": "Dispositivo 2",
  "items": {
    "alias_tag1": "9998_AI_0001",
    "alias_tag2": "9998_AI_0002",
    "alias_tag3": "9998_AI_0003",
    "alias_graph1": {
      "group": {
        "useRealTime": false,
        "useAutoUpdate": true,
        "intervalAutoUpdate": 300000,
        "interval": 3600000,
        "day": "line",
        "month": "column",
        "year": "column"
      },
      "series": [
        {
          "tag": "9998_AI_0001",
          "alias": "Temperatura",
          "symbol": "ºC",
          "titleColor": "#000000",
          "labelColor": "#000000",
          "group": {
            "day": {
              "type": "normal",
              "defaultClick": true
            },
            "month": {
              "type": "avg",
              "extract": "day"
            },
            "year": {
              "type": "avg",
              "extract": "month"
            }
          }
        },
        {
          "tag": "9998_AI_0002",
          "alias": "Umidade",
          "symbol": "%",
          "titleColor": "#0934d4",
          "labelColor": "#0934d4ff",
          "group": {
            "day": {
              "type": "normal",
              "defaultClick": true
            },
            "month": {
              "type": "avg",
              "extract": "day"
            },
            "year": {
              "type": "avg",
              "extract": "month"
            }
          }
        }
      ]
    },
    "alias_graph2": {
      "group": {
        "useRealTime": false,
        "useAutoUpdate": true,
        "intervalAutoUpdate": 300000,
        "interval": 3600000,
        "day": "line",
        "month": "column",
        "year": "column"
      },
      "series": [
        {
          "tag": "9998_AI_0003",
          "alias": "Pressão",
          "symbol": "bar",
          "titleColor": "#f3f900",
          "labelColor": "#f3f900ff",
          "group": {
            "day": {
              "type": "normal",
              "defaultClick": true
            },
            "month": {
              "type": "avg",
              "extract": "day"
            },
            "year": {
              "type": "avg",
              "extract": "month"
            }
          }
        },
        {
          "tag": "9998_AI_0002",
          "alias": "Umidade",
          "symbol": "%",
          "titleColor": "#0934d4",
          "labelColor": "#0934d4ff",
          "group": {
            "day": {
              "type": "normal",
              "defaultClick": true
            },
            "month": {
              "type": "avg",
              "extract": "day"
            },
            "year": {
              "type": "avg",
              "extract": "month"
            }
          }
        }
      ]
    },
    "device": 9998
  },
  "device": 9998,
  "level": 1
},
    {
  "title": "Dispositivo 3",
  "items": {
    "alias_tag1": "9999_AI_0001",
    "alias_tag2": "9999_AI_0002",
    "alias_tag3": "9999_AI_0003",
    "alias_graph1": {
      "group": {
        "useRealTime": false,
        "useAutoUpdate": true,
        "intervalAutoUpdate": 300000,
        "interval": 3600000,
        "day": "line",
        "month": "column",
        "year": "column"
      },
      "series": [
        {
          "tag": "9999_AI_0001",
          "alias": "Temperatura",
          "symbol": "ºC",
          "titleColor": "#000000",
          "labelColor": "#000000",
          "group": {
            "day": {
              "type": "normal",
              "defaultClick": true
            },
            "month": {
              "type": "avg",
              "extract": "day"
            },
            "year": {
              "type": "avg",
              "extract": "month"
            }
          }
        },
        {
          "tag": "9999_AI_0002",
          "alias": "Umidade",
          "symbol": "%",
          "titleColor": "#0934d4",
          "labelColor": "#0934d4ff",
          "group": {
            "day": {
              "type": "normal",
              "defaultClick": true
            },
            "month": {
              "type": "avg",
              "extract": "day"
            },
            "year": {
              "type": "avg",
              "extract": "month"
            }
          }
        }
      ]
    },
    "alias_graph2": {
      "group": {
        "useRealTime": false,
        "useAutoUpdate": true,
        "intervalAutoUpdate": 300000,
        "interval": 3600000,
        "day": "line",
        "month": "column",
        "year": "column"
      },
      "series": [
        {
          "tag": "9999_AI_0003",
          "alias": "Pressão",
          "symbol": "bar",
          "titleColor": "#f3f900",
          "labelColor": "#f3f900ff",
          "group": {
            "day": {
              "type": "normal",
              "defaultClick": true
            },
            "month": {
              "type": "avg",
              "extract": "day"
            },
            "year": {
              "type": "avg",
              "extract": "month"
            }
          }
        },
        {
          "tag": "9999_AI_0002",
          "alias": "Umidade",
          "symbol": "%",
          "titleColor": "#0934d4",
          "labelColor": "#0934d4ff",
          "group": {
            "day": {
              "type": "normal",
              "defaultClick": true
            },
            "month": {
              "type": "avg",
              "extract": "day"
            },
            "year": {
              "type": "avg",
              "extract": "month"
            }
          }
        }
      ]
    },
    "device": 9999
  },
  "device": 9999,
  "level": 1
}
  ],
  "level": 0
}

Figure 3 makes it clear how to organize the listing of devices in the filter array, and the right place to put the desired title of each grouping of information. At level zero, in items, the presence of the title, device (device identification id, present in the first part of the tag of a device) and level (at each sublevel of the filter this number must increase) is mandatory. Other interesting features to be used are the menu sub-filters. They are useful for organizing business units that are part of a larger organization. Example: Filter tags from a list of apartments, which are embedded within a list of condominiums.

Below is the example code used in figure 4:

{
  "title": "Unidades",
  "items": [
    {
      "title": "Dispositivo 1",
      "items": [
        {
          "title": "Dispositivo 1.1",
          "items": {
            "alias_tag1": "9997_AI_0001",
            "alias_tag2": "9997_AI_0002",
            "alias_tag3": "9997_AI_0003",
            "alias_graph1": {
              "group": {
                "useRealTime": false,
                "useAutoUpdate": true,
                "intervalAutoUpdate": 300000,
                "interval": 3600000,
                "day": "line",
                "month": "column",
                "year": "column"
              },
              "series": [
                {
                  "tag": "9997_AI_0001",
                  "alias": "Temperatura",
                  "symbol": "ºC",
                  "titleColor": "#000000",
                  "labelColor": "#000000",
                  "group": {
                    "day": {
                      "type": "normal",
                      "defaultClick": true
                    },
                    "month": {
                      "type": "avg",
                      "extract": "day"
                    },
                    "year": {
                      "type": "avg",
                      "extract": "month"
                    }
                  }
                },
                {
                  "tag": "9997_AI_0002",
                  "alias": "Umidade",
                  "symbol": "%",
                  "titleColor": "#0934d4",
                  "labelColor": "#0934d4ff",
                  "group": {
                    "day": {
                      "type": "normal",
                      "defaultClick": true
                    },
                    "month": {
                      "type": "avg",
                      "extract": "day"
                    },
                    "year": {
                      "type": "avg",
                      "extract": "month"
                    }
                  }
                }
              ]
            },
            "alias_graph2": {
              "group": {
                "useRealTime": false,
                "useAutoUpdate": true,
                "intervalAutoUpdate": 300000,
                "interval": 3600000,
                "day": "line",
                "month": "column",
                "year": "column"
              },
              "series": [
                {
                  "tag": "9997_AI_0003",
                  "alias": "Pressão",
                  "symbol": "bar",
                  "titleColor": "#f3f900",
                  "labelColor": "#f3f900ff",
                  "group": {
                    "day": {
                      "type": "normal",
                      "defaultClick": true
                    },
                    "month": {
                      "type": "avg",
                      "extract": "day"
                    },
                    "year": {
                      "type": "avg",
                      "extract": "month"
                    }
                  }
                },
                {
                  "tag": "9997_AI_0002",
                  "alias": "Umidade",
                  "symbol": "%",
                  "titleColor": "#0934d4",
                  "labelColor": "#0934d4ff",
                  "group": {
                    "day": {
                      "type": "normal",
                      "defaultClick": true
                    },
                    "month": {
                      "type": "avg",
                      "extract": "day"
                    },
                    "year": {
                      "type": "avg",
                      "extract": "month"
                    }
                  }
                }
              ]
            },
            "device": 9997
          },
          "level": 2
        },
        {
          "title": "Dispositivo 1.2",
          "items": {
            "alias_tag1": "9998_AI_0001",
            "alias_tag2": "9998_AI_0002",
            "alias_tag3": "9998_AI_0003",
            "alias_graph1": {
              "group": {
                "useRealTime": false,
                "useAutoUpdate": true,
                "intervalAutoUpdate": 300000,
                "interval": 3600000,
                "day": "line",
                "month": "column",
                "year": "column"
              },
              "series": [
                {
                  "tag": "9998_AI_0001",
                  "alias": "Temperatura",
                  "symbol": "ºC",
                  "titleColor": "#000000",
                  "labelColor": "#000000",
                  "group": {
                    "day": {
                      "type": "normal",
                      "defaultClick": true
                    },
                    "month": {
                      "type": "avg",
                      "extract": "day"
                    },
                    "year": {
                      "type": "avg",
                      "extract": "month"
                    }
                  }
                },
                {
                  "tag": "9998_AI_0002",
                  "alias": "Umidade",
                  "symbol": "%",
                  "titleColor": "#0934d4",
                  "labelColor": "#0934d4ff",
                  "group": {
                    "day": {
                      "type": "normal",
                      "defaultClick": true
                    },
                    "month": {
                      "type": "avg",
                      "extract": "day"
                    },
                    "year": {
                      "type": "avg",
                      "extract": "month"
                    }
                  }
                }
              ]
            },
            "alias_graph2": {
              "group": {
                "useRealTime": false,
                "useAutoUpdate": true,
                "intervalAutoUpdate": 300000,
                "interval": 3600000,
                "day": "line",
                "month": "column",
                "year": "column"
              },
              "series": [
                {
                  "tag": "9998_AI_0003",
                  "alias": "Pressão",
                  "symbol": "bar",
                  "titleColor": "#f3f900",
                  "labelColor": "#f3f900ff",
                  "group": {
                    "day": {
                      "type": "normal",
                      "defaultClick": true
                    },
                    "month": {
                      "type": "avg",
                      "extract": "day"
                    },
                    "year": {
                      "type": "avg",
                      "extract": "month"
                    }
                  }
                },
                {
                  "tag": "9998_AI_0002",
                  "alias": "Umidade",
                  "symbol": "%",
                  "titleColor": "#0934d4",
                  "labelColor": "#0934d4ff",
                  "group": {
                    "day": {
                      "type": "normal",
                      "defaultClick": true
                    },
                    "month": {
                      "type": "avg",
                      "extract": "day"
                    },
                    "year": {
                      "type": "avg",
                      "extract": "month"
                    }
                  }
                }
              ]
            },
            "device": 9998
          },
          "level": 2
        }
      ],
      "level": 1
    }
  ],
  "level": 0
}

How to create a menu with filters?

Up to this point you have all the knowledge you need to create a menu with filters capable of organizing your devices, or business units, more efficiently. But, before creating a filter it is necessary to have the menu itself.

To edit an existing menu, right-click on the menu of interest and navigate to the “Settings” option. If you want to add a new Menu and Submenus (Attention, “Submenu” is different from “subfilter”) respectively navigate to the “Add Menu” or “Add Submenu” options, make the necessary changes and click Save. In both cases the following window will be displayed:

Figure 5 highlights important options that must be selected to make use of menu filters. In “JSON Filter Configuration” the desired json code is added.

Authors: Angelo Guimarães

Luiz Matanta

Last updated