A complete example

This is a complete example of above described filter element types. Copy the code to Filter attribute and start working with the contents.

//Bottom of code shows exports and helper functions. 

return [
  {
    type: "Select",
    name: "selectElement",
    title: "Select Element",
    userDescription: "The select element",
    enabled: true,
    visible: true,
    value: 'one',
    onChanged: function (currentConfig) {
        console.log(currentConfig);
    },
    data: [
      {
        title: "Item One",
        value: "one",
        visible: true,
        enabled: true,
      },
      {
        title: "Item Two",
        value: "two",
        visible: true,
        enabled: true,
      },
      {
        title: "Item Three",
        value: "three",
        visible: true,
        enabled: true,
      },
    ],
  },
{
    type: "Date",
    name: "dateElement",
    title:"Date Element", 
    userDescription:"Date element tooltip", 
    resolution: 'day',
    value: context.getNow(),
    onChanged:function(currentConfig){
      console.log(currentConfig);
   }
},
  {
    type: "Radio",
    name: "radioButtons",
    title: "Radio buttons",
    userDescription: "Radio buttons tooltip",
    enabled: true,
    visible: true,
    multi: false,
    value: ['one'],
    onChanged: function (currentConfig) {
      console.log(currentConfig)
    },
    data: [
      {
        title: "Item One",
        value: "one",
        visible: true,
        enabled: true,
      },
      {
        title: "Item Two",
        value: "two",
        visible: true,
        enabled: true,
      },
      {
        title: "Item Three",
        value: "three",
        visible: true,
        enabled: true,
      },
    ],
  },
  {
    type: 'Button', 
    name: 'buttonElement', 
    text: 'Button text', 
    visible: true,
    enabled: true,
    onClicked: function(currentCOnfig){
        console.log(currentCOnfig);
        alert("click!");
    },
 },
 {
    type: 'Toggler', 
    name: 'togglerElement', 

    title: 'Toggler title', 
    visible:true,
    enabled:true,
    onChanged:function(cfg){
        console.log(cfg);
        alert("toggle click");
    }
   },
   {
    type: 'Text', 
    name: 'textElement', 
    title: 'Text Title', 
    enabled: true, 
    visible:  true, 
    onChanged:async function(cfg){
        console.log(cfg);
    }
    }
];

Tip

If you open a web browser and press F12, under snippets, you can add a new snippet and press Ctrl+Enter to run the code to avoid annoying syntax errors!