From 12a47c41b305ddabca92d4cf71af73c7bfe3f11c Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Fri, 9 May 2025 10:36:40 +0300
Subject: [PATCH] UI: Updated widget types support unit conversion

---
 .../widget_types/air_quality_index_card.json  |  6 +--
 ...ir_quality_index_card_with_background.json |  6 +--
 .../air_quality_index_chart_card.json         |  8 +--
 ...lity_index_chart_card_with_background.json |  8 +--
 .../system/widget_types/alarms_table.json     |  2 +-
 .../widget_types/asset_admin_table.json       |  2 +-
 .../json/system/widget_types/bar_chart.json   |  8 +--
 .../widget_types/bar_chart_with_labels.json   |  8 +--
 .../data/json/system/widget_types/bars.json   |  4 +-
 .../system/widget_types/battery_level.json    |  4 +-
 .../carbon_monoxide__co__card.json            |  6 +--
 ...on_monoxide__co__card_with_background.json |  6 +--
 .../carbon_monoxide__co__chart_card.json      |  8 +--
 ...oxide__co__chart_card_with_background.json |  8 +--
 .../json/system/widget_types/co2_card.json    |  6 +--
 .../co2_card_with_background.json             |  6 +--
 .../system/widget_types/co2_chart_card.json   |  8 +--
 .../co2_chart_card_with_background.json       |  8 +--
 .../widget_types/device_admin_table.json      |  2 +-
 .../widget_types/digital_horizontal_bar.json  |  6 +--
 .../widget_types/digital_speedometer.json     |  6 +--
 .../widget_types/digital_thermometer.json     |  6 +--
 .../widget_types/digital_vertical_bar.json    |  6 +--
 .../json/system/widget_types/doughnut.json    |  4 +-
 .../system/widget_types/efficiency_card.json  |  2 +-
 .../efficiency_card_with_background.json      |  2 +-
 .../widget_types/efficiency_chart_card.json   |  8 +--
 ...efficiency_chart_card_with_background.json |  8 +--
 .../widget_types/efficiency_progress_bar.json |  6 +--
 ...ficiency_progress_bar_with_background.json |  6 +--
 .../widget_types/efficiency_range_chart.json  |  8 +--
 ...fficiency_range_chart_with_background.json |  8 +--
 .../system/widget_types/entities_table.json   |  2 +-
 .../widget_types/flooding_level_card.json     |  6 +--
 .../flooding_level_card_with_background.json  |  6 +--
 .../flooding_level_chart_card.json            |  8 +--
 ...ding_level_chart_card_with_background.json |  8 +--
 .../flooding_level_progress_bar.json          |  6 +--
 ...ng_level_progress_bar_with_background.json |  6 +--
 .../system/widget_types/flow_rate_card.json   |  2 +-
 .../flow_rate_card_with_background.json       |  2 +-
 .../widget_types/flow_rate_chart_card.json    |  8 +--
 .../flow_rate_chart_card_with_background.json |  8 +--
 .../system/widget_types/flow_rate_gauge.json  |  6 +--
 .../widget_types/flow_rate_progress_bar.json  |  6 +--
 ...low_rate_progress_bar_with_background.json |  6 +--
 .../widget_types/flow_rate_range_chart.json   |  8 +--
 ...flow_rate_range_chart_with_background.json |  8 +--
 .../widget_types/fluid_pressure_card.json     |  2 +-
 .../fluid_pressure_card_with_background.json  |  2 +-
 .../fluid_pressure_chart_card.json            |  8 +--
 ...d_pressure_chart_card_with_background.json |  8 +--
 .../widget_types/fluid_pressure_gauge.json    |  6 +--
 .../fluid_pressure_progress_bar.json          |  6 +--
 ...pressure_progress_bar_with_background.json |  6 +--
 .../fluid_pressure_range_chart.json           |  8 +--
 ..._pressure_range_chart_with_background.json |  8 +--
 .../data/json/system/widget_types/gauge.json  |  6 +--
 .../widget_types/ground_temperature_card.json |  6 +--
 ...ound_temperature_card_with_background.json |  6 +--
 .../ground_temperature_chart_card.json        |  8 +--
 ...emperature_chart_card_with_background.json |  8 +--
 .../horizontal_air_quality_index_card.json    |  6 +--
 ...ir_quality_index_card_with_background.json |  6 +--
 .../system/widget_types/horizontal_bar.json   |  6 +--
 .../horizontal_carbon_monoxide__co__card.json |  6 +--
 ...on_monoxide__co__card_with_background.json |  6 +--
 .../widget_types/horizontal_co2_card.json     |  6 +--
 .../horizontal_co2_card_with_background.json  |  6 +--
 .../widget_types/horizontal_doughnut.json     |  4 +-
 .../horizontal_efficiency_card.json           |  2 +-
 ...ontal_efficiency_card_with_background.json |  2 +-
 .../horizontal_flooding_level_card.json       |  6 +--
 ...l_flooding_level_card_with_background.json |  6 +--
 .../horizontal_flow_rate_card.json            |  2 +-
 ...zontal_flow_rate_card_with_background.json |  2 +-
 .../horizontal_fluid_pressure_card.json       |  2 +-
 ...l_fluid_pressure_card_with_background.json |  2 +-
 .../horizontal_ground_temperature_card.json   |  6 +--
 ...ound_temperature_card_with_background.json |  6 +--
 .../horizontal_humidity_card.json             |  6 +--
 ...izontal_humidity_card_with_background.json |  6 +--
 .../horizontal_illuminance_card.json          |  6 +--
 ...ntal_illuminance_card_with_background.json |  6 +--
 ...l_individual_allergy_index__iai__card.json |  6 +--
 ...ergy_index__iai__card_with_background.json |  6 +--
 .../horizontal_leaf_wetness_card.json         |  6 +--
 ...tal_leaf_wetness_card_with_background.json |  6 +--
 ...orizontal_nitrogen_dioxide__no2__card.json |  6 +--
 ...en_dioxide__no2__card_with_background.json |  6 +--
 .../horizontal_noise_level_card.json          |  6 +--
 ...ntal_noise_level_card_with_background.json |  6 +--
 .../horizontal_ozone__o3__card.json           |  6 +--
 ...ontal_ozone__o3__card_with_background.json |  6 +--
 .../widget_types/horizontal_pm10_card.json    |  6 +--
 .../horizontal_pm10_card_with_background.json |  6 +--
 .../widget_types/horizontal_pm2_5_card.json   |  6 +--
 ...horizontal_pm2_5_card_with_background.json |  6 +--
 .../horizontal_power_consumption_card.json    |  2 +-
 ...ower_consumption_card_with_background.json |  2 +-
 .../horizontal_pressure_card.json             |  6 +--
 ...izontal_pressure_card_with_background.json |  6 +--
 .../horizontal_pump_vibration_card.json       |  2 +-
 ...l_pump_vibration_card_with_background.json |  2 +-
 .../horizontal_radon_level_card.json          |  6 +--
 ...ntal_radon_level_card_with_background.json |  6 +--
 .../horizontal_rainfall_card.json             |  6 +--
 ...izontal_rainfall_card_with_background.json |  6 +--
 .../horizontal_rotational_speed_card.json     |  2 +-
 ...rotational_speed_card_with_background.json |  2 +-
 .../horizontal_snow_depth_card.json           |  6 +--
 ...ontal_snow_depth_card_with_background.json |  6 +--
 .../horizontal_soil_moisture_card.json        |  6 +--
 ...al_soil_moisture_card_with_background.json |  6 +--
 .../horizontal_solar_radiation_card.json      |  6 +--
 ..._solar_radiation_card_with_background.json |  6 +--
 .../horizontal_sulfur_dioxide__so2__card.json |  6 +--
 ...ur_dioxide__so2__card_with_background.json |  6 +--
 .../horizontal_temperature_card.json          |  6 +--
 ...ntal_temperature_card_with_background.json |  6 +--
 .../horizontal_uv_index_card.json             |  6 +--
 ...izontal_uv_index_card_with_background.json |  6 +--
 .../widget_types/horizontal_value_card.json   |  6 +--
 .../horizontal_vibration_card.json            |  6 +--
 ...zontal_vibration_card_with_background.json |  6 +--
 .../horizontal_visibility_card.json           |  6 +--
 ...ontal_visibility_card_with_background.json |  6 +--
 ...ontal_volatile_organic_compounds_card.json |  6 +--
 ...rganic_compounds_card_with_background.json |  6 +--
 .../horizontal_wind_speed_card.json           |  6 +--
 ...ontal_wind_speed_card_with_background.json |  6 +--
 .../system/widget_types/humidity_card.json    |  6 +--
 .../humidity_card_with_background.json        |  6 +--
 .../widget_types/humidity_chart_card.json     |  8 +--
 .../humidity_chart_card_with_background.json  |  8 +--
 .../widget_types/humidity_progress_bar.json   |  6 +--
 ...humidity_progress_bar_with_background.json |  6 +--
 .../system/widget_types/illuminance_card.json |  6 +--
 .../illuminance_card_with_background.json     |  6 +--
 .../widget_types/illuminance_chart_card.json  |  8 +--
 ...lluminance_chart_card_with_background.json |  8 +--
 .../illuminance_progress_bar.json             |  6 +--
 ...uminance_progress_bar_with_background.json |  6 +--
 .../individual_allergy_index__iai__card.json  |  6 +--
 ...ergy_index__iai__card_with_background.json |  6 +--
 ...vidual_allergy_index__iai__chart_card.json |  8 +--
 ...ndex__iai__chart_card_with_background.json |  8 +--
 .../system/widget_types/indoor_co2_card.json  |  6 +--
 .../indoor_co2_card_with_background.json      |  6 +--
 .../widget_types/indoor_co2_chart_card.json   |  8 +--
 ...indoor_co2_chart_card_with_background.json |  8 +--
 .../indoor_horizontal_co2_card.json           |  6 +--
 ...r_horizontal_co2_card_with_background.json |  6 +--
 .../indoor_horizontal_humidity_card.json      |  6 +--
 ...izontal_humidity_card_with_background.json |  6 +--
 .../indoor_horizontal_illuminance_card.json   |  6 +--
 ...ntal_illuminance_card_with_background.json |  6 +--
 .../indoor_horizontal_pm10_card.json          |  6 +--
 ..._horizontal_pm10_card_with_background.json |  6 +--
 .../indoor_horizontal_pm2_5_card.json         |  6 +--
 ...horizontal_pm2_5_card_with_background.json |  6 +--
 .../indoor_horizontal_temperature_card.json   |  6 +--
 ...ntal_temperature_card_with_background.json |  6 +--
 .../widget_types/indoor_humidity_card.json    |  6 +--
 .../indoor_humidity_card_with_background.json |  6 +--
 .../indoor_humidity_chart_card.json           |  8 +--
 ...r_humidity_chart_card_with_background.json |  8 +--
 .../indoor_humidity_progress_bar.json         |  6 +--
 ...humidity_progress_bar_with_background.json |  6 +--
 .../widget_types/indoor_illuminance_card.json |  6 +--
 ...door_illuminance_card_with_background.json |  6 +--
 .../indoor_illuminance_chart_card.json        |  8 +--
 ...lluminance_chart_card_with_background.json |  8 +--
 .../indoor_illuminance_progress_bar.json      |  6 +--
 ...uminance_progress_bar_with_background.json |  6 +--
 .../system/widget_types/indoor_pm10_card.json |  6 +--
 .../indoor_pm10_card_with_background.json     |  6 +--
 .../widget_types/indoor_pm10_chart_card.json  |  8 +--
 ...ndoor_pm10_chart_card_with_background.json |  8 +--
 .../widget_types/indoor_pm2_5_card.json       |  6 +--
 .../indoor_pm2_5_card_with_background.json    |  6 +--
 .../widget_types/indoor_pm2_5_chart_card.json |  8 +--
 ...door_pm2_5_chart_card_with_background.json |  8 +--
 .../indoor_simple_co2_chart_card.json         |  8 +--
 ...simple_co2_chart_card_with_background.json |  8 +--
 .../indoor_simple_humidity_chart_card.json    |  8 +--
 ...e_humidity_chart_card_with_background.json |  8 +--
 .../indoor_simple_illuminance_chart_card.json |  8 +--
 ...lluminance_chart_card_with_background.json |  8 +--
 .../indoor_simple_pm10_chart_card.json        |  8 +--
 ...imple_pm10_chart_card_with_background.json |  8 +--
 .../indoor_simple_pm2_5_chart_card.json       |  8 +--
 ...mple_pm2_5_chart_card_with_background.json |  8 +--
 .../indoor_simple_temperature_chart_card.json |  8 +--
 ...emperature_chart_card_with_background.json |  8 +--
 .../widget_types/indoor_temperature_card.json |  6 +--
 ...door_temperature_card_with_background.json |  6 +--
 .../indoor_temperature_chart_card.json        |  8 +--
 ...emperature_chart_card_with_background.json |  8 +--
 .../indoor_temperature_gauge.json             |  6 +--
 .../indoor_temperature_progress_bar.json      |  6 +--
 ...perature_progress_bar_with_background.json |  6 +--
 .../indoor_temperature_range_chart.json       |  8 +--
 ...mperature_range_chart_with_background.json |  8 +--
 .../widget_types/label___value_card.json      |  4 +-
 .../system/widget_types/lcd_bar_gauge.json    |  6 +--
 .../json/system/widget_types/lcd_gauge.json   |  6 +--
 .../widget_types/leaf_wetness_card.json       |  6 +--
 .../leaf_wetness_card_with_background.json    |  6 +--
 .../widget_types/leaf_wetness_chart_card.json |  8 +--
 ...af_wetness_chart_card_with_background.json |  8 +--
 .../leaf_wetness_progress_bar.json            |  6 +--
 ..._wetness_progress_bar_with_background.json |  6 +--
 .../json/system/widget_types/line_chart.json  |  8 +--
 .../json/system/widget_types/mini_gauge.json  |  6 +--
 .../json/system/widget_types/neon_gauge.json  |  6 +--
 .../nitrogen_dioxide__no2__card.json          |  6 +--
 ...en_dioxide__no2__card_with_background.json |  6 +--
 .../nitrogen_dioxide__no2__chart_card.json    |  8 +--
 ...xide__no2__chart_card_with_background.json |  8 +--
 .../system/widget_types/noise_level_card.json |  6 +--
 .../noise_level_card_with_background.json     |  6 +--
 .../widget_types/noise_level_chart_card.json  |  8 +--
 ...oise_level_chart_card_with_background.json |  8 +--
 .../system/widget_types/ozone__o3__card.json  |  6 +--
 .../ozone__o3__card_with_background.json      |  6 +--
 .../widget_types/ozone__o3__chart_card.json   |  8 +--
 ...ozone__o3__chart_card_with_background.json |  8 +--
 .../data/json/system/widget_types/pie.json    |  4 +-
 .../json/system/widget_types/pm10_card.json   |  6 +--
 .../pm10_card_with_background.json            |  6 +--
 .../system/widget_types/pm10_chart_card.json  |  8 +--
 .../pm10_chart_card_with_background.json      |  8 +--
 .../json/system/widget_types/pm2_5_card.json  |  6 +--
 .../pm2_5_card_with_background.json           |  6 +--
 .../system/widget_types/pm2_5_chart_card.json |  8 +--
 .../pm2_5_chart_card_with_background.json     |  8 +--
 .../json/system/widget_types/point_chart.json |  8 +--
 .../json/system/widget_types/polar_area.json  |  4 +-
 .../widget_types/power_consumption_card.json  |  2 +-
 ...ower_consumption_card_with_background.json |  2 +-
 .../power_consumption_chart_card.json         |  8 +--
 ...onsumption_chart_card_with_background.json |  8 +--
 .../power_consumption_range_chart.json        |  8 +--
 ...nsumption_range_chart_with_background.json |  8 +--
 .../system/widget_types/pressure_card.json    |  6 +--
 .../pressure_card_with_background.json        |  6 +--
 .../widget_types/pressure_chart_card.json     |  8 +--
 .../pressure_chart_card_with_background.json  |  8 +--
 .../widget_types/pressure_progress_bar.json   |  6 +--
 ...pressure_progress_bar_with_background.json |  6 +--
 .../system/widget_types/progress_bar.json     |  6 +--
 .../widget_types/pump_vibration_card.json     |  2 +-
 .../pump_vibration_card_with_background.json  |  2 +-
 .../pump_vibration_chart_card.json            |  8 +--
 ..._vibration_chart_card_with_background.json |  8 +--
 .../pump_vibration_range_chart.json           |  8 +--
 ...vibration_range_chart_with_background.json |  8 +--
 .../data/json/system/widget_types/radar.json  |  4 +-
 .../system/widget_types/radial_gauge.json     |  6 +--
 .../system/widget_types/radon_level_card.json |  6 +--
 .../radon_level_card_with_background.json     |  6 +--
 .../widget_types/radon_level_chart_card.json  |  8 +--
 ...adon_level_chart_card_with_background.json |  8 +--
 .../system/widget_types/rainfall_card.json    |  6 +--
 .../rainfall_card_with_background.json        |  6 +--
 .../widget_types/rainfall_chart_card.json     |  8 +--
 .../rainfall_chart_card_with_background.json  |  8 +--
 .../json/system/widget_types/range_chart.json |  8 +--
 .../widget_types/rotational_speed_card.json   |  2 +-
 ...rotational_speed_card_with_background.json |  2 +-
 .../rotational_speed_chart_card.json          |  8 +--
 ...onal_speed_chart_card_with_background.json |  8 +--
 .../widget_types/rotational_speed_gauge.json  |  6 +--
 .../rotational_speed_progress_bar.json        |  6 +--
 ...al_speed_progress_bar_with_background.json |  6 +--
 .../rotational_speed_range_chart.json         |  8 +--
 ...nal_speed_range_chart_with_background.json |  8 +--
 .../system/widget_types/signal_strength.json  | 17 +-----
 .../simple_air_quality_index_chart_card.json  |  8 +--
 ...lity_index_chart_card_with_background.json |  8 +--
 ...imple_carbon_monoxide__co__chart_card.json |  8 +--
 ...oxide__co__chart_card_with_background.json |  8 +--
 .../widget_types/simple_co2_chart_card.json   |  8 +--
 ...simple_co2_chart_card_with_background.json |  8 +--
 .../simple_efficiency_chart_card.json         |  8 +--
 ...efficiency_chart_card_with_background.json |  8 +--
 .../simple_flooding_level_chart_card.json     |  8 +--
 ...ding_level_chart_card_with_background.json |  8 +--
 .../simple_flow_rate_chart_card.json          |  8 +--
 ..._flow_rate_chart_card_with_background.json |  8 +--
 .../simple_fluid_pressure_chart_card.json     |  8 +--
 ...d_pressure_chart_card_with_background.json |  8 +--
 .../system/widget_types/simple_gauge.json     |  6 +--
 .../simple_ground_temperature_chart_card.json |  8 +--
 ...emperature_chart_card_with_background.json |  8 +--
 .../simple_humidity_chart_card.json           |  8 +--
 ...e_humidity_chart_card_with_background.json |  8 +--
 .../simple_illuminance_chart_card.json        |  8 +--
 ...lluminance_chart_card_with_background.json |  8 +--
 ...vidual_allergy_index__iai__chart_card.json |  8 +--
 ...ndex__iai__chart_card_with_background.json |  8 +--
 .../simple_leaf_wetness_chart_card.json       |  8 +--
 ...af_wetness_chart_card_with_background.json |  8 +--
 .../widget_types/simple_neon_gauge.json       |  6 +--
 ...ple_nitrogen_dioxide__no2__chart_card.json |  8 +--
 ...xide__no2__chart_card_with_background.json |  8 +--
 .../simple_noise_level_chart_card.json        |  8 +--
 ...oise_level_chart_card_with_background.json |  8 +--
 .../simple_ozone__o3__chart_card.json         |  8 +--
 ...ozone__o3__chart_card_with_background.json |  8 +--
 .../widget_types/simple_pm10_chart_card.json  |  8 +--
 ...imple_pm10_chart_card_with_background.json |  8 +--
 .../widget_types/simple_pm2_5_chart_card.json |  8 +--
 ...mple_pm2_5_chart_card_with_background.json |  8 +--
 .../simple_power_consumption_chart_card.json  |  8 +--
 ...onsumption_chart_card_with_background.json |  8 +--
 .../simple_pressure_chart_card.json           |  8 +--
 ...e_pressure_chart_card_with_background.json |  8 +--
 .../simple_pump_vibration_chart_card.json     |  8 +--
 ..._vibration_chart_card_with_background.json |  8 +--
 .../simple_radon_level_chart_card.json        |  8 +--
 ...adon_level_chart_card_with_background.json |  8 +--
 .../simple_rainfall_chart_card.json           |  8 +--
 ...e_rainfall_chart_card_with_background.json |  8 +--
 .../simple_rotational_speed_chart_card.json   |  8 +--
 ...onal_speed_chart_card_with_background.json |  8 +--
 .../simple_snow_depth_chart_card.json         |  8 +--
 ...snow_depth_chart_card_with_background.json |  8 +--
 .../simple_soil_moisture_chart_card.json      |  8 +--
 ...l_moisture_chart_card_with_background.json |  8 +--
 .../simple_solar_radiation_chart_card.json    |  8 +--
 ..._radiation_chart_card_with_background.json |  8 +--
 ...imple_sulfur_dioxide__so2__chart_card.json |  8 +--
 ...xide__so2__chart_card_with_background.json |  8 +--
 .../simple_temperature_chart_card.json        |  8 +--
 ...emperature_chart_card_with_background.json |  8 +--
 .../simple_uv_index_chart_card.json           |  8 +--
 ...e_uv_index_chart_card_with_background.json |  8 +--
 .../simple_value_and_chart_card.json          |  8 +--
 .../simple_vibration_chart_card.json          |  8 +--
 ..._vibration_chart_card_with_background.json |  8 +--
 .../simple_visibility_chart_card.json         |  8 +--
 ...visibility_chart_card_with_background.json |  8 +--
 ...volatile_organic_compounds_chart_card.json |  8 +--
 ..._compounds_chart_card_with_background.json |  8 +--
 .../simple_wind_speed_chart_card.json         |  8 +--
 ...wind_speed_chart_card_with_background.json |  8 +--
 .../data/json/system/widget_types/slider.json |  2 +-
 .../system/widget_types/snow_depth_card.json  |  6 +--
 .../snow_depth_card_with_background.json      |  6 +--
 .../widget_types/snow_depth_chart_card.json   |  8 +--
 ...snow_depth_chart_card_with_background.json |  8 +--
 .../widget_types/soil_moisture_card.json      |  6 +--
 .../soil_moisture_card_with_background.json   |  6 +--
 .../soil_moisture_chart_card.json             |  8 +--
 ...l_moisture_chart_card_with_background.json |  8 +--
 .../soil_moisture_progress_bar.json           |  6 +--
 ...moisture_progress_bar_with_background.json |  6 +--
 .../widget_types/solar_radiation_card.json    |  6 +--
 .../solar_radiation_card_with_background.json |  6 +--
 .../solar_radiation_chart_card.json           |  8 +--
 ..._radiation_chart_card_with_background.json |  8 +--
 .../json/system/widget_types/speed_gauge.json |  6 +--
 .../sulfur_dioxide__so2__card.json            |  6 +--
 ...ur_dioxide__so2__card_with_background.json |  6 +--
 .../sulfur_dioxide__so2__chart_card.json      |  8 +--
 ...xide__so2__chart_card_with_background.json |  8 +--
 .../system/widget_types/temperature_card.json |  6 +--
 .../temperature_card_with_background.json     |  6 +--
 .../widget_types/temperature_chart_card.json  |  8 +--
 ...emperature_chart_card_with_background.json |  8 +--
 .../widget_types/temperature_gauge.json       |  6 +--
 .../temperature_radial_gauge.json             |  6 +--
 .../widget_types/temperature_range_chart.json |  8 +--
 ...mperature_range_chart_with_background.json |  8 +--
 .../widget_types/thermometer_scale.json       |  6 +--
 .../widget_types/time_series_chart.json       |  8 +--
 .../system/widget_types/timeseries_table.json |  5 +-
 .../system/widget_types/uv_index_card.json    |  6 +--
 .../uv_index_card_with_background.json        |  6 +--
 .../widget_types/uv_index_chart_card.json     |  8 +--
 .../uv_index_chart_card_with_background.json  |  8 +--
 .../widget_types/value_and_chart_card.json    |  8 +--
 .../json/system/widget_types/value_card.json  |  6 +--
 .../system/widget_types/value_stepper.json    |  2 +-
 .../system/widget_types/vertical_bar.json     |  6 +--
 .../system/widget_types/vibration_card.json   |  6 +--
 .../vibration_card_with_background.json       |  6 +--
 .../widget_types/vibration_chart_card.json    |  8 +--
 .../vibration_chart_card_with_background.json |  8 +--
 .../system/widget_types/visibility_card.json  |  6 +--
 .../visibility_card_with_background.json      |  6 +--
 .../widget_types/visibility_chart_card.json   |  8 +--
 ...visibility_chart_card_with_background.json |  8 +--
 .../volatile_organic_compounds_card.json      |  6 +--
 ...rganic_compounds_card_with_background.json |  6 +--
 ...volatile_organic_compounds_chart_card.json |  8 +--
 ..._compounds_chart_card_with_background.json |  8 +--
 .../wind_speed_and_direction.json             |  2 +-
 ...d_speed_and_direction_with_background.json |  2 +-
 .../system/widget_types/wind_speed_card.json  |  6 +--
 .../wind_speed_card_with_background.json      |  6 +--
 .../widget_types/wind_speed_chart_card.json   |  8 +--
 ...wind_speed_chart_card_with_background.json |  8 +--
 ui-ngx/src/app/core/api/widget-api.models.ts  | 10 ++--
 .../src/app/core/api/widget-subscription.ts   | 35 ++++++++-----
 ui-ngx/src/app/core/services/unit.service.ts  | 26 +++++++---
 .../aggregated-data-key-row.component.html    |  2 +-
 .../aggregated-data-key-row.component.ts      | 13 ++---
 .../aggregated-data-keys-panel.component.ts   | 17 +-----
 ...ted-value-card-basic-config.component.html |  2 +-
 ...bel-value-card-basic-config.component.html |  2 +-
 ...label-value-card-basic-config.component.ts |  3 +-
 .../progress-bar-basic-config.component.html  |  2 +-
 .../progress-bar-basic-config.component.ts    |  3 +-
 .../value-card-basic-config.component.html    |  2 +-
 .../value-card-basic-config.component.ts      | 10 ++--
 ...lue-chart-card-basic-config.component.html |  2 +-
 ...value-chart-card-basic-config.component.ts |  3 +-
 ...rt-with-labels-basic-config.component.html |  3 +-
 ...hart-with-labels-basic-config.component.ts |  3 +-
 .../latest-chart-basic-config.component.html  |  3 +-
 .../latest-chart-basic-config.component.ts    | 11 ++--
 .../range-chart-basic-config.component.html   |  3 +-
 .../range-chart-basic-config.component.ts     |  5 +-
 .../basic/common/data-key-row.component.html  |  2 +-
 .../analog-gauge-basic-config.component.html  |  3 +-
 .../analog-gauge-basic-config.component.ts    |  8 ++-
 ...l-simple-gauge-basic-config.component.html |  1 +
 ...tal-simple-gauge-basic-config.component.ts |  3 +-
 .../battery-level-basic-config.component.ts   |  3 +-
 ...uid-level-card-basic-config.component.html |  2 +
 ...iquid-level-card-basic-config.component.ts |  8 +--
 ...ignal-strength-basic-config.component.html |  2 +-
 .../signal-strength-basic-config.component.ts |  3 +-
 .../rpc/slider-basic-config.component.html    |  2 +-
 .../rpc/slider-basic-config.component.ts      |  3 +-
 .../value-stepper-basic-config.component.html |  2 +-
 .../value-stepper-basic-config.component.ts   |  3 +-
 ...-speed-direction-basic-config.component.ts |  5 +-
 .../widget/config/datasource.component.html   |  1 +
 .../alarm/alarms-table-widget.component.ts    | 22 ++++----
 .../widget/lib/analogue-gauge.models.ts       | 52 ++++++++++++++-----
 .../widget/lib/canvas-digital-gauge.ts        | 14 ++---
 .../aggregated-value-card-widget.component.ts |  4 +-
 .../lib/cards/aggregated-value-card.models.ts | 23 +++++---
 .../label-value-card-widget.component.ts      | 23 +++-----
 .../cards/progress-bar-widget.component.ts    | 34 +++++-------
 .../lib/cards/value-card-widget.component.ts  | 15 ++----
 .../value-chart-card-widget.component.ts      | 23 ++++----
 .../components/widget/lib/chart/bars-chart.ts |  7 +--
 .../widget/lib/chart/latest-chart.models.ts   | 14 ++---
 .../widget/lib/chart/latest-chart.ts          | 26 ++++++----
 .../widget/lib/chart/radar-chart.ts           |  9 ++--
 .../lib/chart/range-chart-widget.component.ts | 19 ++++---
 .../lib/chart/range-chart-widget.models.ts    | 11 ++--
 .../lib/chart/time-series-chart.models.ts     | 14 +++--
 .../widget/lib/chart/time-series-chart.ts     | 48 ++++++++++++-----
 .../widget/lib/digital-gauge.models.ts        |  3 +-
 .../components/widget/lib/digital-gauge.ts    | 25 ++++++---
 .../entity/entities-table-widget.component.ts | 22 ++++----
 .../home/components/widget/lib/flot-widget.ts |  9 ++--
 .../battery-level-widget.component.ts         | 28 +++-------
 .../liquid-level-widget.component.ts          | 43 ++++++++++-----
 .../indicator/liquid-level-widget.models.ts   |  3 +-
 .../signal-strength-widget.component.ts       | 22 +++-----
 .../widget/lib/rpc/knob.component.ts          |  6 ++-
 .../widget/lib/rpc/slider-widget.component.ts | 15 ++++--
 .../widget/lib/rpc/slider-widget.models.ts    |  3 +-
 .../lib/rpc/value-stepper-widget.component.ts | 18 +++++--
 .../lib/rpc/value-stepper-widget.models.ts    |  3 +-
 ...el-value-card-widget-settings.component.ts |  3 +-
 .../progress-bar-widget-settings.component.ts |  3 +-
 .../value-card-widget-settings.component.ts   | 15 +++---
 ...ue-chart-card-widget-settings.component.ts |  3 +-
 ...t-with-labels-widget-settings.component.ts |  3 +-
 .../latest-chart-widget-settings.component.ts |  5 +-
 .../range-chart-widget-settings.component.ts  |  5 +-
 ...me-series-chart-line-settings.component.ts |  5 +-
 .../chart/chart-bar-settings.component.ts     |  5 +-
 ...-series-chart-axis-settings.component.html |  1 +
 ...-series-chart-threshold-row.component.html |  2 +-
 ...rt-threshold-settings-panel.component.html |  1 +
 ...hart-threshold-settings-panel.component.ts | 10 ++--
 ...ime-series-chart-y-axis-row.component.html |  2 +-
 .../slider-widget-settings.component.html     |  2 +-
 .../slider-widget-settings.component.ts       |  3 +-
 ...lue-stepper-widget-settings.component.html |  2 +-
 ...value-stepper-widget-settings.component.ts |  3 +-
 ...digital-gauge-widget-settings.component.ts |  6 ++-
 ...battery-level-widget-settings.component.ts |  3 +-
 ...-level-card-widget-settings.component.html |  2 +
 ...id-level-card-widget-settings.component.ts |  8 +--
 ...gnal-strength-widget-settings.component.ts |  3 +-
 ...eed-direction-widget-settings.component.ts |  8 +--
 .../widget/lib/table-widget.models.ts         |  4 +-
 .../lib/timeseries-table-widget.component.ts  | 24 +++++----
 .../wind-speed-direction-widget.component.ts  | 23 ++++----
 .../widget/widget-config.component.html       |  2 +-
 .../components/widget/widget.component.ts     |  1 +
 .../home/models/widget-component.models.ts    |  6 ++-
 ...convert-unit-settings-panel.component.html | 24 +++++++--
 .../convert-unit-settings-panel.component.ts  | 37 ++++++++-----
 .../components/unit-input.component.html      |  3 +-
 .../shared/components/unit-input.component.ts | 36 +++++++++----
 ui-ngx/src/app/shared/models/unit.models.ts   | 13 +++++
 .../shared/models/widget-settings.models.ts   |  6 +--
 ui-ngx/src/app/shared/models/widget.models.ts | 12 +++--
 .../assets/locale/locale.constant-en_US.json  |  2 +-
 510 files changed, 1935 insertions(+), 1786 deletions(-)

diff --git a/application/src/main/data/json/system/widget_types/air_quality_index_card.json b/application/src/main/data/json/system/widget_types/air_quality_index_card.json
index 5e58c621a1..9dc9a99194 100644
--- a/application/src/main/data/json/system/widget_types/air_quality_index_card.json
+++ b/application/src/main/data/json/system/widget_types/air_quality_index_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'air', label: 'Air Quality Index', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'air', label: 'Air Quality Index', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/air_quality_index_card_with_background.json b/application/src/main/data/json/system/widget_types/air_quality_index_card_with_background.json
index d49bfbc45c..5bf555d92c 100644
--- a/application/src/main/data/json/system/widget_types/air_quality_index_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/air_quality_index_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'air', label: 'Air Quality Index', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'air', label: 'Air Quality Index', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/air_quality_index_chart_card.json b/application/src/main/data/json/system/widget_types/air_quality_index_chart_card.json
index 8ca5c5aa73..58ba002255 100644
--- a/application/src/main/data/json/system/widget_types/air_quality_index_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/air_quality_index_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'air', label: 'Air Quality Index', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'AQI', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'air', 'AQI', 1);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'air', label: 'Air Quality Index', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'AQI', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'air', 'AQI', 1);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/air_quality_index_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/air_quality_index_chart_card_with_background.json
index 424356fdd7..43ddb147ac 100644
--- a/application/src/main/data/json/system/widget_types/air_quality_index_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/air_quality_index_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'air', label: 'Air Quality Index', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'AQI', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'air', 'AQI', 1);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'air', label: 'Air Quality Index', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'AQI', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'air', 'AQI', 1);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/alarms_table.json b/application/src/main/data/json/system/widget_types/alarms_table.json
index 2fe6c90abc..4f86957f1c 100644
--- a/application/src/main/data/json/system/widget_types/alarms_table.json
+++ b/application/src/main/data/json/system/widget_types/alarms_table.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-alarms-table-widget \n    [ctx]=\"ctx\">\n</tb-alarms-table-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.alarmsTableWidget.onDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.alarmsTableWidget.onEditModeChanged();\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'cellClick': {\n            name: 'widget-action.cell-click',\n            multiple: true\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
+    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.alarmsTableWidget.onDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.alarmsTableWidget.onEditModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        supportsUnitConversion: true\n    };\n};\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'cellClick': {\n            name: 'widget-action.cell-click',\n            multiple: true\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "",
     "settingsDirective": "tb-alarms-table-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/asset_admin_table.json b/application/src/main/data/json/system/widget_types/asset_admin_table.json
index 1273c98c61..103382ddf5 100644
--- a/application/src/main/data/json/system/widget_types/asset_admin_table.json
+++ b/application/src/main/data/json/system/widget_types/asset_admin_table.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-entities-table-widget \n    [ctx]=\"ctx\">\n</tb-entities-table-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.entitiesTableWidget.onEditModeChanged();\n}\n\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        hasDataPageLink: true,\n        warnOnPageDataOverflow: false,\n        dataKeysOptional: true\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'rowDoubleClick': {\n            name: 'widget-action.row-double-click',\n            multiple: false\n        },\n        'cellClick': {\n            name: 'widget-action.cell-click',\n            multiple: true\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
+    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.entitiesTableWidget.onEditModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        hasDataPageLink: true,\n        warnOnPageDataOverflow: false,\n        dataKeysOptional: true,\n        supportsUnitConversion: true\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'rowDoubleClick': {\n            name: 'widget-action.row-double-click',\n            multiple: false\n        },\n        'cellClick': {\n            name: 'widget-action.cell-click',\n            multiple: true\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "",
     "settingsDirective": "tb-entities-table-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/bar_chart.json b/application/src/main/data/json/system/widget_types/bar_chart.json
index 58f6244fd3..5818f3d610 100644
--- a/application/src/main/data/json/system/widget_types/bar_chart.json
+++ b/application/src/main/data/json/system/widget_types/bar_chart.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-time-series-chart-widget \n    [ctx]=\"ctx\">\n</tb-time-series-chart-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onDataUpdated();\n}\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onLatestDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        chartType: 'bar',\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        hasAdditionalLatestDataKeys: true,\n        dataKeySettingsFunction: TbTimeSeriesChart.dataKeySettings('bar'),\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries', units: '°C', decimals: 0 }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onDataUpdated();\n}\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onLatestDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        chartType: 'bar',\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        hasAdditionalLatestDataKeys: true,\n        supportsUnitConversion: true,\n        dataKeySettingsFunction: TbTimeSeriesChart.dataKeySettings('bar'),\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries', units: '°C', decimals: 0 }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-time-series-chart-widget-settings",
     "dataKeySettingsDirective": "tb-time-series-chart-key-settings",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/bar_chart_with_labels.json b/application/src/main/data/json/system/widget_types/bar_chart_with_labels.json
index 6972e859b0..7e0bfe1e66 100644
--- a/application/src/main/data/json/system/widget_types/bar_chart_with_labels.json
+++ b/application/src/main/data/json/system/widget_types/bar_chart_with_labels.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-bar-chart-with-labels-widget \n    [ctx]=\"ctx\">\n</tb-bar-chart-with-labels-widget>",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.barChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.barChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.barChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.barChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-bar-chart-with-labels-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/bars.json b/application/src/main/data/json/system/widget_types/bars.json
index ce640c95b1..c5ef85be52 100644
--- a/application/src/main/data/json/system/widget_types/bars.json
+++ b/application/src/main/data/json/system/widget_types/bars.json
@@ -11,9 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-bar-chart-widget \n    [ctx]=\"ctx\">\n</tb-bar-chart-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.barChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.barChartWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '500px',\n        previewHeight: '380px',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar', type: 'timeseries', color: '#FF4D5A' },\n                    { name: 'hydroelectricPower', label: 'Hydroelectric', type: 'timeseries', color: '#FFDE30' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.barChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.barChartWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '500px',\n        previewHeight: '380px',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar', type: 'timeseries', color: '#FF4D5A' },\n                    { name: 'hydroelectricPower', label: 'Hydroelectric', type: 'timeseries', color: '#FFDE30' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n\n",
     "settingsDirective": "tb-bar-chart-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-bar-chart-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/battery_level.json b/application/src/main/data/json/system/widget_types/battery_level.json
index dbff79efb8..08c6c6bd0a 100644
--- a/application/src/main/data/json/system/widget_types/battery_level.json
+++ b/application/src/main/data/json/system/widget_types/battery_level.json
@@ -11,9 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-battery-level-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-battery-level-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.batteryLevelWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.batteryLevelWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '200px',\n        previewHeight: '200px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'batteryLevel', label: 'batteryLevel', type: 'timeseries' }];\n        }\n    };\n};\n\nself.actionSources = function() {\n    return {\n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.batteryLevelWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.batteryLevelWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '200px',\n        previewHeight: '200px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'batteryLevel', label: 'batteryLevel', type: 'timeseries' }];\n        }\n    };\n};\n\nself.actionSources = function() {\n    return {\n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n};\n",
     "settingsDirective": "tb-battery-level-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-battery-level-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/carbon_monoxide__co__card.json b/application/src/main/data/json/system/widget_types/carbon_monoxide__co__card.json
index e93b2a4427..eb2b8fde5f 100644
--- a/application/src/main/data/json/system/widget_types/carbon_monoxide__co__card.json
+++ b/application/src/main/data/json/system/widget_types/carbon_monoxide__co__card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'carbon', label: 'Carbon monoxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'carbon', label: 'Carbon monoxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/carbon_monoxide__co__card_with_background.json b/application/src/main/data/json/system/widget_types/carbon_monoxide__co__card_with_background.json
index 1916d9398b..3c53033b15 100644
--- a/application/src/main/data/json/system/widget_types/carbon_monoxide__co__card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/carbon_monoxide__co__card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'carbon', label: 'Carbon monoxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'carbon', label: 'Carbon monoxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/carbon_monoxide__co__chart_card.json b/application/src/main/data/json/system/widget_types/carbon_monoxide__co__chart_card.json
index 840aff90fe..f1ac79ea11 100644
--- a/application/src/main/data/json/system/widget_types/carbon_monoxide__co__chart_card.json
+++ b/application/src/main/data/json/system/widget_types/carbon_monoxide__co__chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'carbon', label: 'Carbon monoxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'mg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'carbon', 'mg/m³', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'carbon', label: 'Carbon monoxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'mg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'carbon', 'mg/m³', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/carbon_monoxide__co__chart_card_with_background.json b/application/src/main/data/json/system/widget_types/carbon_monoxide__co__chart_card_with_background.json
index fb686bd61b..cddc48b6e4 100644
--- a/application/src/main/data/json/system/widget_types/carbon_monoxide__co__chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/carbon_monoxide__co__chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'carbon', label: 'Carbon monoxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'mg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'carbon', 'mg/m³', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'carbon', label: 'Carbon monoxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'mg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'carbon', 'mg/m³', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/co2_card.json b/application/src/main/data/json/system/widget_types/co2_card.json
index 6eabbff831..3edb6cb025 100644
--- a/application/src/main/data/json/system/widget_types/co2_card.json
+++ b/application/src/main/data/json/system/widget_types/co2_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'co2', label: 'CO2 level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'co2', label: 'CO2 level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/co2_card_with_background.json b/application/src/main/data/json/system/widget_types/co2_card_with_background.json
index 42f461db33..8f7936e919 100644
--- a/application/src/main/data/json/system/widget_types/co2_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/co2_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'co2', label: 'CO2 level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'co2', label: 'CO2 level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/co2_chart_card.json b/application/src/main/data/json/system/widget_types/co2_chart_card.json
index 12e3400fa3..70d06ffe37 100644
--- a/application/src/main/data/json/system/widget_types/co2_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/co2_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'co2', label: 'CO2 level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'ppm', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'co2', 'ppm', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'co2', label: 'CO2 level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'ppm', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'co2', 'ppm', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/co2_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/co2_chart_card_with_background.json
index 7db0de4c84..3de7fadf01 100644
--- a/application/src/main/data/json/system/widget_types/co2_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/co2_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'co2', label: 'CO2 level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'ppm', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'co2', 'ppm', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'co2', label: 'CO2 level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'ppm', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'co2', 'ppm', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/device_admin_table.json b/application/src/main/data/json/system/widget_types/device_admin_table.json
index 8e9a0dfb07..515b3b10ea 100644
--- a/application/src/main/data/json/system/widget_types/device_admin_table.json
+++ b/application/src/main/data/json/system/widget_types/device_admin_table.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-entities-table-widget \n    [ctx]=\"ctx\">\n</tb-entities-table-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.entitiesTableWidget.onEditModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        hasDataPageLink: true,\n        warnOnPageDataOverflow: false,\n        dataKeysOptional: true\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'rowDoubleClick': {\n            name: 'widget-action.row-double-click',\n            multiple: false\n        },\n        'cellClick': {\n            name: 'widget-action.cell-click',\n            multiple: true\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
+    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.entitiesTableWidget.onEditModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        hasDataPageLink: true,\n        warnOnPageDataOverflow: false,\n        dataKeysOptional: true,\n        supportsUnitConversion: true\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'rowDoubleClick': {\n            name: 'widget-action.row-double-click',\n            multiple: false\n        },\n        'cellClick': {\n            name: 'widget-action.cell-click',\n            multiple: true\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "",
     "settingsDirective": "tb-entities-table-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/digital_horizontal_bar.json b/application/src/main/data/json/system/widget_types/digital_horizontal_bar.json
index 2525e71aa5..e76926e46b 100644
--- a/application/src/main/data/json/system/widget_types/digital_horizontal_bar.json
+++ b/application/src/main/data/json/system/widget_types/digital_horizontal_bar.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<canvas id=\"digitalGauge\"></canvas>",
     "templateCss": "#gauge {\n    text-align: center;\n   /* margin-left: -100px;\n    margin-right: -100px;*/\n    /*margin-top: -50px;*/\n    \n}\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-digital-gauge-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-digital-simple-gauge-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/digital_speedometer.json b/application/src/main/data/json/system/widget_types/digital_speedometer.json
index 18f1bb0a2d..c1f3a73697 100644
--- a/application/src/main/data/json/system/widget_types/digital_speedometer.json
+++ b/application/src/main/data/json/system/widget_types/digital_speedometer.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<canvas id=\"digitalGauge\"></canvas>",
     "templateCss": "#gauge {\n    text-align: center;\n   /* margin-left: -100px;\n    margin-right: -100px;*/\n    /*margin-top: -50px;*/\n    \n}\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-digital-gauge-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-digital-simple-gauge-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/digital_thermometer.json b/application/src/main/data/json/system/widget_types/digital_thermometer.json
index e438a5f969..af1ecc3c82 100644
--- a/application/src/main/data/json/system/widget_types/digital_thermometer.json
+++ b/application/src/main/data/json/system/widget_types/digital_thermometer.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<canvas id=\"digitalGauge\"></canvas>",
     "templateCss": "#gauge {\n    text-align: center;\n   /* margin-left: -100px;\n    margin-right: -100px;*/\n    /*margin-top: -50px;*/\n    \n}\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-digital-gauge-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-digital-simple-gauge-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/digital_vertical_bar.json b/application/src/main/data/json/system/widget_types/digital_vertical_bar.json
index 36f03dbbdb..da895874c0 100644
--- a/application/src/main/data/json/system/widget_types/digital_vertical_bar.json
+++ b/application/src/main/data/json/system/widget_types/digital_vertical_bar.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<canvas id=\"digitalGauge\"></canvas>",
     "templateCss": "#gauge {\n    text-align: center;\n   /* margin-left: -100px;\n    margin-right: -100px;*/\n    /*margin-top: -50px;*/\n    \n}\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-digital-gauge-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-digital-simple-gauge-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/doughnut.json b/application/src/main/data/json/system/widget_types/doughnut.json
index bf03a75b09..1982810161 100644
--- a/application/src/main/data/json/system/widget_types/doughnut.json
+++ b/application/src/main/data/json/system/widget_types/doughnut.json
@@ -11,9 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-doughnut-widget \n    [ctx]=\"ctx\">\n</tb-doughnut-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.doughnutWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.doughnutWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '380px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind power', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar power', type: 'timeseries', color: '#FF4D5A' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.doughnutWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.doughnutWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '380px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind power', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar power', type: 'timeseries', color: '#FF4D5A' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsDirective": "tb-doughnut-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-doughnut-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/efficiency_card.json b/application/src/main/data/json/system/widget_types/efficiency_card.json
index 75ed65b092..3ee0c4ea87 100644
--- a/application/src/main/data/json/system/widget_types/efficiency_card.json
+++ b/application/src/main/data/json/system/widget_types/efficiency_card.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/efficiency_card_with_background.json b/application/src/main/data/json/system/widget_types/efficiency_card_with_background.json
index f983f1f4f6..31712b3b81 100644
--- a/application/src/main/data/json/system/widget_types/efficiency_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/efficiency_card_with_background.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/efficiency_chart_card.json b/application/src/main/data/json/system/widget_types/efficiency_chart_card.json
index b67f2fd03a..298eddb21c 100644
--- a/application/src/main/data/json/system/widget_types/efficiency_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/efficiency_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'efficiency', label: 'Efficiency', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'efficiency', '%', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'efficiency', label: 'Efficiency', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'efficiency', '%', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/efficiency_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/efficiency_chart_card_with_background.json
index dcde5dac36..bd3b02b991 100644
--- a/application/src/main/data/json/system/widget_types/efficiency_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/efficiency_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'efficiency', label: 'Efficiency', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'efficiency', '%', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'efficiency', label: 'Efficiency', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'efficiency', '%', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/efficiency_progress_bar.json b/application/src/main/data/json/system/widget_types/efficiency_progress_bar.json
index 3b2f8b8c8d..e216dcd9be 100644
--- a/application/src/main/data/json/system/widget_types/efficiency_progress_bar.json
+++ b/application/src/main/data/json/system/widget_types/efficiency_progress_bar.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/efficiency_progress_bar_with_background.json b/application/src/main/data/json/system/widget_types/efficiency_progress_bar_with_background.json
index f852677deb..e52de65f59 100644
--- a/application/src/main/data/json/system/widget_types/efficiency_progress_bar_with_background.json
+++ b/application/src/main/data/json/system/widget_types/efficiency_progress_bar_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/efficiency_range_chart.json b/application/src/main/data/json/system/widget_types/efficiency_range_chart.json
index d3f4732f4c..ce08ee7c5b 100644
--- a/application/src/main/data/json/system/widget_types/efficiency_range_chart.json
+++ b/application/src/main/data/json/system/widget_types/efficiency_range_chart.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-range-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-range-chart-widget>",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-range-chart-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/efficiency_range_chart_with_background.json b/application/src/main/data/json/system/widget_types/efficiency_range_chart_with_background.json
index 283f691f85..df6e41242c 100644
--- a/application/src/main/data/json/system/widget_types/efficiency_range_chart_with_background.json
+++ b/application/src/main/data/json/system/widget_types/efficiency_range_chart_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-range-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-range-chart-widget>",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-range-chart-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/entities_table.json b/application/src/main/data/json/system/widget_types/entities_table.json
index 0dc6a638ef..01034a1d1d 100644
--- a/application/src/main/data/json/system/widget_types/entities_table.json
+++ b/application/src/main/data/json/system/widget_types/entities_table.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-entities-table-widget \n    [ctx]=\"ctx\">\n</tb-entities-table-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.entitiesTableWidget.onEditModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        hasDataPageLink: true,\n        warnOnPageDataOverflow: false,\n        dataKeysOptional: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'name', type: 'entityField' }];\n        }\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'rowDoubleClick': {\n            name: 'widget-action.row-double-click',\n            multiple: false\n        },\n        'cellClick': {\n            name: 'widget-action.cell-click',\n            multiple: true\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
+    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.entitiesTableWidget.onDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.entitiesTableWidget.onEditModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        hasDataPageLink: true,\n        warnOnPageDataOverflow: false,\n        dataKeysOptional: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'name', type: 'entityField' }];\n        }\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        },\n        'rowDoubleClick': {\n            name: 'widget-action.row-double-click',\n            multiple: false\n        },\n        'cellClick': {\n            name: 'widget-action.cell-click',\n            multiple: true\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "",
     "settingsDirective": "tb-entities-table-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/flooding_level_card.json b/application/src/main/data/json/system/widget_types/flooding_level_card.json
index 7eb55c53b9..9d9215cf0e 100644
--- a/application/src/main/data/json/system/widget_types/flooding_level_card.json
+++ b/application/src/main/data/json/system/widget_types/flooding_level_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flooding', label: 'Flooding level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flooding', label: 'Flooding level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/flooding_level_card_with_background.json b/application/src/main/data/json/system/widget_types/flooding_level_card_with_background.json
index 01b37ceee0..20fa345a25 100644
--- a/application/src/main/data/json/system/widget_types/flooding_level_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/flooding_level_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flooding', label: 'Flooding level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flooding', label: 'Flooding level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/flooding_level_chart_card.json b/application/src/main/data/json/system/widget_types/flooding_level_chart_card.json
index ebac8ca0ad..5592656dc4 100644
--- a/application/src/main/data/json/system/widget_types/flooding_level_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/flooding_level_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flooding', label: 'Flooding level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'flooding', 'm', 1);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flooding', label: 'Flooding level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'flooding', 'm', 1);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/flooding_level_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/flooding_level_chart_card_with_background.json
index 68a3d25f70..5b7dfda3da 100644
--- a/application/src/main/data/json/system/widget_types/flooding_level_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/flooding_level_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flooding', label: 'Flooding level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'flooding', 'm', 1);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flooding', label: 'Flooding level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'flooding', 'm', 1);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/flooding_level_progress_bar.json b/application/src/main/data/json/system/widget_types/flooding_level_progress_bar.json
index 47b3060366..b081f8aa99 100644
--- a/application/src/main/data/json/system/widget_types/flooding_level_progress_bar.json
+++ b/application/src/main/data/json/system/widget_types/flooding_level_progress_bar.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flooding', label: 'Flooding level', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flooding', label: 'Flooding level', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/flooding_level_progress_bar_with_background.json b/application/src/main/data/json/system/widget_types/flooding_level_progress_bar_with_background.json
index 4d9f05a568..2048b17063 100644
--- a/application/src/main/data/json/system/widget_types/flooding_level_progress_bar_with_background.json
+++ b/application/src/main/data/json/system/widget_types/flooding_level_progress_bar_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flooding', label: 'Flooding level', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flooding', label: 'Flooding level', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/flow_rate_card.json b/application/src/main/data/json/system/widget_types/flow_rate_card.json
index 3c7fe3a99c..bfe1c34f15 100644
--- a/application/src/main/data/json/system/widget_types/flow_rate_card.json
+++ b/application/src/main/data/json/system/widget_types/flow_rate_card.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow rate', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow rate', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/flow_rate_card_with_background.json b/application/src/main/data/json/system/widget_types/flow_rate_card_with_background.json
index 936fb2939a..cf127d5bf7 100644
--- a/application/src/main/data/json/system/widget_types/flow_rate_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/flow_rate_card_with_background.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow rate', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow rate', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/flow_rate_chart_card.json b/application/src/main/data/json/system/widget_types/flow_rate_chart_card.json
index f36d54d52f..df5c63b14e 100644
--- a/application/src/main/data/json/system/widget_types/flow_rate_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/flow_rate_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flowRate', label: 'Flow rate', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm³/hr', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'flowRate', 'm³/hr', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flowRate', label: 'Flow rate', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm³/hr', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'flowRate', 'm³/hr', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/flow_rate_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/flow_rate_chart_card_with_background.json
index 0c08c31b71..0ffb5a7122 100644
--- a/application/src/main/data/json/system/widget_types/flow_rate_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/flow_rate_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flowRate', label: 'Flow rate', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm³/hr', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'flowRate', 'm³/hr', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flowRate', label: 'Flow rate', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm³/hr', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'flowRate', 'm³/hr', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/flow_rate_gauge.json b/application/src/main/data/json/system/widget_types/flow_rate_gauge.json
index fbb5896150..83176686ac 100644
--- a/application/src/main/data/json/system/widget_types/flow_rate_gauge.json
+++ b/application/src/main/data/json/system/widget_types/flow_rate_gauge.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<canvas id=\"radialGauge\"></canvas>\n",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow rate', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow rate', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-analogue-radial-gauge-widget-settings",
     "dataKeySettingsDirective": "",
     "hasBasicMode": true,
diff --git a/application/src/main/data/json/system/widget_types/flow_rate_progress_bar.json b/application/src/main/data/json/system/widget_types/flow_rate_progress_bar.json
index ca416ea07a..8e63ab04e8 100644
--- a/application/src/main/data/json/system/widget_types/flow_rate_progress_bar.json
+++ b/application/src/main/data/json/system/widget_types/flow_rate_progress_bar.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow Rate', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow Rate', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/flow_rate_progress_bar_with_background.json b/application/src/main/data/json/system/widget_types/flow_rate_progress_bar_with_background.json
index e7a90f6082..d7ee1333e3 100644
--- a/application/src/main/data/json/system/widget_types/flow_rate_progress_bar_with_background.json
+++ b/application/src/main/data/json/system/widget_types/flow_rate_progress_bar_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow Rate', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow Rate', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/flow_rate_range_chart.json b/application/src/main/data/json/system/widget_types/flow_rate_range_chart.json
index 6562fc5fb8..c19becc363 100644
--- a/application/src/main/data/json/system/widget_types/flow_rate_range_chart.json
+++ b/application/src/main/data/json/system/widget_types/flow_rate_range_chart.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-range-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-range-chart-widget>",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow rate', type: 'timeseries' }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow rate', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-range-chart-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/flow_rate_range_chart_with_background.json b/application/src/main/data/json/system/widget_types/flow_rate_range_chart_with_background.json
index c4e0adc7b9..f5b7d437b2 100644
--- a/application/src/main/data/json/system/widget_types/flow_rate_range_chart_with_background.json
+++ b/application/src/main/data/json/system/widget_types/flow_rate_range_chart_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-range-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-range-chart-widget>",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow rate', type: 'timeseries' }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow rate', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-range-chart-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/fluid_pressure_card.json b/application/src/main/data/json/system/widget_types/fluid_pressure_card.json
index 574738bbd9..2c881da205 100644
--- a/application/src/main/data/json/system/widget_types/fluid_pressure_card.json
+++ b/application/src/main/data/json/system/widget_types/fluid_pressure_card.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/fluid_pressure_card_with_background.json b/application/src/main/data/json/system/widget_types/fluid_pressure_card_with_background.json
index 5fd645d4a4..d059d9b026 100644
--- a/application/src/main/data/json/system/widget_types/fluid_pressure_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/fluid_pressure_card_with_background.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/fluid_pressure_chart_card.json b/application/src/main/data/json/system/widget_types/fluid_pressure_chart_card.json
index a486a6c87a..ee27a6b376 100644
--- a/application/src/main/data/json/system/widget_types/fluid_pressure_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/fluid_pressure_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pressure', label: 'Pressure', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'bar', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pressure', 'bar', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pressure', label: 'Pressure', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'bar', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pressure', 'bar', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/fluid_pressure_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/fluid_pressure_chart_card_with_background.json
index a47ffc7752..e9e9fede9a 100644
--- a/application/src/main/data/json/system/widget_types/fluid_pressure_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/fluid_pressure_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pressure', label: 'Pressure', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'bar', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pressure', 'bar', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pressure', label: 'Pressure', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'bar', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pressure', 'bar', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/fluid_pressure_gauge.json b/application/src/main/data/json/system/widget_types/fluid_pressure_gauge.json
index e01138f6b0..98318d30a4 100644
--- a/application/src/main/data/json/system/widget_types/fluid_pressure_gauge.json
+++ b/application/src/main/data/json/system/widget_types/fluid_pressure_gauge.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<canvas id=\"radialGauge\"></canvas>\n",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-analogue-radial-gauge-widget-settings",
     "dataKeySettingsDirective": "",
     "hasBasicMode": true,
diff --git a/application/src/main/data/json/system/widget_types/fluid_pressure_progress_bar.json b/application/src/main/data/json/system/widget_types/fluid_pressure_progress_bar.json
index 063c6bd183..0a4e80dd60 100644
--- a/application/src/main/data/json/system/widget_types/fluid_pressure_progress_bar.json
+++ b/application/src/main/data/json/system/widget_types/fluid_pressure_progress_bar.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/fluid_pressure_progress_bar_with_background.json b/application/src/main/data/json/system/widget_types/fluid_pressure_progress_bar_with_background.json
index ddfdfa5f4d..8000ff00af 100644
--- a/application/src/main/data/json/system/widget_types/fluid_pressure_progress_bar_with_background.json
+++ b/application/src/main/data/json/system/widget_types/fluid_pressure_progress_bar_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/fluid_pressure_range_chart.json b/application/src/main/data/json/system/widget_types/fluid_pressure_range_chart.json
index ff048bbf30..fd948984c9 100644
--- a/application/src/main/data/json/system/widget_types/fluid_pressure_range_chart.json
+++ b/application/src/main/data/json/system/widget_types/fluid_pressure_range_chart.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-range-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-range-chart-widget>",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-range-chart-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/fluid_pressure_range_chart_with_background.json b/application/src/main/data/json/system/widget_types/fluid_pressure_range_chart_with_background.json
index f6f1a325f4..a8e3c8df2c 100644
--- a/application/src/main/data/json/system/widget_types/fluid_pressure_range_chart_with_background.json
+++ b/application/src/main/data/json/system/widget_types/fluid_pressure_range_chart_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-range-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-range-chart-widget>",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-range-chart-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/gauge.json b/application/src/main/data/json/system/widget_types/gauge.json
index 84906f6436..06883eae69 100644
--- a/application/src/main/data/json/system/widget_types/gauge.json
+++ b/application/src/main/data/json/system/widget_types/gauge.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<canvas id=\"digitalGauge\"></canvas>",
     "templateCss": "#gauge {\n    text-align: center;\n   /* margin-left: -100px;\n    margin-right: -100px;*/\n    /*margin-top: -50px;*/\n    \n}\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-digital-gauge-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-digital-simple-gauge-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/ground_temperature_card.json b/application/src/main/data/json/system/widget_types/ground_temperature_card.json
index e4f811e005..77c2c0ccfb 100644
--- a/application/src/main/data/json/system/widget_types/ground_temperature_card.json
+++ b/application/src/main/data/json/system/widget_types/ground_temperature_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Ground temperature', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Ground temperature', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/ground_temperature_card_with_background.json b/application/src/main/data/json/system/widget_types/ground_temperature_card_with_background.json
index b260a7f014..3263548bb2 100644
--- a/application/src/main/data/json/system/widget_types/ground_temperature_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/ground_temperature_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Ground temperature', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Ground temperature', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/ground_temperature_chart_card.json b/application/src/main/data/json/system/widget_types/ground_temperature_chart_card.json
index 9a080ddd19..949e48f9de 100644
--- a/application/src/main/data/json/system/widget_types/ground_temperature_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/ground_temperature_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Ground temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '°C', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'temperature', '°C', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Ground temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '°C', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'temperature', '°C', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/ground_temperature_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/ground_temperature_chart_card_with_background.json
index 8bed4a201c..06bf06bd98 100644
--- a/application/src/main/data/json/system/widget_types/ground_temperature_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/ground_temperature_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Ground temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '°C', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'temperature', '°C', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Ground temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '°C', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'temperature', '°C', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_air_quality_index_card.json b/application/src/main/data/json/system/widget_types/horizontal_air_quality_index_card.json
index cbce40f0b8..8190e9fcaf 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_air_quality_index_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_air_quality_index_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'air', label: 'Air Quality Index', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'air', label: 'Air Quality Index', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_air_quality_index_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_air_quality_index_card_with_background.json
index 64636bc208..2bf3dcbe23 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_air_quality_index_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_air_quality_index_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'air', label: 'Air Quality Index', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'air', label: 'Air Quality Index', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_bar.json b/application/src/main/data/json/system/widget_types/horizontal_bar.json
index ac9a7d76e0..00dfc56e43 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_bar.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_bar.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<canvas id=\"digitalGauge\"></canvas>\n",
     "templateCss": "#gauge {\n    text-align: center;\n   /* margin-left: -100px;\n    margin-right: -100px;*/\n    /*margin-top: -50px;*/\n    \n}\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-digital-gauge-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-digital-simple-gauge-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_carbon_monoxide__co__card.json b/application/src/main/data/json/system/widget_types/horizontal_carbon_monoxide__co__card.json
index 4c640f2250..02482fb5c9 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_carbon_monoxide__co__card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_carbon_monoxide__co__card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'carbon', label: 'Carbon monoxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'carbon', label: 'Carbon monoxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_carbon_monoxide__co__card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_carbon_monoxide__co__card_with_background.json
index 674d6e6c87..38391e23d6 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_carbon_monoxide__co__card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_carbon_monoxide__co__card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'carbon', label: 'Carbon monoxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'carbon', label: 'Carbon monoxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_co2_card.json b/application/src/main/data/json/system/widget_types/horizontal_co2_card.json
index a44599a2b6..e6c8e1eb6d 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_co2_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_co2_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'co2', label: 'CO2 level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'co2', label: 'CO2 level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_co2_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_co2_card_with_background.json
index e0a21675ce..34a4e1aba4 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_co2_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_co2_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'co2', label: 'CO2 level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'co2', label: 'CO2 level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_doughnut.json b/application/src/main/data/json/system/widget_types/horizontal_doughnut.json
index 050984268c..7dd001ae96 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_doughnut.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_doughnut.json
@@ -11,9 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-doughnut-widget \n    [ctx]=\"ctx\">\n</tb-doughnut-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.doughnutWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.doughnutWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '380px',\n        previewHeight: '220px',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        horizontal: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind power', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar power', type: 'timeseries', color: '#FF4D5A' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.doughnutWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.doughnutWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '380px',\n        previewHeight: '220px',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        horizontal: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind power', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar power', type: 'timeseries', color: '#FF4D5A' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsDirective": "tb-doughnut-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-doughnut-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_efficiency_card.json b/application/src/main/data/json/system/widget_types/horizontal_efficiency_card.json
index 5a38b4f538..a955d68869 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_efficiency_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_efficiency_card.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "#container {\n    overflow: auto;\n}\n\n.tbDatasource-container {\n    margin: 5px;\n    padding: 8px;\n}\n\n.tbDatasource-title {\n    font-size: 1.200rem;\n    font-weight: 500;\n    padding-bottom: 10px;\n}\n\n.tbDatasource-table {\n    width: 100%;\n    box-shadow: 0 0 10px #ccc;\n    border-collapse: collapse;\n    white-space: nowrap;\n    font-size: 1.000rem;\n    color: #757575;\n}\n\n.tbDatasource-table td {\n    position: relative;\n    border-top: 1px solid rgba(0, 0, 0, 0.12);\n    border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n    padding: 0px 18px;\n    box-sizing: border-box;\n}",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_efficiency_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_efficiency_card_with_background.json
index dd5e3f4f92..78f8863965 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_efficiency_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_efficiency_card_with_background.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'efficiency', label: 'Efficiency', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_flooding_level_card.json b/application/src/main/data/json/system/widget_types/horizontal_flooding_level_card.json
index 9308f355f8..333d983be9 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_flooding_level_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_flooding_level_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flooding', label: 'Flooding level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flooding', label: 'Flooding level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_flooding_level_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_flooding_level_card_with_background.json
index 6c7836f4e8..7c6794b4f7 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_flooding_level_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_flooding_level_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flooding', label: 'Flooding level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flooding', label: 'Flooding level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_flow_rate_card.json b/application/src/main/data/json/system/widget_types/horizontal_flow_rate_card.json
index 4282e935ba..15aca34b02 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_flow_rate_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_flow_rate_card.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "#container {\n    overflow: auto;\n}\n\n.tbDatasource-container {\n    margin: 5px;\n    padding: 8px;\n}\n\n.tbDatasource-title {\n    font-size: 1.200rem;\n    font-weight: 500;\n    padding-bottom: 10px;\n}\n\n.tbDatasource-table {\n    width: 100%;\n    box-shadow: 0 0 10px #ccc;\n    border-collapse: collapse;\n    white-space: nowrap;\n    font-size: 1.000rem;\n    color: #757575;\n}\n\n.tbDatasource-table td {\n    position: relative;\n    border-top: 1px solid rgba(0, 0, 0, 0.12);\n    border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n    padding: 0px 18px;\n    box-sizing: border-box;\n}",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow rate', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow rate', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_flow_rate_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_flow_rate_card_with_background.json
index d94d18f420..4f6de487cd 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_flow_rate_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_flow_rate_card_with_background.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow rate', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'flowRate', label: 'Flow rate', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_fluid_pressure_card.json b/application/src/main/data/json/system/widget_types/horizontal_fluid_pressure_card.json
index 73918c8890..b9432be3ca 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_fluid_pressure_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_fluid_pressure_card.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "#container {\n    overflow: auto;\n}\n\n.tbDatasource-container {\n    margin: 5px;\n    padding: 8px;\n}\n\n.tbDatasource-title {\n    font-size: 1.200rem;\n    font-weight: 500;\n    padding-bottom: 10px;\n}\n\n.tbDatasource-table {\n    width: 100%;\n    box-shadow: 0 0 10px #ccc;\n    border-collapse: collapse;\n    white-space: nowrap;\n    font-size: 1.000rem;\n    color: #757575;\n}\n\n.tbDatasource-table td {\n    position: relative;\n    border-top: 1px solid rgba(0, 0, 0, 0.12);\n    border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n    padding: 0px 18px;\n    box-sizing: border-box;\n}",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_fluid_pressure_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_fluid_pressure_card_with_background.json
index df6a8ab793..5598b8ed1c 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_fluid_pressure_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_fluid_pressure_card_with_background.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_ground_temperature_card.json b/application/src/main/data/json/system/widget_types/horizontal_ground_temperature_card.json
index 8f9f9b2674..6b0f064707 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_ground_temperature_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_ground_temperature_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Ground temperature', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Ground temperature', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_ground_temperature_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_ground_temperature_card_with_background.json
index a5e145a4dc..bb03947926 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_ground_temperature_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_ground_temperature_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Ground temperature', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Ground temperature', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_humidity_card.json b/application/src/main/data/json/system/widget_types/horizontal_humidity_card.json
index 30a76e27e3..fa576d2ee0 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_humidity_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_humidity_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_humidity_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_humidity_card_with_background.json
index c1105ef14b..450d4046f3 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_humidity_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_humidity_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_illuminance_card.json b/application/src/main/data/json/system/widget_types/horizontal_illuminance_card.json
index 3ca596a10b..456268a8fa 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_illuminance_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_illuminance_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_illuminance_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_illuminance_card_with_background.json
index af0f1f9cb6..a3ff36784f 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_illuminance_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_illuminance_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_individual_allergy_index__iai__card.json b/application/src/main/data/json/system/widget_types/horizontal_individual_allergy_index__iai__card.json
index 6c5cc7de39..8cd5159aab 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_individual_allergy_index__iai__card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_individual_allergy_index__iai__card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'IAI_level', label: 'IAI', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'IAI_level', label: 'IAI', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_individual_allergy_index__iai__card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_individual_allergy_index__iai__card_with_background.json
index d24f1c0312..8cc3664ad4 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_individual_allergy_index__iai__card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_individual_allergy_index__iai__card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'IAI_level', label: 'IAI', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'IAI_level', label: 'IAI', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_leaf_wetness_card.json b/application/src/main/data/json/system/widget_types/horizontal_leaf_wetness_card.json
index 06776f0710..f31a0a7bb3 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_leaf_wetness_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_leaf_wetness_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'leaf', label: 'Leaf wetness', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'leaf', label: 'Leaf wetness', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_leaf_wetness_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_leaf_wetness_card_with_background.json
index 925bfb22d2..637c6182cc 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_leaf_wetness_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_leaf_wetness_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'leaf', label: 'Leaf wetness', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'leaf', label: 'Leaf wetness', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_nitrogen_dioxide__no2__card.json b/application/src/main/data/json/system/widget_types/horizontal_nitrogen_dioxide__no2__card.json
index 27aa2f73e3..ce820784bd 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_nitrogen_dioxide__no2__card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_nitrogen_dioxide__no2__card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'nitrogen', label: 'Nitrogen dioxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'nitrogen', label: 'Nitrogen dioxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_nitrogen_dioxide__no2__card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_nitrogen_dioxide__no2__card_with_background.json
index 1dc68ca8e8..d36eb56e95 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_nitrogen_dioxide__no2__card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_nitrogen_dioxide__no2__card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'nitrogen', label: 'Nitrogen dioxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'nitrogen', label: 'Nitrogen dioxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_noise_level_card.json b/application/src/main/data/json/system/widget_types/horizontal_noise_level_card.json
index a389ad0d36..a6a5cc1004 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_noise_level_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_noise_level_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'noise', label: 'Noise level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'noise', label: 'Noise level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_noise_level_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_noise_level_card_with_background.json
index d19fb98367..02d041e1d6 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_noise_level_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_noise_level_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'noise', label: 'Noise level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'noise', label: 'Noise level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_ozone__o3__card.json b/application/src/main/data/json/system/widget_types/horizontal_ozone__o3__card.json
index cd0c5c66a0..61a63dd7b6 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_ozone__o3__card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_ozone__o3__card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'ozone', label: 'Ozone', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'ozone', label: 'Ozone', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_ozone__o3__card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_ozone__o3__card_with_background.json
index e97eb67221..0a0886ca7b 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_ozone__o3__card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_ozone__o3__card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'ozone', label: 'Ozone', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'ozone', label: 'Ozone', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_pm10_card.json b/application/src/main/data/json/system/widget_types/horizontal_pm10_card.json
index 3d864069e5..5f9eb7d645 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_pm10_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_pm10_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm10', label: 'PM10', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm10', label: 'PM10', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_pm10_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_pm10_card_with_background.json
index af46fc95ac..ca3b39eac9 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_pm10_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_pm10_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm10', label: 'PM10', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm10', label: 'PM10', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_pm2_5_card.json b/application/src/main/data/json/system/widget_types/horizontal_pm2_5_card.json
index 583c357ca2..617031cc7e 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_pm2_5_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_pm2_5_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm2.5', label: 'PM2.5', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm2.5', label: 'PM2.5', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_pm2_5_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_pm2_5_card_with_background.json
index caefc4932e..f85406bd75 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_pm2_5_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_pm2_5_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm2.5', label: 'PM2.5', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm2.5', label: 'PM2.5', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_power_consumption_card.json b/application/src/main/data/json/system/widget_types/horizontal_power_consumption_card.json
index cf92803007..b7d93c0cbc 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_power_consumption_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_power_consumption_card.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "#container {\n    overflow: auto;\n}\n\n.tbDatasource-container {\n    margin: 5px;\n    padding: 8px;\n}\n\n.tbDatasource-title {\n    font-size: 1.200rem;\n    font-weight: 500;\n    padding-bottom: 10px;\n}\n\n.tbDatasource-table {\n    width: 100%;\n    box-shadow: 0 0 10px #ccc;\n    border-collapse: collapse;\n    white-space: nowrap;\n    font-size: 1.000rem;\n    color: #757575;\n}\n\n.tbDatasource-table td {\n    position: relative;\n    border-top: 1px solid rgba(0, 0, 0, 0.12);\n    border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n    padding: 0px 18px;\n    box-sizing: border-box;\n}",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'powerConsumption', label: 'Power consumption', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'powerConsumption', label: 'Power consumption', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_power_consumption_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_power_consumption_card_with_background.json
index 726a3b7130..d74452d787 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_power_consumption_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_power_consumption_card_with_background.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'powerConsumption', label: 'Power consumption', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'powerConsumption', label: 'Power consumption', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_pressure_card.json b/application/src/main/data/json/system/widget_types/horizontal_pressure_card.json
index 7ce55a56a5..64ab997988 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_pressure_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_pressure_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_pressure_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_pressure_card_with_background.json
index b0b4bb0828..0b4d9dbf35 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_pressure_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_pressure_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_pump_vibration_card.json b/application/src/main/data/json/system/widget_types/horizontal_pump_vibration_card.json
index b6b3f505ab..de91fdde12 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_pump_vibration_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_pump_vibration_card.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "#container {\n    overflow: auto;\n}\n\n.tbDatasource-container {\n    margin: 5px;\n    padding: 8px;\n}\n\n.tbDatasource-title {\n    font-size: 1.200rem;\n    font-weight: 500;\n    padding-bottom: 10px;\n}\n\n.tbDatasource-table {\n    width: 100%;\n    box-shadow: 0 0 10px #ccc;\n    border-collapse: collapse;\n    white-space: nowrap;\n    font-size: 1.000rem;\n    color: #757575;\n}\n\n.tbDatasource-table td {\n    position: relative;\n    border-top: 1px solid rgba(0, 0, 0, 0.12);\n    border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n    padding: 0px 18px;\n    box-sizing: border-box;\n}",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'vibration', label: 'Vibration', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'vibration', label: 'Vibration', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_pump_vibration_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_pump_vibration_card_with_background.json
index 267f673a40..c787de5a2c 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_pump_vibration_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_pump_vibration_card_with_background.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'vibration', label: 'Vibration', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'vibration', label: 'Vibration', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_radon_level_card.json b/application/src/main/data/json/system/widget_types/horizontal_radon_level_card.json
index c3d8b738d2..e5edbd240c 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_radon_level_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_radon_level_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'radon', label: 'Radon level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'radon', label: 'Radon level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_radon_level_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_radon_level_card_with_background.json
index 6bcedfd62d..f15bce1cb9 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_radon_level_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_radon_level_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'radon', label: 'Radon level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'radon', label: 'Radon level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_rainfall_card.json b/application/src/main/data/json/system/widget_types/horizontal_rainfall_card.json
index 126da6fb12..22a7cf3675 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_rainfall_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_rainfall_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rainfall', label: 'Rainfall', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rainfall', label: 'Rainfall', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_rainfall_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_rainfall_card_with_background.json
index 6c199789e1..19f0333ac8 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_rainfall_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_rainfall_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rainfall', label: 'Rainfall', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rainfall', label: 'Rainfall', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_rotational_speed_card.json b/application/src/main/data/json/system/widget_types/horizontal_rotational_speed_card.json
index 22b8ffaba0..6e041e0fd8 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_rotational_speed_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_rotational_speed_card.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "#container {\n    overflow: auto;\n}\n\n.tbDatasource-container {\n    margin: 5px;\n    padding: 8px;\n}\n\n.tbDatasource-title {\n    font-size: 1.200rem;\n    font-weight: 500;\n    padding-bottom: 10px;\n}\n\n.tbDatasource-table {\n    width: 100%;\n    box-shadow: 0 0 10px #ccc;\n    border-collapse: collapse;\n    white-space: nowrap;\n    font-size: 1.000rem;\n    color: #757575;\n}\n\n.tbDatasource-table td {\n    position: relative;\n    border-top: 1px solid rgba(0, 0, 0, 0.12);\n    border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n    padding: 0px 18px;\n    box-sizing: border-box;\n}",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_rotational_speed_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_rotational_speed_card_with_background.json
index 3f74ac8bf0..90cc5dbb51 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_rotational_speed_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_rotational_speed_card_with_background.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_snow_depth_card.json b/application/src/main/data/json/system/widget_types/horizontal_snow_depth_card.json
index e7461d3019..d94b6c218a 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_snow_depth_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_snow_depth_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'snow', label: 'Snow depth', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'snow', label: 'Snow depth', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_snow_depth_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_snow_depth_card_with_background.json
index 66acd77e74..da6e3f16cb 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_snow_depth_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_snow_depth_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'snow', label: 'Snow depth', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'snow', label: 'Snow depth', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_soil_moisture_card.json b/application/src/main/data/json/system/widget_types/horizontal_soil_moisture_card.json
index 747e76d202..7c8094006c 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_soil_moisture_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_soil_moisture_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'soilMoisture', label: 'Soil Moisture', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'soilMoisture', label: 'Soil Moisture', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_soil_moisture_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_soil_moisture_card_with_background.json
index a3705a18b9..970acb6bc6 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_soil_moisture_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_soil_moisture_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'soilMoisture', label: 'Soil Moisture', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'soilMoisture', label: 'Soil Moisture', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_solar_radiation_card.json b/application/src/main/data/json/system/widget_types/horizontal_solar_radiation_card.json
index 34f31b27f8..c9b3cbfa93 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_solar_radiation_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_solar_radiation_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'radiation', label: 'Solar Radiation', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'radiation', label: 'Solar Radiation', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_solar_radiation_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_solar_radiation_card_with_background.json
index b6741bc60d..7220911d6d 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_solar_radiation_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_solar_radiation_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'radiation', label: 'Solar Radiation', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'radiation', label: 'Solar Radiation', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_sulfur_dioxide__so2__card.json b/application/src/main/data/json/system/widget_types/horizontal_sulfur_dioxide__so2__card.json
index 463f10deb4..ad8d850963 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_sulfur_dioxide__so2__card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_sulfur_dioxide__so2__card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'sulfur', label: 'Sulfur dioxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'sulfur', label: 'Sulfur dioxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_sulfur_dioxide__so2__card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_sulfur_dioxide__so2__card_with_background.json
index eab08f991d..f8c2601a28 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_sulfur_dioxide__so2__card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_sulfur_dioxide__so2__card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'sulfur', label: 'Sulfur dioxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'sulfur', label: 'Sulfur dioxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_temperature_card.json b/application/src/main/data/json/system/widget_types/horizontal_temperature_card.json
index 5e2ae53946..d38d5412bd 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_temperature_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_temperature_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_temperature_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_temperature_card_with_background.json
index 8dceb80485..6ed35afab5 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_temperature_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_temperature_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_uv_index_card.json b/application/src/main/data/json/system/widget_types/horizontal_uv_index_card.json
index 0da71659e0..57eed149c4 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_uv_index_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_uv_index_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'uv', label: 'UV Index', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'uv', label: 'UV Index', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_uv_index_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_uv_index_card_with_background.json
index c4e8e3cc5c..2a542e7c62 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_uv_index_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_uv_index_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'uv', label: 'UV Index', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'uv', label: 'UV Index', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_value_card.json b/application/src/main/data/json/system/widget_types/horizontal_value_card.json
index 98a4d2be03..7ae3422352 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_value_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_value_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_vibration_card.json b/application/src/main/data/json/system/widget_types/horizontal_vibration_card.json
index c2f80cdaa8..df72fa560f 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_vibration_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_vibration_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'vibration', label: 'Vibration', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'vibration', label: 'Vibration', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_vibration_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_vibration_card_with_background.json
index b3a137645e..c7137ba291 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_vibration_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_vibration_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'vibration', label: 'Vibration', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'vibration', label: 'Vibration', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_visibility_card.json b/application/src/main/data/json/system/widget_types/horizontal_visibility_card.json
index 006d609f59..f36ba0adca 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_visibility_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_visibility_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'visibility', label: 'Visibility', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'visibility', label: 'Visibility', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_visibility_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_visibility_card_with_background.json
index a068142749..e278d5c9a6 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_visibility_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_visibility_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'visibility', label: 'Visibility', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'visibility', label: 'Visibility', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_volatile_organic_compounds_card.json b/application/src/main/data/json/system/widget_types/horizontal_volatile_organic_compounds_card.json
index 06c7b5230a..cccfe7c18b 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_volatile_organic_compounds_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_volatile_organic_compounds_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'voc', label: 'VOCs', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'voc', label: 'VOCs', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_volatile_organic_compounds_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_volatile_organic_compounds_card_with_background.json
index c79da9f1f3..a97f139a51 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_volatile_organic_compounds_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_volatile_organic_compounds_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'voc', label: 'VOCs', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'voc', label: 'VOCs', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_wind_speed_card.json b/application/src/main/data/json/system/widget_types/horizontal_wind_speed_card.json
index 0ea7d6e510..9883066d90 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_wind_speed_card.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_wind_speed_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'speed', label: 'Wind Speed', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'speed', label: 'Wind Speed', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/horizontal_wind_speed_card_with_background.json b/application/src/main/data/json/system/widget_types/horizontal_wind_speed_card_with_background.json
index f63e7ff659..0b6700ebc8 100644
--- a/application/src/main/data/json/system/widget_types/horizontal_wind_speed_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/horizontal_wind_speed_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'speed', label: 'Wind Speed', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'speed', label: 'Wind Speed', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/humidity_card.json b/application/src/main/data/json/system/widget_types/humidity_card.json
index 54e47109db..28b7c88e7c 100644
--- a/application/src/main/data/json/system/widget_types/humidity_card.json
+++ b/application/src/main/data/json/system/widget_types/humidity_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/humidity_card_with_background.json b/application/src/main/data/json/system/widget_types/humidity_card_with_background.json
index 7fcf1acfc1..2f33b5ec33 100644
--- a/application/src/main/data/json/system/widget_types/humidity_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/humidity_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/humidity_chart_card.json b/application/src/main/data/json/system/widget_types/humidity_chart_card.json
index 07bee5bde1..dad80f9797 100644
--- a/application/src/main/data/json/system/widget_types/humidity_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/humidity_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'humidity', label: 'Humidity', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'humidity', '%', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'humidity', label: 'Humidity', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'humidity', '%', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/humidity_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/humidity_chart_card_with_background.json
index 67fdb0a476..be13ef3285 100644
--- a/application/src/main/data/json/system/widget_types/humidity_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/humidity_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'humidity', label: 'Humidity', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'humidity', '%', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'humidity', label: 'Humidity', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'humidity', '%', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/humidity_progress_bar.json b/application/src/main/data/json/system/widget_types/humidity_progress_bar.json
index 2956d52988..b8d80a2040 100644
--- a/application/src/main/data/json/system/widget_types/humidity_progress_bar.json
+++ b/application/src/main/data/json/system/widget_types/humidity_progress_bar.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'humidity', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'humidity', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/humidity_progress_bar_with_background.json b/application/src/main/data/json/system/widget_types/humidity_progress_bar_with_background.json
index 85efb6d401..4d3ddc7d21 100644
--- a/application/src/main/data/json/system/widget_types/humidity_progress_bar_with_background.json
+++ b/application/src/main/data/json/system/widget_types/humidity_progress_bar_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'humidity', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'humidity', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/illuminance_card.json b/application/src/main/data/json/system/widget_types/illuminance_card.json
index 244dfdf395..6e24dcaa4a 100644
--- a/application/src/main/data/json/system/widget_types/illuminance_card.json
+++ b/application/src/main/data/json/system/widget_types/illuminance_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/illuminance_card_with_background.json b/application/src/main/data/json/system/widget_types/illuminance_card_with_background.json
index 1b0d7f3f3f..0c990bb1b9 100644
--- a/application/src/main/data/json/system/widget_types/illuminance_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/illuminance_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/illuminance_chart_card.json b/application/src/main/data/json/system/widget_types/illuminance_chart_card.json
index a5c5815756..f664cc0d27 100644
--- a/application/src/main/data/json/system/widget_types/illuminance_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/illuminance_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'illuminance', label: 'Illuminance', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'lx', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'illuminance', 'lx', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'illuminance', label: 'Illuminance', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'lx', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'illuminance', 'lx', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/illuminance_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/illuminance_chart_card_with_background.json
index c5ba06945a..7849cad5e5 100644
--- a/application/src/main/data/json/system/widget_types/illuminance_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/illuminance_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'illuminance', label: 'Illuminance', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'lx', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'illuminance', 'lx', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'illuminance', label: 'Illuminance', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'lx', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'illuminance', 'lx', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/illuminance_progress_bar.json b/application/src/main/data/json/system/widget_types/illuminance_progress_bar.json
index 97b5dfd54d..de3b03cf95 100644
--- a/application/src/main/data/json/system/widget_types/illuminance_progress_bar.json
+++ b/application/src/main/data/json/system/widget_types/illuminance_progress_bar.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/illuminance_progress_bar_with_background.json b/application/src/main/data/json/system/widget_types/illuminance_progress_bar_with_background.json
index ff46919f4a..181208cb24 100644
--- a/application/src/main/data/json/system/widget_types/illuminance_progress_bar_with_background.json
+++ b/application/src/main/data/json/system/widget_types/illuminance_progress_bar_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/individual_allergy_index__iai__card.json b/application/src/main/data/json/system/widget_types/individual_allergy_index__iai__card.json
index 374ea233b2..a578136d2b 100644
--- a/application/src/main/data/json/system/widget_types/individual_allergy_index__iai__card.json
+++ b/application/src/main/data/json/system/widget_types/individual_allergy_index__iai__card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'IAI_level', label: 'IAI', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'IAI_level', label: 'IAI', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/individual_allergy_index__iai__card_with_background.json b/application/src/main/data/json/system/widget_types/individual_allergy_index__iai__card_with_background.json
index e6392a4d45..7f6cfe39a5 100644
--- a/application/src/main/data/json/system/widget_types/individual_allergy_index__iai__card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/individual_allergy_index__iai__card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'IAI_level', label: 'IAI', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'IAI_level', label: 'IAI', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/individual_allergy_index__iai__chart_card.json b/application/src/main/data/json/system/widget_types/individual_allergy_index__iai__chart_card.json
index fcce913550..13d72efffe 100644
--- a/application/src/main/data/json/system/widget_types/individual_allergy_index__iai__chart_card.json
+++ b/application/src/main/data/json/system/widget_types/individual_allergy_index__iai__chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'IAI_level', label: 'IAI', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: null, decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'IAI_level', null, 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'IAI_level', label: 'IAI', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: null, decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'IAI_level', null, 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/individual_allergy_index__iai__chart_card_with_background.json b/application/src/main/data/json/system/widget_types/individual_allergy_index__iai__chart_card_with_background.json
index 67de54b88e..2fcbe2bed8 100644
--- a/application/src/main/data/json/system/widget_types/individual_allergy_index__iai__chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/individual_allergy_index__iai__chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'IAI_level', label: 'IAI', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: null, decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'IAI_level', null, 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'IAI_level', label: 'IAI', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: null, decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'IAI_level', null, 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/indoor_co2_card.json b/application/src/main/data/json/system/widget_types/indoor_co2_card.json
index 897df21989..1133460238 100644
--- a/application/src/main/data/json/system/widget_types/indoor_co2_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_co2_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'co2', label: 'CO2 level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'co2', label: 'CO2 level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_co2_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_co2_card_with_background.json
index dc47399cd2..e1ddcb3b6b 100644
--- a/application/src/main/data/json/system/widget_types/indoor_co2_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_co2_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'co2', label: 'CO2 level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'co2', label: 'CO2 level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_co2_chart_card.json b/application/src/main/data/json/system/widget_types/indoor_co2_chart_card.json
index 6b1dbea948..ba1df65908 100644
--- a/application/src/main/data/json/system/widget_types/indoor_co2_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_co2_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'co2', label: 'CO2 level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'ppm', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'co2', 'ppm', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'co2', label: 'CO2 level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'ppm', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'co2', 'ppm', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/indoor_co2_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_co2_chart_card_with_background.json
index a9a7fe83ce..c4abd4a0b6 100644
--- a/application/src/main/data/json/system/widget_types/indoor_co2_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_co2_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'co2', label: 'CO2 level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'ppm', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'co2', 'ppm', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'co2', label: 'CO2 level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'ppm', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'co2', 'ppm', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/indoor_horizontal_co2_card.json b/application/src/main/data/json/system/widget_types/indoor_horizontal_co2_card.json
index 5cf2d3213e..b453998ddb 100644
--- a/application/src/main/data/json/system/widget_types/indoor_horizontal_co2_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_horizontal_co2_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'co2', label: 'CO2 level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'co2', label: 'CO2 level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_horizontal_co2_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_horizontal_co2_card_with_background.json
index eefc2ef17e..4ca050fd88 100644
--- a/application/src/main/data/json/system/widget_types/indoor_horizontal_co2_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_horizontal_co2_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'co2', label: 'CO2 level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'co2', label: 'CO2 level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_horizontal_humidity_card.json b/application/src/main/data/json/system/widget_types/indoor_horizontal_humidity_card.json
index 6e2be4338f..0c62fdfe5b 100644
--- a/application/src/main/data/json/system/widget_types/indoor_horizontal_humidity_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_horizontal_humidity_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_horizontal_humidity_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_horizontal_humidity_card_with_background.json
index d2d26f447a..04f8faefcb 100644
--- a/application/src/main/data/json/system/widget_types/indoor_horizontal_humidity_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_horizontal_humidity_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_horizontal_illuminance_card.json b/application/src/main/data/json/system/widget_types/indoor_horizontal_illuminance_card.json
index 6863d6e67b..b921411cd8 100644
--- a/application/src/main/data/json/system/widget_types/indoor_horizontal_illuminance_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_horizontal_illuminance_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_horizontal_illuminance_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_horizontal_illuminance_card_with_background.json
index a280664879..d81be63a9c 100644
--- a/application/src/main/data/json/system/widget_types/indoor_horizontal_illuminance_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_horizontal_illuminance_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_horizontal_pm10_card.json b/application/src/main/data/json/system/widget_types/indoor_horizontal_pm10_card.json
index b670137a93..5d315d0e01 100644
--- a/application/src/main/data/json/system/widget_types/indoor_horizontal_pm10_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_horizontal_pm10_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm10', label: 'PM10', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm10', label: 'PM10', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_horizontal_pm10_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_horizontal_pm10_card_with_background.json
index 375fb23376..ea3833494c 100644
--- a/application/src/main/data/json/system/widget_types/indoor_horizontal_pm10_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_horizontal_pm10_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm10', label: 'PM10', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm10', label: 'PM10', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_horizontal_pm2_5_card.json b/application/src/main/data/json/system/widget_types/indoor_horizontal_pm2_5_card.json
index 60a3d46efc..5ae0d04108 100644
--- a/application/src/main/data/json/system/widget_types/indoor_horizontal_pm2_5_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_horizontal_pm2_5_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm2.5', label: 'PM2.5', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm2.5', label: 'PM2.5', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_horizontal_pm2_5_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_horizontal_pm2_5_card_with_background.json
index a6e79d4b01..6e47de67a8 100644
--- a/application/src/main/data/json/system/widget_types/indoor_horizontal_pm2_5_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_horizontal_pm2_5_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm2.5', label: 'PM2.5', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm2.5', label: 'PM2.5', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_horizontal_temperature_card.json b/application/src/main/data/json/system/widget_types/indoor_horizontal_temperature_card.json
index 4e943306c6..4b5f76317c 100644
--- a/application/src/main/data/json/system/widget_types/indoor_horizontal_temperature_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_horizontal_temperature_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_horizontal_temperature_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_horizontal_temperature_card_with_background.json
index c2982d6241..1b1231720f 100644
--- a/application/src/main/data/json/system/widget_types/indoor_horizontal_temperature_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_horizontal_temperature_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '420px',\n        previewHeight: '90px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_humidity_card.json b/application/src/main/data/json/system/widget_types/indoor_humidity_card.json
index 845e943dca..1310fcf9e0 100644
--- a/application/src/main/data/json/system/widget_types/indoor_humidity_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_humidity_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_humidity_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_humidity_card_with_background.json
index fe593e3766..998d0cbe8b 100644
--- a/application/src/main/data/json/system/widget_types/indoor_humidity_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_humidity_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_humidity_chart_card.json b/application/src/main/data/json/system/widget_types/indoor_humidity_chart_card.json
index 35df48a4f5..267cc65a5f 100644
--- a/application/src/main/data/json/system/widget_types/indoor_humidity_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_humidity_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'humidity', label: 'Humidity', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'humidity', '%', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'humidity', label: 'Humidity', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'humidity', '%', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/indoor_humidity_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_humidity_chart_card_with_background.json
index 8b7b5fdd3f..82c9bbeaf6 100644
--- a/application/src/main/data/json/system/widget_types/indoor_humidity_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_humidity_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'humidity', label: 'Humidity', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'humidity', '%', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'humidity', label: 'Humidity', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'humidity', '%', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/indoor_humidity_progress_bar.json b/application/src/main/data/json/system/widget_types/indoor_humidity_progress_bar.json
index 29f9fdf6d5..bc02349832 100644
--- a/application/src/main/data/json/system/widget_types/indoor_humidity_progress_bar.json
+++ b/application/src/main/data/json/system/widget_types/indoor_humidity_progress_bar.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'humidity', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'humidity', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_humidity_progress_bar_with_background.json b/application/src/main/data/json/system/widget_types/indoor_humidity_progress_bar_with_background.json
index 881e9bee48..8f3f721ec5 100644
--- a/application/src/main/data/json/system/widget_types/indoor_humidity_progress_bar_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_humidity_progress_bar_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'humidity', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'humidity', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_illuminance_card.json b/application/src/main/data/json/system/widget_types/indoor_illuminance_card.json
index e96f71c68a..73732e8f4b 100644
--- a/application/src/main/data/json/system/widget_types/indoor_illuminance_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_illuminance_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_illuminance_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_illuminance_card_with_background.json
index b03d16c233..b6f143b9f8 100644
--- a/application/src/main/data/json/system/widget_types/indoor_illuminance_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_illuminance_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_illuminance_chart_card.json b/application/src/main/data/json/system/widget_types/indoor_illuminance_chart_card.json
index 70203cbcc8..9ea21c112d 100644
--- a/application/src/main/data/json/system/widget_types/indoor_illuminance_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_illuminance_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'illuminance', label: 'Illuminance', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'lx', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'illuminance', 'lx', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'illuminance', label: 'Illuminance', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'lx', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'illuminance', 'lx', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/indoor_illuminance_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_illuminance_chart_card_with_background.json
index e681b648ca..6badbfbfa0 100644
--- a/application/src/main/data/json/system/widget_types/indoor_illuminance_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_illuminance_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'illuminance', label: 'Illuminance', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'lx', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'illuminance', 'lx', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'illuminance', label: 'Illuminance', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'lx', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'illuminance', 'lx', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/indoor_illuminance_progress_bar.json b/application/src/main/data/json/system/widget_types/indoor_illuminance_progress_bar.json
index b816f24f95..d58ec4f73d 100644
--- a/application/src/main/data/json/system/widget_types/indoor_illuminance_progress_bar.json
+++ b/application/src/main/data/json/system/widget_types/indoor_illuminance_progress_bar.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_illuminance_progress_bar_with_background.json b/application/src/main/data/json/system/widget_types/indoor_illuminance_progress_bar_with_background.json
index 8fe29d9fac..676428dbcd 100644
--- a/application/src/main/data/json/system/widget_types/indoor_illuminance_progress_bar_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_illuminance_progress_bar_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'illuminance', label: 'Illuminance', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_pm10_card.json b/application/src/main/data/json/system/widget_types/indoor_pm10_card.json
index 673eba5d9e..1a58d29bd4 100644
--- a/application/src/main/data/json/system/widget_types/indoor_pm10_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_pm10_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm10', label: 'PM10', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm10', label: 'PM10', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_pm10_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_pm10_card_with_background.json
index f861682a7d..14f1445ebc 100644
--- a/application/src/main/data/json/system/widget_types/indoor_pm10_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_pm10_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm10', label: 'PM10', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm10', label: 'PM10', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_pm10_chart_card.json b/application/src/main/data/json/system/widget_types/indoor_pm10_chart_card.json
index 9c127fc03e..b04b7063cf 100644
--- a/application/src/main/data/json/system/widget_types/indoor_pm10_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_pm10_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm10', label: 'PM10', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pm10', 'µg/m³', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm10', label: 'PM10', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pm10', 'µg/m³', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/indoor_pm10_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_pm10_chart_card_with_background.json
index ca2b6be6bd..9eb69e6a26 100644
--- a/application/src/main/data/json/system/widget_types/indoor_pm10_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_pm10_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm10', label: 'PM10', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pm10', 'µg/m³', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm10', label: 'PM10', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pm10', 'µg/m³', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/indoor_pm2_5_card.json b/application/src/main/data/json/system/widget_types/indoor_pm2_5_card.json
index 46a811d0d3..990b7caecc 100644
--- a/application/src/main/data/json/system/widget_types/indoor_pm2_5_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_pm2_5_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm2.5', label: 'PM2.5', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm2.5', label: 'PM2.5', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_pm2_5_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_pm2_5_card_with_background.json
index bf45e15379..ef1fde22b2 100644
--- a/application/src/main/data/json/system/widget_types/indoor_pm2_5_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_pm2_5_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm2.5', label: 'PM2.5', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm2.5', label: 'PM2.5', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_pm2_5_chart_card.json b/application/src/main/data/json/system/widget_types/indoor_pm2_5_chart_card.json
index cc9da95719..82d4e3af9a 100644
--- a/application/src/main/data/json/system/widget_types/indoor_pm2_5_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_pm2_5_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm2.5', label: 'PM2.5', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pm2.5', 'µg/m³', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm2.5', label: 'PM2.5', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pm2.5', 'µg/m³', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/indoor_pm2_5_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_pm2_5_chart_card_with_background.json
index 32329122cd..9ee11386e6 100644
--- a/application/src/main/data/json/system/widget_types/indoor_pm2_5_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_pm2_5_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm2.5', label: 'PM2.5', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pm2.5', 'µg/m³', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm2.5', label: 'PM2.5', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pm2.5', 'µg/m³', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/indoor_simple_co2_chart_card.json b/application/src/main/data/json/system/widget_types/indoor_simple_co2_chart_card.json
index 043cced158..0a442fa4e0 100644
--- a/application/src/main/data/json/system/widget_types/indoor_simple_co2_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_simple_co2_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'co2', label: 'CO2 level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'co2', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'co2', label: 'CO2 level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'co2', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/indoor_simple_co2_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_simple_co2_chart_card_with_background.json
index 81897e920b..537f95b673 100644
--- a/application/src/main/data/json/system/widget_types/indoor_simple_co2_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_simple_co2_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'co2', label: 'CO2 level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'co2', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'co2', label: 'CO2 level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'co2', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/indoor_simple_humidity_chart_card.json b/application/src/main/data/json/system/widget_types/indoor_simple_humidity_chart_card.json
index 41a59edcae..eb278e4c0f 100644
--- a/application/src/main/data/json/system/widget_types/indoor_simple_humidity_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_simple_humidity_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'humidity', label: 'Humidity', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'humidity', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'humidity', label: 'Humidity', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'humidity', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/indoor_simple_humidity_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_simple_humidity_chart_card_with_background.json
index f20ca512c4..eda7d8919d 100644
--- a/application/src/main/data/json/system/widget_types/indoor_simple_humidity_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_simple_humidity_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'humidity', label: 'Humidity', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'humidity', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'humidity', label: 'Humidity', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'humidity', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/indoor_simple_illuminance_chart_card.json b/application/src/main/data/json/system/widget_types/indoor_simple_illuminance_chart_card.json
index 5d1b345cfd..4362cdf807 100644
--- a/application/src/main/data/json/system/widget_types/indoor_simple_illuminance_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_simple_illuminance_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'illuminance', label: 'Illuminance', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'illuminance', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'illuminance', label: 'Illuminance', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'illuminance', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/indoor_simple_illuminance_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_simple_illuminance_chart_card_with_background.json
index b568ef3034..5652a3693f 100644
--- a/application/src/main/data/json/system/widget_types/indoor_simple_illuminance_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_simple_illuminance_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'illuminance', label: 'Illuminance', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'illuminance', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'illuminance', label: 'Illuminance', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'illuminance', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/indoor_simple_pm10_chart_card.json b/application/src/main/data/json/system/widget_types/indoor_simple_pm10_chart_card.json
index 9157831e1a..995181bff6 100644
--- a/application/src/main/data/json/system/widget_types/indoor_simple_pm10_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_simple_pm10_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm10', label: 'PM10', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pm10', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm10', label: 'PM10', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pm10', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/indoor_simple_pm10_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_simple_pm10_chart_card_with_background.json
index f9caade1bc..26b4c74ca6 100644
--- a/application/src/main/data/json/system/widget_types/indoor_simple_pm10_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_simple_pm10_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm10', label: 'PM10', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pm10', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm10', label: 'PM10', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pm10', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/indoor_simple_pm2_5_chart_card.json b/application/src/main/data/json/system/widget_types/indoor_simple_pm2_5_chart_card.json
index 5e8af6f2a7..550bb8d03e 100644
--- a/application/src/main/data/json/system/widget_types/indoor_simple_pm2_5_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_simple_pm2_5_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm2.5', label: 'PM2.5', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pm2.5', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm2.5', label: 'PM2.5', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pm2.5', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/indoor_simple_pm2_5_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_simple_pm2_5_chart_card_with_background.json
index 0ec8680997..368e31b0f6 100644
--- a/application/src/main/data/json/system/widget_types/indoor_simple_pm2_5_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_simple_pm2_5_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm2.5', label: 'PM2.5', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pm2.5', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm2.5', label: 'PM2.5', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pm2.5', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/indoor_simple_temperature_chart_card.json b/application/src/main/data/json/system/widget_types/indoor_simple_temperature_chart_card.json
index 79da81d760..3b118b8994 100644
--- a/application/src/main/data/json/system/widget_types/indoor_simple_temperature_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_simple_temperature_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'temperature', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'temperature', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/indoor_simple_temperature_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_simple_temperature_chart_card_with_background.json
index 52c7a2087b..e62cbba7fd 100644
--- a/application/src/main/data/json/system/widget_types/indoor_simple_temperature_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_simple_temperature_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'temperature', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'temperature', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/indoor_temperature_card.json b/application/src/main/data/json/system/widget_types/indoor_temperature_card.json
index e463683980..5f55ace191 100644
--- a/application/src/main/data/json/system/widget_types/indoor_temperature_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_temperature_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_temperature_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_temperature_card_with_background.json
index 58cfca89d4..23466d55ec 100644
--- a/application/src/main/data/json/system/widget_types/indoor_temperature_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_temperature_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_temperature_chart_card.json b/application/src/main/data/json/system/widget_types/indoor_temperature_chart_card.json
index 76b8b4136b..c24cb6e5eb 100644
--- a/application/src/main/data/json/system/widget_types/indoor_temperature_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/indoor_temperature_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '°C', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'temperature', '°C', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '°C', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'temperature', '°C', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/indoor_temperature_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/indoor_temperature_chart_card_with_background.json
index bc24e8954f..96e606d3b7 100644
--- a/application/src/main/data/json/system/widget_types/indoor_temperature_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_temperature_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '°C', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'temperature', '°C', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '°C', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'temperature', '°C', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/indoor_temperature_gauge.json b/application/src/main/data/json/system/widget_types/indoor_temperature_gauge.json
index 3fc12e4d18..a935befa6a 100644
--- a/application/src/main/data/json/system/widget_types/indoor_temperature_gauge.json
+++ b/application/src/main/data/json/system/widget_types/indoor_temperature_gauge.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<canvas id=\"radialGauge\"></canvas>\n",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-analogue-radial-gauge-widget-settings",
     "dataKeySettingsDirective": "",
     "hasBasicMode": true,
diff --git a/application/src/main/data/json/system/widget_types/indoor_temperature_progress_bar.json b/application/src/main/data/json/system/widget_types/indoor_temperature_progress_bar.json
index 2bf309eac8..ae5196ce89 100644
--- a/application/src/main/data/json/system/widget_types/indoor_temperature_progress_bar.json
+++ b/application/src/main/data/json/system/widget_types/indoor_temperature_progress_bar.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_temperature_progress_bar_with_background.json b/application/src/main/data/json/system/widget_types/indoor_temperature_progress_bar_with_background.json
index bc5feff62a..e2b6443efe 100644
--- a/application/src/main/data/json/system/widget_types/indoor_temperature_progress_bar_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_temperature_progress_bar_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/indoor_temperature_range_chart.json b/application/src/main/data/json/system/widget_types/indoor_temperature_range_chart.json
index c37099a811..4dcf322cb7 100644
--- a/application/src/main/data/json/system/widget_types/indoor_temperature_range_chart.json
+++ b/application/src/main/data/json/system/widget_types/indoor_temperature_range_chart.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-range-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-range-chart-widget>",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-range-chart-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/indoor_temperature_range_chart_with_background.json b/application/src/main/data/json/system/widget_types/indoor_temperature_range_chart_with_background.json
index 2ea98e8bf9..e8a0752aeb 100644
--- a/application/src/main/data/json/system/widget_types/indoor_temperature_range_chart_with_background.json
+++ b/application/src/main/data/json/system/widget_types/indoor_temperature_range_chart_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-range-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-range-chart-widget>",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-range-chart-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/label___value_card.json b/application/src/main/data/json/system/widget_types/label___value_card.json
index 6963888685..352ee4de48 100644
--- a/application/src/main/data/json/system/widget_types/label___value_card.json
+++ b/application/src/main/data/json/system/widget_types/label___value_card.json
@@ -11,9 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-label-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-label-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.labelValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.labelValueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '280px',\n        previewHeight: '80px',\n        embedTitlePanel: true\n    };\n};\n\nself.actionSources = function() {\n    return {\n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.labelValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.labelValueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        horizontal: true,\n        previewWidth: '280px',\n        previewHeight: '80px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true\n    };\n};\n\nself.actionSources = function() {\n    return {\n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n};\n",
     "settingsDirective": "tb-label-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-label-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/lcd_bar_gauge.json b/application/src/main/data/json/system/widget_types/lcd_bar_gauge.json
index 2e02aebbd5..e5588b104b 100644
--- a/application/src/main/data/json/system/widget_types/lcd_bar_gauge.json
+++ b/application/src/main/data/json/system/widget_types/lcd_bar_gauge.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<canvas id=\"digitalGauge\"></canvas>",
     "templateCss": "#gauge {\n    text-align: center;\n   /* margin-left: -100px;\n    margin-right: -100px;*/\n    /*margin-top: -50px;*/\n    \n}\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-digital-gauge-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-digital-simple-gauge-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/lcd_gauge.json b/application/src/main/data/json/system/widget_types/lcd_gauge.json
index 386ee462d0..fa8faf3255 100644
--- a/application/src/main/data/json/system/widget_types/lcd_gauge.json
+++ b/application/src/main/data/json/system/widget_types/lcd_gauge.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<canvas id=\"digitalGauge\"></canvas>",
     "templateCss": "#gauge {\n    text-align: center;\n   /* margin-left: -100px;\n    margin-right: -100px;*/\n    /*margin-top: -50px;*/\n    \n}\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-digital-gauge-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-digital-simple-gauge-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/leaf_wetness_card.json b/application/src/main/data/json/system/widget_types/leaf_wetness_card.json
index ac40035cf5..65109597fd 100644
--- a/application/src/main/data/json/system/widget_types/leaf_wetness_card.json
+++ b/application/src/main/data/json/system/widget_types/leaf_wetness_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'leaf', label: 'Leaf wetness', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'leaf', label: 'Leaf wetness', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/leaf_wetness_card_with_background.json b/application/src/main/data/json/system/widget_types/leaf_wetness_card_with_background.json
index 8f207749f8..3258de6b32 100644
--- a/application/src/main/data/json/system/widget_types/leaf_wetness_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/leaf_wetness_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'leaf', label: 'Leaf wetness', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'leaf', label: 'Leaf wetness', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/leaf_wetness_chart_card.json b/application/src/main/data/json/system/widget_types/leaf_wetness_chart_card.json
index fc1279d5e0..235a468a74 100644
--- a/application/src/main/data/json/system/widget_types/leaf_wetness_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/leaf_wetness_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'leaf', label: 'Leaf wetness', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'leaf', '%', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'leaf', label: 'Leaf wetness', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'leaf', '%', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/leaf_wetness_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/leaf_wetness_chart_card_with_background.json
index 51c43d1183..3c9f15b0b2 100644
--- a/application/src/main/data/json/system/widget_types/leaf_wetness_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/leaf_wetness_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'leaf', label: 'Leaf wetness', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'leaf', '%', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'leaf', label: 'Leaf wetness', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'leaf', '%', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/leaf_wetness_progress_bar.json b/application/src/main/data/json/system/widget_types/leaf_wetness_progress_bar.json
index efe7906a92..fe3919e6bf 100644
--- a/application/src/main/data/json/system/widget_types/leaf_wetness_progress_bar.json
+++ b/application/src/main/data/json/system/widget_types/leaf_wetness_progress_bar.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'leaf', label: 'Leaf wetness', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'leaf', label: 'Leaf wetness', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/leaf_wetness_progress_bar_with_background.json b/application/src/main/data/json/system/widget_types/leaf_wetness_progress_bar_with_background.json
index c192bd5b93..271dca2485 100644
--- a/application/src/main/data/json/system/widget_types/leaf_wetness_progress_bar_with_background.json
+++ b/application/src/main/data/json/system/widget_types/leaf_wetness_progress_bar_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'leaf', label: 'Leaf wetness', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'leaf', label: 'Leaf wetness', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/line_chart.json b/application/src/main/data/json/system/widget_types/line_chart.json
index 0468c42f8e..bf67d765f1 100644
--- a/application/src/main/data/json/system/widget_types/line_chart.json
+++ b/application/src/main/data/json/system/widget_types/line_chart.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-time-series-chart-widget \n    [ctx]=\"ctx\">\n</tb-time-series-chart-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onDataUpdated();\n}\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onLatestDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        chartType: 'line',\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        hasAdditionalLatestDataKeys: true,\n        dataKeySettingsFunction: TbTimeSeriesChart.dataKeySettings('line'),\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries', units: '°C', decimals: 0 }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onDataUpdated();\n}\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onLatestDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        chartType: 'line',\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        hasAdditionalLatestDataKeys: true,\n        supportsUnitConversion: true,\n        dataKeySettingsFunction: TbTimeSeriesChart.dataKeySettings('line'),\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries', units: '°C', decimals: 0 }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-time-series-chart-widget-settings",
     "dataKeySettingsDirective": "tb-time-series-chart-key-settings",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/mini_gauge.json b/application/src/main/data/json/system/widget_types/mini_gauge.json
index 38adf0352c..6deb0a821c 100644
--- a/application/src/main/data/json/system/widget_types/mini_gauge.json
+++ b/application/src/main/data/json/system/widget_types/mini_gauge.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<canvas id=\"digitalGauge\"></canvas>",
     "templateCss": "#gauge {\n    text-align: center;\n   /* margin-left: -100px;\n    margin-right: -100px;*/\n    /*margin-top: -50px;*/\n    \n}\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-digital-gauge-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-digital-simple-gauge-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/neon_gauge.json b/application/src/main/data/json/system/widget_types/neon_gauge.json
index abea71228d..ea4449ab43 100644
--- a/application/src/main/data/json/system/widget_types/neon_gauge.json
+++ b/application/src/main/data/json/system/widget_types/neon_gauge.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<canvas id=\"digitalGauge\"></canvas>",
     "templateCss": "#gauge {\n    text-align: center;\n   /* margin-left: -100px;\n    margin-right: -100px;*/\n    /*margin-top: -50px;*/\n    \n}\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-digital-gauge-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-digital-simple-gauge-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/nitrogen_dioxide__no2__card.json b/application/src/main/data/json/system/widget_types/nitrogen_dioxide__no2__card.json
index 91b5e492fd..95605deae6 100644
--- a/application/src/main/data/json/system/widget_types/nitrogen_dioxide__no2__card.json
+++ b/application/src/main/data/json/system/widget_types/nitrogen_dioxide__no2__card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'nitrogen', label: 'Nitrogen dioxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'nitrogen', label: 'Nitrogen dioxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/nitrogen_dioxide__no2__card_with_background.json b/application/src/main/data/json/system/widget_types/nitrogen_dioxide__no2__card_with_background.json
index fc3b12853e..7fee7b991a 100644
--- a/application/src/main/data/json/system/widget_types/nitrogen_dioxide__no2__card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/nitrogen_dioxide__no2__card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'nitrogen', label: 'Nitrogen dioxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'nitrogen', label: 'Nitrogen dioxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/nitrogen_dioxide__no2__chart_card.json b/application/src/main/data/json/system/widget_types/nitrogen_dioxide__no2__chart_card.json
index 3d618e32ed..39def6e43b 100644
--- a/application/src/main/data/json/system/widget_types/nitrogen_dioxide__no2__chart_card.json
+++ b/application/src/main/data/json/system/widget_types/nitrogen_dioxide__no2__chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'nitrogen', label: 'Nitrogen dioxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'nitrogen', 'µg/m³', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'nitrogen', label: 'Nitrogen dioxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'nitrogen', 'µg/m³', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/nitrogen_dioxide__no2__chart_card_with_background.json b/application/src/main/data/json/system/widget_types/nitrogen_dioxide__no2__chart_card_with_background.json
index f3fa09dc74..e48517f3bb 100644
--- a/application/src/main/data/json/system/widget_types/nitrogen_dioxide__no2__chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/nitrogen_dioxide__no2__chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'nitrogen', label: 'Nitrogen dioxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'nitrogen', 'µg/m³', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'nitrogen', label: 'Nitrogen dioxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'nitrogen', 'µg/m³', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/noise_level_card.json b/application/src/main/data/json/system/widget_types/noise_level_card.json
index c43941e4ca..4b214b63a0 100644
--- a/application/src/main/data/json/system/widget_types/noise_level_card.json
+++ b/application/src/main/data/json/system/widget_types/noise_level_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'noise', label: 'Noise level ', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'noise', label: 'Noise level ', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/noise_level_card_with_background.json b/application/src/main/data/json/system/widget_types/noise_level_card_with_background.json
index ac6b2fb496..564d3d665e 100644
--- a/application/src/main/data/json/system/widget_types/noise_level_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/noise_level_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'noise', label: 'Noise level ', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'noise', label: 'Noise level ', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/noise_level_chart_card.json b/application/src/main/data/json/system/widget_types/noise_level_chart_card.json
index bd7b9fe6a1..00da830302 100644
--- a/application/src/main/data/json/system/widget_types/noise_level_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/noise_level_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'noise', label: 'Noise level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'dB', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'noise', 'dB', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'noise', label: 'Noise level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'dB', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'noise', 'dB', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/noise_level_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/noise_level_chart_card_with_background.json
index 64d05a0819..032e34c994 100644
--- a/application/src/main/data/json/system/widget_types/noise_level_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/noise_level_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'noise', label: 'Noise level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'dB', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'noise', 'dB', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'noise', label: 'Noise level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'dB', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'noise', 'dB', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/ozone__o3__card.json b/application/src/main/data/json/system/widget_types/ozone__o3__card.json
index d566d85131..77f12bc288 100644
--- a/application/src/main/data/json/system/widget_types/ozone__o3__card.json
+++ b/application/src/main/data/json/system/widget_types/ozone__o3__card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'ozone', label: 'Ozone', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'ozone', label: 'Ozone', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/ozone__o3__card_with_background.json b/application/src/main/data/json/system/widget_types/ozone__o3__card_with_background.json
index c7396f9459..02145f1e0a 100644
--- a/application/src/main/data/json/system/widget_types/ozone__o3__card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/ozone__o3__card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'ozone', label: 'Ozone', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'ozone', label: 'Ozone', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/ozone__o3__chart_card.json b/application/src/main/data/json/system/widget_types/ozone__o3__chart_card.json
index 4d31e085d0..c4a3e47767 100644
--- a/application/src/main/data/json/system/widget_types/ozone__o3__chart_card.json
+++ b/application/src/main/data/json/system/widget_types/ozone__o3__chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'ozone', label: 'Ozone', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'ozone', 'µg/m³', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'ozone', label: 'Ozone', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'ozone', 'µg/m³', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/ozone__o3__chart_card_with_background.json b/application/src/main/data/json/system/widget_types/ozone__o3__chart_card_with_background.json
index 7f1f69cb0e..6037c4454c 100644
--- a/application/src/main/data/json/system/widget_types/ozone__o3__chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/ozone__o3__chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'ozone', label: 'Ozone', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'ozone', 'µg/m³', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'ozone', label: 'Ozone', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'ozone', 'µg/m³', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/pie.json b/application/src/main/data/json/system/widget_types/pie.json
index 94e02d06ef..1a07ce785d 100644
--- a/application/src/main/data/json/system/widget_types/pie.json
+++ b/application/src/main/data/json/system/widget_types/pie.json
@@ -11,9 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-pie-chart-widget \n    [ctx]=\"ctx\">\n</tb-pie-chart-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.pieChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.pieChartWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '500px',\n        previewHeight: '380px',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar', type: 'timeseries', color: '#FF4D5A' },\n                    { name: 'hydroelectricPower', label: 'Hydroelectric', type: 'timeseries', color: '#FFDE30' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n\nself.actionSources = function() {\n    return {\n        'sliceClick': {\n            name: 'widget-action.pie-slice-click',\n            multiple: false\n        }\n    };\n}\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.pieChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.pieChartWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '500px',\n        previewHeight: '380px',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar', type: 'timeseries', color: '#FF4D5A' },\n                    { name: 'hydroelectricPower', label: 'Hydroelectric', type: 'timeseries', color: '#FFDE30' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n\nself.actionSources = function() {\n    return {\n        'sliceClick': {\n            name: 'widget-action.pie-slice-click',\n            multiple: false\n        }\n    };\n}\n",
     "settingsDirective": "tb-pie-chart-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-pie-chart-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/pm10_card.json b/application/src/main/data/json/system/widget_types/pm10_card.json
index cbbb6f16fe..3412808d60 100644
--- a/application/src/main/data/json/system/widget_types/pm10_card.json
+++ b/application/src/main/data/json/system/widget_types/pm10_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm10', label: 'PM10', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm10', label: 'PM10', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/pm10_card_with_background.json b/application/src/main/data/json/system/widget_types/pm10_card_with_background.json
index b700fff9f3..fbb8c7251e 100644
--- a/application/src/main/data/json/system/widget_types/pm10_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/pm10_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm10', label: 'PM10', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm10', label: 'PM10', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/pm10_chart_card.json b/application/src/main/data/json/system/widget_types/pm10_chart_card.json
index c122149cd9..5014d27f7c 100644
--- a/application/src/main/data/json/system/widget_types/pm10_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/pm10_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm10', label: 'PM10', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pm10', 'µg/m³', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm10', label: 'PM10', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pm10', 'µg/m³', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/pm10_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/pm10_chart_card_with_background.json
index 0a702f7ad8..8f2ba1d14e 100644
--- a/application/src/main/data/json/system/widget_types/pm10_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/pm10_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm10', label: 'PM10', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pm10', 'µg/m³', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm10', label: 'PM10', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pm10', 'µg/m³', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/pm2_5_card.json b/application/src/main/data/json/system/widget_types/pm2_5_card.json
index 6e7923a291..0770923327 100644
--- a/application/src/main/data/json/system/widget_types/pm2_5_card.json
+++ b/application/src/main/data/json/system/widget_types/pm2_5_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm2.5', label: 'PM2.5', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm2.5', label: 'PM2.5', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/pm2_5_card_with_background.json b/application/src/main/data/json/system/widget_types/pm2_5_card_with_background.json
index 87f1cebcae..e82a840d27 100644
--- a/application/src/main/data/json/system/widget_types/pm2_5_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/pm2_5_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm2.5', label: 'PM2.5', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pm2.5', label: 'PM2.5', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/pm2_5_chart_card.json b/application/src/main/data/json/system/widget_types/pm2_5_chart_card.json
index 43877a2852..eff5191922 100644
--- a/application/src/main/data/json/system/widget_types/pm2_5_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/pm2_5_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm2.5', label: 'PM2.5', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pm2.5', 'µg/m³', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm2.5', label: 'PM2.5', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pm2.5', 'µg/m³', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/pm2_5_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/pm2_5_chart_card_with_background.json
index c491e1cb11..cdfac469eb 100644
--- a/application/src/main/data/json/system/widget_types/pm2_5_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/pm2_5_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm2.5', label: 'PM2.5', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pm2.5', 'µg/m³', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm2.5', label: 'PM2.5', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pm2.5', 'µg/m³', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/point_chart.json b/application/src/main/data/json/system/widget_types/point_chart.json
index 74cd137665..860e8c22e8 100644
--- a/application/src/main/data/json/system/widget_types/point_chart.json
+++ b/application/src/main/data/json/system/widget_types/point_chart.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-time-series-chart-widget \n    [ctx]=\"ctx\">\n</tb-time-series-chart-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onDataUpdated();\n}\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onLatestDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        chartType: 'point',\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        hasAdditionalLatestDataKeys: true,\n        dataKeySettingsFunction: TbTimeSeriesChart.dataKeySettings('point'),\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries', units: '°C', decimals: 0 }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onDataUpdated();\n}\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onLatestDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        chartType: 'point',\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        hasAdditionalLatestDataKeys: true,\n        supportsUnitConversion: true,\n        dataKeySettingsFunction: TbTimeSeriesChart.dataKeySettings('point'),\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries', units: '°C', decimals: 0 }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-time-series-chart-widget-settings",
     "dataKeySettingsDirective": "tb-time-series-chart-key-settings",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/polar_area.json b/application/src/main/data/json/system/widget_types/polar_area.json
index 36fcaee465..d3f7fadcf9 100644
--- a/application/src/main/data/json/system/widget_types/polar_area.json
+++ b/application/src/main/data/json/system/widget_types/polar_area.json
@@ -11,9 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-polar-area-chart-widget \n    [ctx]=\"ctx\">\n</tb-polar-area-chart-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.polarAreaChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.polarAreaChartWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '500px',\n        previewHeight: '380px',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar', type: 'timeseries', color: '#FF4D5A' },\n                    { name: 'hydroelectricPower', label: 'Hydroelectric', type: 'timeseries', color: '#FFDE30' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.polarAreaChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.polarAreaChartWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '500px',\n        previewHeight: '380px',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar', type: 'timeseries', color: '#FF4D5A' },\n                    { name: 'hydroelectricPower', label: 'Hydroelectric', type: 'timeseries', color: '#FFDE30' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n\n",
     "settingsDirective": "tb-polar-area-chart-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-polar-area-chart-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/power_consumption_card.json b/application/src/main/data/json/system/widget_types/power_consumption_card.json
index 3ac53e04f8..e99cc76bb4 100644
--- a/application/src/main/data/json/system/widget_types/power_consumption_card.json
+++ b/application/src/main/data/json/system/widget_types/power_consumption_card.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'powerConsumption', label: 'Power consumption', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'powerConsumption', label: 'Power consumption', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/power_consumption_card_with_background.json b/application/src/main/data/json/system/widget_types/power_consumption_card_with_background.json
index ebe6c2de31..2f08a16a5b 100644
--- a/application/src/main/data/json/system/widget_types/power_consumption_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/power_consumption_card_with_background.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'powerConsumption', label: 'Power consumption', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'powerConsumption', label: 'Power consumption', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/power_consumption_chart_card.json b/application/src/main/data/json/system/widget_types/power_consumption_chart_card.json
index 54de0d40d2..1009371fe6 100644
--- a/application/src/main/data/json/system/widget_types/power_consumption_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/power_consumption_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'powerConsumption', label: 'Power consumption', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'kW', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'powerConsumption', 'kW', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'powerConsumption', label: 'Power consumption', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'kW', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'powerConsumption', 'kW', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/power_consumption_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/power_consumption_chart_card_with_background.json
index 00ff0ea91d..c006f600fc 100644
--- a/application/src/main/data/json/system/widget_types/power_consumption_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/power_consumption_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'powerConsumption', label: 'Power consumption', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'kW', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'powerConsumption', 'kW', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'powerConsumption', label: 'Power consumption', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'kW', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'powerConsumption', 'kW', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/power_consumption_range_chart.json b/application/src/main/data/json/system/widget_types/power_consumption_range_chart.json
index 6682b6d003..bc295c570f 100644
--- a/application/src/main/data/json/system/widget_types/power_consumption_range_chart.json
+++ b/application/src/main/data/json/system/widget_types/power_consumption_range_chart.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-range-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-range-chart-widget>",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'powerConsumption', label: 'Power consumption', type: 'timeseries' }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'powerConsumption', label: 'Power consumption', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-range-chart-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/power_consumption_range_chart_with_background.json b/application/src/main/data/json/system/widget_types/power_consumption_range_chart_with_background.json
index cd942873d5..3ebcbb96c9 100644
--- a/application/src/main/data/json/system/widget_types/power_consumption_range_chart_with_background.json
+++ b/application/src/main/data/json/system/widget_types/power_consumption_range_chart_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-range-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-range-chart-widget>",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'powerConsumption', label: 'Power consumption', type: 'timeseries' }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'powerConsumption', label: 'Power consumption', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-range-chart-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/pressure_card.json b/application/src/main/data/json/system/widget_types/pressure_card.json
index ef8e827939..9138ab6391 100644
--- a/application/src/main/data/json/system/widget_types/pressure_card.json
+++ b/application/src/main/data/json/system/widget_types/pressure_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/pressure_card_with_background.json b/application/src/main/data/json/system/widget_types/pressure_card_with_background.json
index 13156d02e0..d87db84e8a 100644
--- a/application/src/main/data/json/system/widget_types/pressure_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/pressure_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/pressure_chart_card.json b/application/src/main/data/json/system/widget_types/pressure_chart_card.json
index 54ef8a8ea1..e0ea0e9895 100644
--- a/application/src/main/data/json/system/widget_types/pressure_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/pressure_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pressure', label: 'Pressure', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'hPa', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pressure', 'hPa', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pressure', label: 'Pressure', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'hPa', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pressure', 'hPa', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/pressure_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/pressure_chart_card_with_background.json
index cabd8ec352..58c5859931 100644
--- a/application/src/main/data/json/system/widget_types/pressure_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/pressure_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pressure', label: 'Pressure', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'hPa', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pressure', 'hPa', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pressure', label: 'Pressure', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'hPa', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'pressure', 'hPa', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/pressure_progress_bar.json b/application/src/main/data/json/system/widget_types/pressure_progress_bar.json
index d4a6394048..93d19780ae 100644
--- a/application/src/main/data/json/system/widget_types/pressure_progress_bar.json
+++ b/application/src/main/data/json/system/widget_types/pressure_progress_bar.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/pressure_progress_bar_with_background.json b/application/src/main/data/json/system/widget_types/pressure_progress_bar_with_background.json
index 22fcb30719..e5189912d2 100644
--- a/application/src/main/data/json/system/widget_types/pressure_progress_bar_with_background.json
+++ b/application/src/main/data/json/system/widget_types/pressure_progress_bar_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'pressure', label: 'Pressure', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/progress_bar.json b/application/src/main/data/json/system/widget_types/progress_bar.json
index 80a9b9b56d..43b4f97210 100644
--- a/application/src/main/data/json/system/widget_types/progress_bar.json
+++ b/application/src/main/data/json/system/widget_types/progress_bar.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'humidity', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'humidity', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/pump_vibration_card.json b/application/src/main/data/json/system/widget_types/pump_vibration_card.json
index 28b84ad7e9..414cfaeb36 100644
--- a/application/src/main/data/json/system/widget_types/pump_vibration_card.json
+++ b/application/src/main/data/json/system/widget_types/pump_vibration_card.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'vibration', label: 'Vibration', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'vibration', label: 'Vibration', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/pump_vibration_card_with_background.json b/application/src/main/data/json/system/widget_types/pump_vibration_card_with_background.json
index b8ce39f935..c3e90f61a3 100644
--- a/application/src/main/data/json/system/widget_types/pump_vibration_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/pump_vibration_card_with_background.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'vibration', label: 'Vibration', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'vibration', label: 'Vibration', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/pump_vibration_chart_card.json b/application/src/main/data/json/system/widget_types/pump_vibration_chart_card.json
index 353a65654c..acbe3524e0 100644
--- a/application/src/main/data/json/system/widget_types/pump_vibration_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/pump_vibration_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'vibration', label: 'Vibration', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'mm/s', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'vibration', 'mm/s', 1);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'vibration', label: 'Vibration', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'mm/s', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'vibration', 'mm/s', 1);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/pump_vibration_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/pump_vibration_chart_card_with_background.json
index 410e39d44d..46c249f200 100644
--- a/application/src/main/data/json/system/widget_types/pump_vibration_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/pump_vibration_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'vibration', label: 'Vibration', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'mm/s', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'vibration', 'mm/s', 1);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'vibration', label: 'Vibration', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'mm/s', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'vibration', 'mm/s', 1);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/pump_vibration_range_chart.json b/application/src/main/data/json/system/widget_types/pump_vibration_range_chart.json
index 5698371c33..561130c14e 100644
--- a/application/src/main/data/json/system/widget_types/pump_vibration_range_chart.json
+++ b/application/src/main/data/json/system/widget_types/pump_vibration_range_chart.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-range-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-range-chart-widget>",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'vibration', label: 'Vibration', type: 'timeseries' }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'vibration', label: 'Vibration', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-range-chart-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/pump_vibration_range_chart_with_background.json b/application/src/main/data/json/system/widget_types/pump_vibration_range_chart_with_background.json
index 050a34caee..27ba578048 100644
--- a/application/src/main/data/json/system/widget_types/pump_vibration_range_chart_with_background.json
+++ b/application/src/main/data/json/system/widget_types/pump_vibration_range_chart_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-range-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-range-chart-widget>",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'vibration', label: 'Vibration', type: 'timeseries' }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'vibration', label: 'Vibration', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-range-chart-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/radar.json b/application/src/main/data/json/system/widget_types/radar.json
index a6961feb6d..be88baa238 100644
--- a/application/src/main/data/json/system/widget_types/radar.json
+++ b/application/src/main/data/json/system/widget_types/radar.json
@@ -11,9 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-radar-chart-widget \n    [ctx]=\"ctx\">\n</tb-radar-chart-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.radarChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.radarChartWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '500px',\n        previewHeight: '380px',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar', type: 'timeseries', color: '#FF4D5A' },\n                    { name: 'hydroelectricPower', label: 'Hydroelectric', type: 'timeseries', color: '#FFDE30' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.radarChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.radarChartWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '500px',\n        previewHeight: '380px',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar', type: 'timeseries', color: '#FF4D5A' },\n                    { name: 'hydroelectricPower', label: 'Hydroelectric', type: 'timeseries', color: '#FFDE30' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n\n",
     "settingsDirective": "tb-radar-chart-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-radar-chart-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/radial_gauge.json b/application/src/main/data/json/system/widget_types/radial_gauge.json
index b463994347..93922f45d4 100644
--- a/application/src/main/data/json/system/widget_types/radial_gauge.json
+++ b/application/src/main/data/json/system/widget_types/radial_gauge.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<canvas id=\"radialGauge\"></canvas>\n",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-analogue-radial-gauge-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-radial-gauge-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/radon_level_card.json b/application/src/main/data/json/system/widget_types/radon_level_card.json
index 4a4921db80..8c8acc6a88 100644
--- a/application/src/main/data/json/system/widget_types/radon_level_card.json
+++ b/application/src/main/data/json/system/widget_types/radon_level_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'radon', label: 'Radon level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'radon', label: 'Radon level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/radon_level_card_with_background.json b/application/src/main/data/json/system/widget_types/radon_level_card_with_background.json
index d993f2ccd3..9f5b6f79ad 100644
--- a/application/src/main/data/json/system/widget_types/radon_level_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/radon_level_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'radon', label: 'Radon level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'radon', label: 'Radon level', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/radon_level_chart_card.json b/application/src/main/data/json/system/widget_types/radon_level_chart_card.json
index d5276314c5..d76f5d2d9f 100644
--- a/application/src/main/data/json/system/widget_types/radon_level_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/radon_level_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'radon', label: 'Radon level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'Bq/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'radon', 'Bq/m³', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'radon', label: 'Radon level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'Bq/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'radon', 'Bq/m³', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/radon_level_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/radon_level_chart_card_with_background.json
index db3d648e95..aded058cd6 100644
--- a/application/src/main/data/json/system/widget_types/radon_level_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/radon_level_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'radon', label: 'Radon level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'Bq/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'radon', 'Bq/m³', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'radon', label: 'Radon level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'Bq/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'radon', 'Bq/m³', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/rainfall_card.json b/application/src/main/data/json/system/widget_types/rainfall_card.json
index 5faa15503b..04ce14806b 100644
--- a/application/src/main/data/json/system/widget_types/rainfall_card.json
+++ b/application/src/main/data/json/system/widget_types/rainfall_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rainfall', label: 'Rainfall', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rainfall', label: 'Rainfall', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/rainfall_card_with_background.json b/application/src/main/data/json/system/widget_types/rainfall_card_with_background.json
index a6c1b0bdfe..81ede92ad1 100644
--- a/application/src/main/data/json/system/widget_types/rainfall_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/rainfall_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rainfall', label: 'Rainfall', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rainfall', label: 'Rainfall', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/rainfall_chart_card.json b/application/src/main/data/json/system/widget_types/rainfall_chart_card.json
index 0f306386ba..b5bd51ad00 100644
--- a/application/src/main/data/json/system/widget_types/rainfall_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/rainfall_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'rainfall', label: 'Rainfall', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'mm', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'rainfall', 'mm', 1);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'rainfall', label: 'Rainfall', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'mm', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'rainfall', 'mm', 1);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/rainfall_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/rainfall_chart_card_with_background.json
index 0bbeae3712..f25ba166f7 100644
--- a/application/src/main/data/json/system/widget_types/rainfall_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/rainfall_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'rainfall', label: 'Rainfall', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'mm', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'rainfall', 'mm', 1);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'rainfall', label: 'Rainfall', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'mm', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'rainfall', 'mm', 1);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/range_chart.json b/application/src/main/data/json/system/widget_types/range_chart.json
index 911d91876f..e017fe0cec 100644
--- a/application/src/main/data/json/system/widget_types/range_chart.json
+++ b/application/src/main/data/json/system/widget_types/range_chart.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-range-chart-widget \n    [ctx]=\"ctx\">\n</tb-range-chart-widget>",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-range-chart-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/rotational_speed_card.json b/application/src/main/data/json/system/widget_types/rotational_speed_card.json
index 447d1b6fd5..681d53c66d 100644
--- a/application/src/main/data/json/system/widget_types/rotational_speed_card.json
+++ b/application/src/main/data/json/system/widget_types/rotational_speed_card.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/rotational_speed_card_with_background.json b/application/src/main/data/json/system/widget_types/rotational_speed_card_with_background.json
index 8b30020722..efaa958688 100644
--- a/application/src/main/data/json/system/widget_types/rotational_speed_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/rotational_speed_card_with_background.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-value-card-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/rotational_speed_chart_card.json b/application/src/main/data/json/system/widget_types/rotational_speed_chart_card.json
index 588afd4bc2..d5c48138f2 100644
--- a/application/src/main/data/json/system/widget_types/rotational_speed_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/rotational_speed_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'RPM', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'rotationalSpeed', 'RPM', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'RPM', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'rotationalSpeed', 'RPM', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/rotational_speed_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/rotational_speed_chart_card_with_background.json
index 684139c5e7..1e2a0c2397 100644
--- a/application/src/main/data/json/system/widget_types/rotational_speed_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/rotational_speed_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'RPM', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'rotationalSpeed', 'RPM', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'RPM', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'rotationalSpeed', 'RPM', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/rotational_speed_gauge.json b/application/src/main/data/json/system/widget_types/rotational_speed_gauge.json
index 5013268ae1..f42d801090 100644
--- a/application/src/main/data/json/system/widget_types/rotational_speed_gauge.json
+++ b/application/src/main/data/json/system/widget_types/rotational_speed_gauge.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<canvas id=\"radialGauge\"></canvas>\n",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-analogue-radial-gauge-widget-settings",
     "dataKeySettingsDirective": "",
     "hasBasicMode": true,
diff --git a/application/src/main/data/json/system/widget_types/rotational_speed_progress_bar.json b/application/src/main/data/json/system/widget_types/rotational_speed_progress_bar.json
index abd8957291..7288b70478 100644
--- a/application/src/main/data/json/system/widget_types/rotational_speed_progress_bar.json
+++ b/application/src/main/data/json/system/widget_types/rotational_speed_progress_bar.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/rotational_speed_progress_bar_with_background.json b/application/src/main/data/json/system/widget_types/rotational_speed_progress_bar_with_background.json
index 5b39e33a26..c8d2f0e188 100644
--- a/application/src/main/data/json/system/widget_types/rotational_speed_progress_bar_with_background.json
+++ b/application/src/main/data/json/system/widget_types/rotational_speed_progress_bar_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/rotational_speed_range_chart.json b/application/src/main/data/json/system/widget_types/rotational_speed_range_chart.json
index e614368aa5..bcbeb8c9a8 100644
--- a/application/src/main/data/json/system/widget_types/rotational_speed_range_chart.json
+++ b/application/src/main/data/json/system/widget_types/rotational_speed_range_chart.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-range-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-range-chart-widget>",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries' }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-range-chart-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/rotational_speed_range_chart_with_background.json b/application/src/main/data/json/system/widget_types/rotational_speed_range_chart_with_background.json
index e599294106..537314bd0d 100644
--- a/application/src/main/data/json/system/widget_types/rotational_speed_range_chart_with_background.json
+++ b/application/src/main/data/json/system/widget_types/rotational_speed_range_chart_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-range-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-range-chart-widget>",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries' }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-range-chart-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/signal_strength.json b/application/src/main/data/json/system/widget_types/signal_strength.json
index 59ceeb96ef..516f87fe4c 100644
--- a/application/src/main/data/json/system/widget_types/signal_strength.json
+++ b/application/src/main/data/json/system/widget_types/signal_strength.json
@@ -11,9 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-signal-strength-widget\n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-signal-strength-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.signalStrengthWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.signalStrengthWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '200px',\n        previewHeight: '200px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rssi', label: 'rssi', type: 'timeseries' }];\n        }\n    };\n};\n\nself.actionSources = function() {\n    return {\n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.signalStrengthWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.signalStrengthWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '200px',\n        previewHeight: '200px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'rssi', label: 'rssi', type: 'timeseries' }];\n        }\n    };\n};\n\nself.actionSources = function() {\n    return {\n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n};\n",
     "settingsDirective": "tb-signal-strength-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-signal-strength-basic-config",
@@ -34,18 +32,5 @@
     "wireless",
     "link",
     "quality"
-  ],
-  "resources": [
-    {
-      "link": "/api/images/system/signal_strength_system_widget_image.png",
-      "title": "\"Signal strength\" system widget image",
-      "type": "IMAGE",
-      "subType": "IMAGE",
-      "fileName": "signal_strength_system_widget_image.png",
-      "publicResourceKey": "oOkg5kXnhiyzZ2pEe66hRVSLV94D8v4i",
-      "mediaType": "image/png",
-      "data": "iVBORw0KGgoAAAANSUhEUgAAAMgAAACgCAMAAAB+IdObAAAAgVBMVEXg4ODf39/g4OAAAADg4ODf39////9c35Dh4eEhISE9PT3r+/GF56z1/fhw457C89Vm4Zfx8fHHx8fW9+Ou78isrKx0dHSQkJC48c5YWFij7cGCgoIvLy+Z67p65aWenp7M9dyP6bPh+eq6urqZ67lmZmbV1dVLS0tKSkrv7++48c8QruqjAAAABnRSTlPvIL8Ar7DvmsykAAAGE0lEQVR42uzX3WrjMBAF4GRbhjlzNwJJCAl8IWSn7/+CO7F3I+ciLNtQ1w0+UAn9VXxoCMnp7fzrxD897+e30/n0QT8+aox3pRfIh5UVvUROrwLhA7KzHJC95YDsLQdkbzkge8sB2Vueh4yOPhd1vBHEtZS89VmUHkeEPhcPvw0kooSEiWgQ/g/IICP9K06G7SAKUaLcb9O+1Ls1RHXxu76q/ci6d4gLRDeAMC7WjtFRFjZRwdSESEIGmhINYj13CCdgGqkVlExNIuI8lfh6pgGZiHyBRBntaBGDZIH4L4dQwlTpmgAmj4sPABEQfMNAIy51QOoQkeqkqGswe0IJVaUMQ7EtpvAXVGKITcCNGc2Tn0fl6yEagBJ4gUz2Zw0RhIgRiP38Gh1yfcAadSmtBF5qx4YjXb0VkbJhrHG9tCiAN/j4ZZ8gOl+GNL9Rh5ALk2AFiZDgif5C5pecUhL4+bBDtFm19a0h7K4rGcMCudxD5tJy0iFXmWC6h7RgcTdI+xaIR1za+TIpeg/JGO9Ki6ONA8YVZMBgrdINkuG+AaKC7LxgnC+LaC5jBYkINtEhWibnJjANdmyBaCm+ZtEbxEGqF4MwproZhDgAKMOfy0yRZAXRBqQL9FZaVZbdLEgLhHiZukEoFpRkEGrAdhAL90VVJim0ivKD3ayP9qiNA1zfu/2Xxiq+ZmR6KirZRQj1bA/hAJSs9FyiAKlfuCmkh59gPPgnu/o9spMckL3lgOwtB2RvOSC/2a13FYtBIADDnRZzURgLERQNef9nXHa3CAu65maORf4+JF9Gxdl6IbP1QmbrhczWC5mtFzJbL2S2RkAIsg+xJGarf2JGjM7nhdTW3BAwobBuxxjyor6bGLL4YvWeLHqZFUImWn0kWwxMByGP+kxoYCaIbIozlkkg5Ky+Fkf4PERQ3xHmoZDxjC02d0A+ztgo1yATMDbKsxDoMzitq/PmN+9CQda9EB6E9E8qXn2uf9EivqR/KREehAjrZhiEer9BHPbX13gIBd3IhkxqZ7JyZyijIcIthaitSxY2D0Aa40AhdaK86mqBBkMgVYfhQJ0NAleHAkMhYqsMUpcyNYr1AyGuzRhAccMgsckYQyk0BEKpsyevBZVxM42AxMpJ1cXDItkYIyJAJ249ZQAEDu1GWkwobP8+kDB4Oba+4H6I2X29oxySboch0+6h+IuQ/okVWp/iUfdDD/te4+6HfLV3RjuSgkAU7Z7ZxUmKAjbwQEw0anzZ/v8P3J7N7nSPoEiYkcJwX9t0PLEqxb1lov3UhTo5S+mlnwU+lZf8ehB8vgnvPegxMoXotJdk/N4eYe12WQ082RK65WW+dY6YffMsGsUt4zl6IEZMX66D9j0dBWYVSO4SD40IGGPfH4p3t3h40mhUkyyTP2mEPlA4oud3CRG4DDKD3NT6BqSVEzwj66HlKvBQMoHguAIxrk7uSa5Nmw6zgYDwUswaQ0ZdpZVXOkjY93KLbIckb1wpnQXk5sPQEVlQ48pmABkCGGGBB0UfDyI8GOlNxg8Hmbx+MT1zgKNB9LpfTKovnfWJqJQmtXlBmHoaABN7KG0cieOb3T7KCjeyFNt272rNoPec1+RhIK6Pm3dnKX034Lb7NFkmu3y/US7jUgguIfBfWQ6NgP5NgYrfEiJg/ndRvIYxjEL0NSdnwRhEoQwyqIjIgS4IdlGRA1kQEHE5EBAFmWLjFCVJgoBqojVRBPH2h+rn1tw1ci8mpwgS2oJM0pO5ID0QWLayQfca10fRA8F9Y0IK6k+E8eYhg/t2eD3FHhkcoxUeN5IiCDOO0QolrYbkHPlX/8ruXxkRnex3oYb9VobwoTFOFaSCpAgNV41aiRwKAvlYzQnLXJUDYraXhMWA3AJbnFJAFlZLOZOjFJA2tIEuBcTJftlCpYA0Sy1+Lxdk0STlgix+LwbkND1imsCbqaWA4GKOAFuoFBBmTzLZz3PWYsyK/3VV9umXMZB//Yg/6CoJZEMVpIKUogpCTRWEmioINVUQaqog1FRBqOlEIBd2Cr1dXk7w6WnGfv28XC8n+Pj07zvG6/XHW+m6vFxf/wBvcT51JCx2jQAAAABJRU5ErkJggg==",
-      "public": true
-    }
   ]
 }
\ No newline at end of file
diff --git a/application/src/main/data/json/system/widget_types/simple_air_quality_index_chart_card.json b/application/src/main/data/json/system/widget_types/simple_air_quality_index_chart_card.json
index 9c0a3864a6..812aa8694b 100644
--- a/application/src/main/data/json/system/widget_types/simple_air_quality_index_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_air_quality_index_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'air', label: 'Air Quality Index', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'air', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'air', label: 'Air Quality Index', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'air', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_air_quality_index_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_air_quality_index_chart_card_with_background.json
index 0c13097b3f..1c22c060f2 100644
--- a/application/src/main/data/json/system/widget_types/simple_air_quality_index_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_air_quality_index_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'air', label: 'Air Quality Index', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'air', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'air', label: 'Air Quality Index', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'air', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_carbon_monoxide__co__chart_card.json b/application/src/main/data/json/system/widget_types/simple_carbon_monoxide__co__chart_card.json
index 0be12bdb9f..d494338fee 100644
--- a/application/src/main/data/json/system/widget_types/simple_carbon_monoxide__co__chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_carbon_monoxide__co__chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'carbon', label: 'Carbon monoxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'carbon', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'carbon', label: 'Carbon monoxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'carbon', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_carbon_monoxide__co__chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_carbon_monoxide__co__chart_card_with_background.json
index 8a498cf0d9..66364f8d06 100644
--- a/application/src/main/data/json/system/widget_types/simple_carbon_monoxide__co__chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_carbon_monoxide__co__chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'carbon', label: 'Carbon monoxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'carbon', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'carbon', label: 'Carbon monoxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'carbon', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_co2_chart_card.json b/application/src/main/data/json/system/widget_types/simple_co2_chart_card.json
index 455858eeff..9e4be18356 100644
--- a/application/src/main/data/json/system/widget_types/simple_co2_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_co2_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'co2', label: 'CO2 level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'co2', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'co2', label: 'CO2 level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'co2', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_co2_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_co2_chart_card_with_background.json
index e362433335..d6ef0088b4 100644
--- a/application/src/main/data/json/system/widget_types/simple_co2_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_co2_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'co2', label: 'CO2 level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'co2', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'co2', label: 'CO2 level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'co2', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_efficiency_chart_card.json b/application/src/main/data/json/system/widget_types/simple_efficiency_chart_card.json
index 7d7eb4a975..d957a82a58 100644
--- a/application/src/main/data/json/system/widget_types/simple_efficiency_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_efficiency_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'efficiency', label: 'Efficiency', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'efficiency', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'efficiency', label: 'Efficiency', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'efficiency', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_efficiency_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_efficiency_chart_card_with_background.json
index 2276c7ce04..9fe02a7725 100644
--- a/application/src/main/data/json/system/widget_types/simple_efficiency_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_efficiency_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'efficiency', label: 'Efficiency', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'efficiency', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'efficiency', label: 'Efficiency', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'efficiency', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_flooding_level_chart_card.json b/application/src/main/data/json/system/widget_types/simple_flooding_level_chart_card.json
index dd067aa455..55a4da3aba 100644
--- a/application/src/main/data/json/system/widget_types/simple_flooding_level_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_flooding_level_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flooding', label: 'Flooding level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'flooding', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flooding', label: 'Flooding level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'flooding', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_flooding_level_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_flooding_level_chart_card_with_background.json
index 9194bb9011..dab9a38433 100644
--- a/application/src/main/data/json/system/widget_types/simple_flooding_level_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_flooding_level_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flooding', label: 'Flooding level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'flooding', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flooding', label: 'Flooding level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'flooding', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_flow_rate_chart_card.json b/application/src/main/data/json/system/widget_types/simple_flow_rate_chart_card.json
index ec50a390bd..05fd114507 100644
--- a/application/src/main/data/json/system/widget_types/simple_flow_rate_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_flow_rate_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flowRate', label: 'Flow rate', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'flowRate', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flowRate', label: 'Flow rate', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'flowRate', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_flow_rate_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_flow_rate_chart_card_with_background.json
index bcf8a44e06..bea92879b0 100644
--- a/application/src/main/data/json/system/widget_types/simple_flow_rate_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_flow_rate_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flowRate', label: 'Flow rate', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'flowRate', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'flowRate', label: 'Flow rate', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'flowRate', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_fluid_pressure_chart_card.json b/application/src/main/data/json/system/widget_types/simple_fluid_pressure_chart_card.json
index af23181a0f..57417c5986 100644
--- a/application/src/main/data/json/system/widget_types/simple_fluid_pressure_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_fluid_pressure_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pressure', label: 'Pressure', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pressure', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pressure', label: 'Pressure', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pressure', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_fluid_pressure_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_fluid_pressure_chart_card_with_background.json
index 6996b8cab1..e7b8f22933 100644
--- a/application/src/main/data/json/system/widget_types/simple_fluid_pressure_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_fluid_pressure_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pressure', label: 'Pressure', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pressure', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pressure', label: 'Pressure', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pressure', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_gauge.json b/application/src/main/data/json/system/widget_types/simple_gauge.json
index 4a9de58c63..1358e21aae 100644
--- a/application/src/main/data/json/system/widget_types/simple_gauge.json
+++ b/application/src/main/data/json/system/widget_types/simple_gauge.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<canvas id=\"digitalGauge\"></canvas>\n",
     "templateCss": "#gauge {\n    text-align: center;\n   /* margin-left: -100px;\n    margin-right: -100px;*/\n    /*margin-top: -50px;*/\n    \n}\n",
-    "controllerScript": "\nself.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-digital-gauge-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-digital-simple-gauge-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/simple_ground_temperature_chart_card.json b/application/src/main/data/json/system/widget_types/simple_ground_temperature_chart_card.json
index 089581ba76..e57b06fdd1 100644
--- a/application/src/main/data/json/system/widget_types/simple_ground_temperature_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_ground_temperature_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Ground temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'temperature', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Ground temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'temperature', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_ground_temperature_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_ground_temperature_chart_card_with_background.json
index b78b1026ee..81f971a8ba 100644
--- a/application/src/main/data/json/system/widget_types/simple_ground_temperature_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_ground_temperature_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Ground temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'temperature', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Ground temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'temperature', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_humidity_chart_card.json b/application/src/main/data/json/system/widget_types/simple_humidity_chart_card.json
index 6a7bf3a44b..e45f5f63c5 100644
--- a/application/src/main/data/json/system/widget_types/simple_humidity_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_humidity_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'humidity', label: 'Humidity', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'humidity', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'humidity', label: 'Humidity', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'humidity', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_humidity_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_humidity_chart_card_with_background.json
index a8097162af..484c9c1a08 100644
--- a/application/src/main/data/json/system/widget_types/simple_humidity_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_humidity_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'humidity', label: 'Humidity', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'humidity', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'humidity', label: 'Humidity', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'humidity', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_illuminance_chart_card.json b/application/src/main/data/json/system/widget_types/simple_illuminance_chart_card.json
index 445ca7df02..43c8a79361 100644
--- a/application/src/main/data/json/system/widget_types/simple_illuminance_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_illuminance_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'illuminance', label: 'Illuminance', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'illuminance', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'illuminance', label: 'Illuminance', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'illuminance', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_illuminance_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_illuminance_chart_card_with_background.json
index 52a48ed6cd..373fac46dc 100644
--- a/application/src/main/data/json/system/widget_types/simple_illuminance_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_illuminance_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'illuminance', label: 'Illuminance', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'illuminance', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'illuminance', label: 'Illuminance', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'illuminance', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_individual_allergy_index__iai__chart_card.json b/application/src/main/data/json/system/widget_types/simple_individual_allergy_index__iai__chart_card.json
index a271d1639a..81764c775f 100644
--- a/application/src/main/data/json/system/widget_types/simple_individual_allergy_index__iai__chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_individual_allergy_index__iai__chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'IAI_level', label: 'IAI', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'IAI_level', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'IAI_level', label: 'IAI', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'IAI_level', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_individual_allergy_index__iai__chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_individual_allergy_index__iai__chart_card_with_background.json
index 5cd6067d37..283ff4a8e0 100644
--- a/application/src/main/data/json/system/widget_types/simple_individual_allergy_index__iai__chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_individual_allergy_index__iai__chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'IAI_level', label: 'IAI', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'IAI_level', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'IAI_level', label: 'IAI', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'IAI_level', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_leaf_wetness_chart_card.json b/application/src/main/data/json/system/widget_types/simple_leaf_wetness_chart_card.json
index c0ef043cd9..2205278c9f 100644
--- a/application/src/main/data/json/system/widget_types/simple_leaf_wetness_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_leaf_wetness_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'leaf', label: 'Leaf wetness', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'leaf', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'leaf', label: 'Leaf wetness', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'leaf', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_leaf_wetness_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_leaf_wetness_chart_card_with_background.json
index 345eb155fc..d71fc4a5bb 100644
--- a/application/src/main/data/json/system/widget_types/simple_leaf_wetness_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_leaf_wetness_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'leaf', label: 'Leaf wetness', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'leaf', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'leaf', label: 'Leaf wetness', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'leaf', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_neon_gauge.json b/application/src/main/data/json/system/widget_types/simple_neon_gauge.json
index 3b85d29a58..9526b0512b 100644
--- a/application/src/main/data/json/system/widget_types/simple_neon_gauge.json
+++ b/application/src/main/data/json/system/widget_types/simple_neon_gauge.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<canvas id=\"digitalGauge\"></canvas>",
     "templateCss": "#gauge {\n    text-align: center;\n   /* margin-left: -100px;\n    margin-right: -100px;*/\n    /*margin-top: -50px;*/\n    \n}\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-digital-gauge-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-digital-simple-gauge-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/simple_nitrogen_dioxide__no2__chart_card.json b/application/src/main/data/json/system/widget_types/simple_nitrogen_dioxide__no2__chart_card.json
index fb0559f564..0a1c1d8657 100644
--- a/application/src/main/data/json/system/widget_types/simple_nitrogen_dioxide__no2__chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_nitrogen_dioxide__no2__chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'nitrogen', label: 'Nitrogen dioxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'nitrogen', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'nitrogen', label: 'Nitrogen dioxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'nitrogen', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_nitrogen_dioxide__no2__chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_nitrogen_dioxide__no2__chart_card_with_background.json
index d268434f9e..892238dc9b 100644
--- a/application/src/main/data/json/system/widget_types/simple_nitrogen_dioxide__no2__chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_nitrogen_dioxide__no2__chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'nitrogen', label: 'Nitrogen dioxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'nitrogen', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'nitrogen', label: 'Nitrogen dioxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'nitrogen', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_noise_level_chart_card.json b/application/src/main/data/json/system/widget_types/simple_noise_level_chart_card.json
index 4f250e810f..d33eed776f 100644
--- a/application/src/main/data/json/system/widget_types/simple_noise_level_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_noise_level_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'noise', label: 'Noise level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'noise', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'noise', label: 'Noise level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'noise', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_noise_level_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_noise_level_chart_card_with_background.json
index 8ede109ac8..225d30b14c 100644
--- a/application/src/main/data/json/system/widget_types/simple_noise_level_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_noise_level_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'noise', label: 'Noise level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'noise', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'noise', label: 'Noise level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'noise', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_ozone__o3__chart_card.json b/application/src/main/data/json/system/widget_types/simple_ozone__o3__chart_card.json
index ca04dec396..b2c9eb5e97 100644
--- a/application/src/main/data/json/system/widget_types/simple_ozone__o3__chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_ozone__o3__chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'ozone', label: 'Ozone', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'ozone', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'ozone', label: 'Ozone', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'ozone', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_ozone__o3__chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_ozone__o3__chart_card_with_background.json
index 8d89b65dc1..88995bb4f5 100644
--- a/application/src/main/data/json/system/widget_types/simple_ozone__o3__chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_ozone__o3__chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'ozone', label: 'Ozone', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'ozone', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'ozone', label: 'Ozone', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'ozone', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_pm10_chart_card.json b/application/src/main/data/json/system/widget_types/simple_pm10_chart_card.json
index 7c9744d7d7..6e7d5c1369 100644
--- a/application/src/main/data/json/system/widget_types/simple_pm10_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_pm10_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm10', label: 'PM10', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pm10', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm10', label: 'PM10', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pm10', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_pm10_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_pm10_chart_card_with_background.json
index 0570cdbcad..a0b3d74e54 100644
--- a/application/src/main/data/json/system/widget_types/simple_pm10_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_pm10_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm10', label: 'PM10', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pm10', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm10', label: 'PM10', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pm10', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_pm2_5_chart_card.json b/application/src/main/data/json/system/widget_types/simple_pm2_5_chart_card.json
index 25b8b8d86d..25502227f3 100644
--- a/application/src/main/data/json/system/widget_types/simple_pm2_5_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_pm2_5_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm2.5', label: 'PM2.5', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pm2.5', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm2.5', label: 'PM2.5', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pm2.5', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_pm2_5_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_pm2_5_chart_card_with_background.json
index 5c4a8447c2..ccdf3ba0a1 100644
--- a/application/src/main/data/json/system/widget_types/simple_pm2_5_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_pm2_5_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm2.5', label: 'PM2.5', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pm2.5', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pm2.5', label: 'PM2.5', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pm2.5', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_power_consumption_chart_card.json b/application/src/main/data/json/system/widget_types/simple_power_consumption_chart_card.json
index 6f10e9be1b..befea52bb3 100644
--- a/application/src/main/data/json/system/widget_types/simple_power_consumption_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_power_consumption_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'powerConsumption', label: 'Power consumption', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'powerConsumption', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'powerConsumption', label: 'Power consumption', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'powerConsumption', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_power_consumption_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_power_consumption_chart_card_with_background.json
index 02ca8f664a..f0bb8ba9e9 100644
--- a/application/src/main/data/json/system/widget_types/simple_power_consumption_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_power_consumption_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'powerConsumption', label: 'Power consumption', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'powerConsumption', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'powerConsumption', label: 'Power consumption', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'powerConsumption', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_pressure_chart_card.json b/application/src/main/data/json/system/widget_types/simple_pressure_chart_card.json
index 6c4fee20f3..dcc4b11510 100644
--- a/application/src/main/data/json/system/widget_types/simple_pressure_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_pressure_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pressure', label: 'Pressure', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pressure', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pressure', label: 'Pressure', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pressure', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_pressure_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_pressure_chart_card_with_background.json
index 7badd77d12..0c177e6364 100644
--- a/application/src/main/data/json/system/widget_types/simple_pressure_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_pressure_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pressure', label: 'Pressure', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pressure', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'pressure', label: 'Pressure', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'pressure', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_pump_vibration_chart_card.json b/application/src/main/data/json/system/widget_types/simple_pump_vibration_chart_card.json
index eb5ea6c759..a84a49e2de 100644
--- a/application/src/main/data/json/system/widget_types/simple_pump_vibration_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_pump_vibration_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'vibration', label: 'Vibration', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'vibration', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'vibration', label: 'Vibration', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'vibration', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_pump_vibration_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_pump_vibration_chart_card_with_background.json
index d2712e2c13..5cb064c807 100644
--- a/application/src/main/data/json/system/widget_types/simple_pump_vibration_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_pump_vibration_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'vibration', label: 'Vibration', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'vibration', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'vibration', label: 'Vibration', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'vibration', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_radon_level_chart_card.json b/application/src/main/data/json/system/widget_types/simple_radon_level_chart_card.json
index 2848853b60..27faab79ac 100644
--- a/application/src/main/data/json/system/widget_types/simple_radon_level_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_radon_level_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'radon', label: 'Radon level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'radon', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'radon', label: 'Radon level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'radon', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_radon_level_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_radon_level_chart_card_with_background.json
index 20fc9ccb08..84e90026ad 100644
--- a/application/src/main/data/json/system/widget_types/simple_radon_level_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_radon_level_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'radon', label: 'Radon level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'radon', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'radon', label: 'Radon level', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'radon', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_rainfall_chart_card.json b/application/src/main/data/json/system/widget_types/simple_rainfall_chart_card.json
index 686c411edc..ddbf9c66ee 100644
--- a/application/src/main/data/json/system/widget_types/simple_rainfall_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_rainfall_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'rainfall', label: 'Rainfall', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'rainfall', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'rainfall', label: 'Rainfall', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'rainfall', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_rainfall_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_rainfall_chart_card_with_background.json
index af0fce10e8..c5f82d49b9 100644
--- a/application/src/main/data/json/system/widget_types/simple_rainfall_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_rainfall_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'rainfall', label: 'Rainfall', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'rainfall', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'rainfall', label: 'Rainfall', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'rainfall', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_rotational_speed_chart_card.json b/application/src/main/data/json/system/widget_types/simple_rotational_speed_chart_card.json
index 8412618476..9e39e6ad0a 100644
--- a/application/src/main/data/json/system/widget_types/simple_rotational_speed_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_rotational_speed_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'rotationalSpeed', label: 'Rotaional speed', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'rotationalSpeed', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'rotationalSpeed', label: 'Rotaional speed', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'rotationalSpeed', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_rotational_speed_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_rotational_speed_chart_card_with_background.json
index 66d0b6e22f..2f338515c5 100644
--- a/application/src/main/data/json/system/widget_types/simple_rotational_speed_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_rotational_speed_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'rotationalSpeed', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'rotationalSpeed', label: 'Rotational speed', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'rotationalSpeed', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_snow_depth_chart_card.json b/application/src/main/data/json/system/widget_types/simple_snow_depth_chart_card.json
index 5dfcde8452..e23671c563 100644
--- a/application/src/main/data/json/system/widget_types/simple_snow_depth_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_snow_depth_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'snow', label: 'Snow depth', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'snow', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'snow', label: 'Snow depth', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'snow', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_snow_depth_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_snow_depth_chart_card_with_background.json
index 6a0eedd1e6..48010dbcc9 100644
--- a/application/src/main/data/json/system/widget_types/simple_snow_depth_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_snow_depth_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'snow', label: 'Snow depth', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'snow', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'snow', label: 'Snow depth', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'snow', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_soil_moisture_chart_card.json b/application/src/main/data/json/system/widget_types/simple_soil_moisture_chart_card.json
index 580765fef0..3f9e4450aa 100644
--- a/application/src/main/data/json/system/widget_types/simple_soil_moisture_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_soil_moisture_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'soilMoisture', label: 'Soil Moisture', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'soilMoisture', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'soilMoisture', label: 'Soil Moisture', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'soilMoisture', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_soil_moisture_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_soil_moisture_chart_card_with_background.json
index 664fd455db..916c7d7d37 100644
--- a/application/src/main/data/json/system/widget_types/simple_soil_moisture_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_soil_moisture_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'soilMoisture', label: 'Soil Moisture', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'soilMoisture', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'soilMoisture', label: 'Soil Moisture', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'soilMoisture', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_solar_radiation_chart_card.json b/application/src/main/data/json/system/widget_types/simple_solar_radiation_chart_card.json
index cc74223a80..e3ebfac43a 100644
--- a/application/src/main/data/json/system/widget_types/simple_solar_radiation_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_solar_radiation_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'radiation', label: 'Solar Radiation', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'radiation', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'radiation', label: 'Solar Radiation', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'radiation', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_solar_radiation_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_solar_radiation_chart_card_with_background.json
index 2d249e39fe..f3fc53349f 100644
--- a/application/src/main/data/json/system/widget_types/simple_solar_radiation_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_solar_radiation_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'radiation', label: 'Solar Radiation', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'radiation', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'radiation', label: 'Solar Radiation', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'radiation', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_sulfur_dioxide__so2__chart_card.json b/application/src/main/data/json/system/widget_types/simple_sulfur_dioxide__so2__chart_card.json
index 9ae058387f..0a91102cdc 100644
--- a/application/src/main/data/json/system/widget_types/simple_sulfur_dioxide__so2__chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_sulfur_dioxide__so2__chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'sulfur', label: 'Sulfur dioxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'sulfur', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'sulfur', label: 'Sulfur dioxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'sulfur', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_sulfur_dioxide__so2__chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_sulfur_dioxide__so2__chart_card_with_background.json
index f1c7f5bb28..2a016e3072 100644
--- a/application/src/main/data/json/system/widget_types/simple_sulfur_dioxide__so2__chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_sulfur_dioxide__so2__chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'sulfur', label: 'Sulfur dioxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'sulfur', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'sulfur', label: 'Sulfur dioxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'sulfur', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_temperature_chart_card.json b/application/src/main/data/json/system/widget_types/simple_temperature_chart_card.json
index dafe200284..bac4ec201e 100644
--- a/application/src/main/data/json/system/widget_types/simple_temperature_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_temperature_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'temperature', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'temperature', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_temperature_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_temperature_chart_card_with_background.json
index 3978472008..50145be107 100644
--- a/application/src/main/data/json/system/widget_types/simple_temperature_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_temperature_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'temperature', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'temperature', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_uv_index_chart_card.json b/application/src/main/data/json/system/widget_types/simple_uv_index_chart_card.json
index 7b1a2d9d59..d10f55833b 100644
--- a/application/src/main/data/json/system/widget_types/simple_uv_index_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_uv_index_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'uv', label: 'UV Index', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'uv', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'uv', label: 'UV Index', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'uv', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_uv_index_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_uv_index_chart_card_with_background.json
index 5f019906b0..a1ba49e7bc 100644
--- a/application/src/main/data/json/system/widget_types/simple_uv_index_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_uv_index_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'uv', label: 'UV Index', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'uv', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'uv', label: 'UV Index', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'uv', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_value_and_chart_card.json b/application/src/main/data/json/system/widget_types/simple_value_and_chart_card.json
index 8e47fbcef5..0fea1b6682 100644
--- a/application/src/main/data/json/system/widget_types/simple_value_and_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_value_and_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Temperature', type: 'timeseries', color: 'rgba(63, 82, 221, 1)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'temperature', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Temperature', type: 'timeseries', color: 'rgba(63, 82, 221, 1)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'temperature', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_vibration_chart_card.json b/application/src/main/data/json/system/widget_types/simple_vibration_chart_card.json
index bffa462146..a045af5ef6 100644
--- a/application/src/main/data/json/system/widget_types/simple_vibration_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_vibration_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'vibration', label: 'Vibration', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'vibration', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'vibration', label: 'Vibration', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'vibration', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_vibration_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_vibration_chart_card_with_background.json
index 71623f6d97..9e39eed359 100644
--- a/application/src/main/data/json/system/widget_types/simple_vibration_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_vibration_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'vibration', label: 'Vibration', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'vibration', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'vibration', label: 'Vibration', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'vibration', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_visibility_chart_card.json b/application/src/main/data/json/system/widget_types/simple_visibility_chart_card.json
index 28b96052a9..7f098c8d96 100644
--- a/application/src/main/data/json/system/widget_types/simple_visibility_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_visibility_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'visibility', label: 'Visibility', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'visibility', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'visibility', label: 'Visibility', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'visibility', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_visibility_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_visibility_chart_card_with_background.json
index df7b853cac..6deff18090 100644
--- a/application/src/main/data/json/system/widget_types/simple_visibility_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_visibility_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'visibility', label: 'Visibility', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'visibility', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'visibility', label: 'Visibility', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'visibility', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_volatile_organic_compounds_chart_card.json b/application/src/main/data/json/system/widget_types/simple_volatile_organic_compounds_chart_card.json
index c86d935666..d176526dcb 100644
--- a/application/src/main/data/json/system/widget_types/simple_volatile_organic_compounds_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_volatile_organic_compounds_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'voc', label: 'VOCs', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'voc', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'voc', label: 'VOCs', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'voc', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_volatile_organic_compounds_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_volatile_organic_compounds_chart_card_with_background.json
index 06e67ceeba..1eba6b3fd0 100644
--- a/application/src/main/data/json/system/widget_types/simple_volatile_organic_compounds_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_volatile_organic_compounds_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'voc', label: 'VOCs', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'voc', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'voc', label: 'VOCs', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'voc', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_wind_speed_chart_card.json b/application/src/main/data/json/system/widget_types/simple_wind_speed_chart_card.json
index 0ef705b929..6660f67d78 100644
--- a/application/src/main/data/json/system/widget_types/simple_wind_speed_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/simple_wind_speed_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'speed', label: 'Wind Speed', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'speed', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'speed', label: 'Wind Speed', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'speed', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/simple_wind_speed_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/simple_wind_speed_chart_card_with_background.json
index 96c3088485..fadebc2925 100644
--- a/application/src/main/data/json/system/widget_types/simple_wind_speed_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/simple_wind_speed_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-value-chart-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-chart-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'speed', label: 'Wind Speed', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'speed', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueChartCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.valueChartCardWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.valueChartCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.valueChartCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '300px',\n        previewHeight: '150px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'speed', label: 'Wind Speed', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)'}\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent) {\n            return [{ name: 'speed', label: 'Latest', type: 'timeseries'}];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-value-chart-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/slider.json b/application/src/main/data/json/system/widget_types/slider.json
index 807a4c64ec..c42a52201c 100644
--- a/application/src/main/data/json/system/widget_types/slider.json
+++ b/application/src/main/data/json/system/widget_types/slider.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-slider-widget\n    [ctx]='ctx'\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-slider-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.actionWidget.onInit();\n}\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '360px',\n        previewHeight: '220px',\n        embedTitlePanel: true,\n        displayRpcMessageToast: false\n    };\n};\n\nself.onDestroy = function() {\n}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.actionWidget.onInit();\n}\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '360px',\n        previewHeight: '220px',\n        embedTitlePanel: true,\n        displayRpcMessageToast: false,\n        supportsUnitConversion: true\n    };\n};\n\nself.onDestroy = function() {\n}\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "{}\n",
     "settingsDirective": "tb-slider-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/snow_depth_card.json b/application/src/main/data/json/system/widget_types/snow_depth_card.json
index 4bb8c0cfb4..1d8f56a2fb 100644
--- a/application/src/main/data/json/system/widget_types/snow_depth_card.json
+++ b/application/src/main/data/json/system/widget_types/snow_depth_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'snow', label: 'Snow depth', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'snow', label: 'Snow depth', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/snow_depth_card_with_background.json b/application/src/main/data/json/system/widget_types/snow_depth_card_with_background.json
index 9b8e2684f1..c9f1b12488 100644
--- a/application/src/main/data/json/system/widget_types/snow_depth_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/snow_depth_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'snow', label: 'Snow depth', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'snow', label: 'Snow depth', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/snow_depth_chart_card.json b/application/src/main/data/json/system/widget_types/snow_depth_chart_card.json
index c7d0567bb7..decfe00951 100644
--- a/application/src/main/data/json/system/widget_types/snow_depth_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/snow_depth_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'snow', label: 'Snow depth', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'cm', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'snow', 'cm', 1);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'snow', label: 'Snow depth', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'cm', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'snow', 'cm', 1);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/snow_depth_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/snow_depth_chart_card_with_background.json
index 4c86f328e9..f0b2951731 100644
--- a/application/src/main/data/json/system/widget_types/snow_depth_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/snow_depth_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'snow', label: 'Snow depth', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'cm', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'snow', 'cm', 1);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'snow', label: 'Snow depth', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'cm', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'snow', 'cm', 1);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/soil_moisture_card.json b/application/src/main/data/json/system/widget_types/soil_moisture_card.json
index f9ca79abd6..03df119344 100644
--- a/application/src/main/data/json/system/widget_types/soil_moisture_card.json
+++ b/application/src/main/data/json/system/widget_types/soil_moisture_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'soilMoisture', label: 'Soil Moisture', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'soilMoisture', label: 'Soil Moisture', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/soil_moisture_card_with_background.json b/application/src/main/data/json/system/widget_types/soil_moisture_card_with_background.json
index 84f9b17b54..a66fbc1532 100644
--- a/application/src/main/data/json/system/widget_types/soil_moisture_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/soil_moisture_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'soilMoisture', label: 'Soil Moisture', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'soilMoisture', label: 'Soil Moisture', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/soil_moisture_chart_card.json b/application/src/main/data/json/system/widget_types/soil_moisture_chart_card.json
index f8c96a4e4a..986100613a 100644
--- a/application/src/main/data/json/system/widget_types/soil_moisture_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/soil_moisture_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'soilMoisture', label: 'Soil Moisture', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'soilMoisture', '%', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'soilMoisture', label: 'Soil Moisture', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'soilMoisture', '%', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/soil_moisture_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/soil_moisture_chart_card_with_background.json
index 0b603b0f97..acce7054b3 100644
--- a/application/src/main/data/json/system/widget_types/soil_moisture_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/soil_moisture_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'soilMoisture', label: 'Soil Moisture', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'soilMoisture', '%', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'soilMoisture', label: 'Soil Moisture', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '%', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'soilMoisture', '%', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/soil_moisture_progress_bar.json b/application/src/main/data/json/system/widget_types/soil_moisture_progress_bar.json
index 47cf50f25e..efd88de86c 100644
--- a/application/src/main/data/json/system/widget_types/soil_moisture_progress_bar.json
+++ b/application/src/main/data/json/system/widget_types/soil_moisture_progress_bar.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'soilMoisture', label: 'Soil Moisture', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'soilMoisture', label: 'Soil Moisture', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/soil_moisture_progress_bar_with_background.json b/application/src/main/data/json/system/widget_types/soil_moisture_progress_bar_with_background.json
index f677bac5e8..da1ec3617a 100644
--- a/application/src/main/data/json/system/widget_types/soil_moisture_progress_bar_with_background.json
+++ b/application/src/main/data/json/system/widget_types/soil_moisture_progress_bar_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-progress-bar-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-progress-bar-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'soilMoisture', label: 'Soil Moisture', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.progressBarWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.progressBarWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '280px',\n        previewHeight: '180px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'soilMoisture', label: 'Soil Moisture', type: 'timeseries' }];\n        }\n    };\n};\n\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-progress-bar-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-progress-bar-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/solar_radiation_card.json b/application/src/main/data/json/system/widget_types/solar_radiation_card.json
index e4770c027e..286668be56 100644
--- a/application/src/main/data/json/system/widget_types/solar_radiation_card.json
+++ b/application/src/main/data/json/system/widget_types/solar_radiation_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'radiation', label: 'Solar Radiation', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'radiation', label: 'Solar Radiation', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/solar_radiation_card_with_background.json b/application/src/main/data/json/system/widget_types/solar_radiation_card_with_background.json
index 82490edb98..7264f59fe2 100644
--- a/application/src/main/data/json/system/widget_types/solar_radiation_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/solar_radiation_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'radiation', label: 'Solar Radiation', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'radiation', label: 'Solar Radiation', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/solar_radiation_chart_card.json b/application/src/main/data/json/system/widget_types/solar_radiation_chart_card.json
index 4a728ca65f..a96b0f8c89 100644
--- a/application/src/main/data/json/system/widget_types/solar_radiation_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/solar_radiation_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'radiation', label: 'Solar Radiation', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'W/m²', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'radiation', 'W/m²', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'radiation', label: 'Solar Radiation', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'W/m²', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'radiation', 'W/m²', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/solar_radiation_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/solar_radiation_chart_card_with_background.json
index 63b6e4c8c6..a0dac85a70 100644
--- a/application/src/main/data/json/system/widget_types/solar_radiation_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/solar_radiation_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'radiation', label: 'Solar Radiation', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'W/m²', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'radiation', 'W/m²', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'radiation', label: 'Solar Radiation', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'W/m²', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'radiation', 'W/m²', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/speed_gauge.json b/application/src/main/data/json/system/widget_types/speed_gauge.json
index 67a8ac2b6f..e0e3bc4732 100644
--- a/application/src/main/data/json/system/widget_types/speed_gauge.json
+++ b/application/src/main/data/json/system/widget_types/speed_gauge.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<canvas id=\"radialGauge\"></canvas>\n",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'speed', label: 'Speed', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'speed', label: 'Speed', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-analogue-radial-gauge-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-radial-gauge-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/sulfur_dioxide__so2__card.json b/application/src/main/data/json/system/widget_types/sulfur_dioxide__so2__card.json
index 60f7e9d34e..25b950df3e 100644
--- a/application/src/main/data/json/system/widget_types/sulfur_dioxide__so2__card.json
+++ b/application/src/main/data/json/system/widget_types/sulfur_dioxide__so2__card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'sulfur', label: 'Sulfur dioxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'sulfur', label: 'Sulfur dioxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/sulfur_dioxide__so2__card_with_background.json b/application/src/main/data/json/system/widget_types/sulfur_dioxide__so2__card_with_background.json
index dc748fb163..a097776152 100644
--- a/application/src/main/data/json/system/widget_types/sulfur_dioxide__so2__card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/sulfur_dioxide__so2__card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'sulfur', label: 'Sulfur dioxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'sulfur', label: 'Sulfur dioxide', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/sulfur_dioxide__so2__chart_card.json b/application/src/main/data/json/system/widget_types/sulfur_dioxide__so2__chart_card.json
index b6ac3d19ba..597c454242 100644
--- a/application/src/main/data/json/system/widget_types/sulfur_dioxide__so2__chart_card.json
+++ b/application/src/main/data/json/system/widget_types/sulfur_dioxide__so2__chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'sulfur', label: 'Sulfur dioxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'sulfur', 'µg/m³', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'sulfur', label: 'Sulfur dioxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'sulfur', 'µg/m³', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/sulfur_dioxide__so2__chart_card_with_background.json b/application/src/main/data/json/system/widget_types/sulfur_dioxide__so2__chart_card_with_background.json
index 72489249c1..3934f87dc0 100644
--- a/application/src/main/data/json/system/widget_types/sulfur_dioxide__so2__chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/sulfur_dioxide__so2__chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'sulfur', label: 'Sulfur dioxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'sulfur', 'µg/m³', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'sulfur', label: 'Sulfur dioxide', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'µg/m³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'sulfur', 'µg/m³', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/temperature_card.json b/application/src/main/data/json/system/widget_types/temperature_card.json
index 5e08ff59e1..1308512c13 100644
--- a/application/src/main/data/json/system/widget_types/temperature_card.json
+++ b/application/src/main/data/json/system/widget_types/temperature_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/temperature_card_with_background.json b/application/src/main/data/json/system/widget_types/temperature_card_with_background.json
index 012ac809e8..f711b715d5 100644
--- a/application/src/main/data/json/system/widget_types/temperature_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/temperature_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/temperature_chart_card.json b/application/src/main/data/json/system/widget_types/temperature_chart_card.json
index c4fdd16309..689de25c3f 100644
--- a/application/src/main/data/json/system/widget_types/temperature_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/temperature_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '°C', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'temperature', '°C', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '°C', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'temperature', '°C', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/temperature_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/temperature_chart_card_with_background.json
index ab21d071fc..582d22c0f6 100644
--- a/application/src/main/data/json/system/widget_types/temperature_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/temperature_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '°C', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'temperature', '°C', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'temperature', label: 'Temperature', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '°C', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'temperature', '°C', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/temperature_gauge.json b/application/src/main/data/json/system/widget_types/temperature_gauge.json
index e07a819bf4..0db4b047f0 100644
--- a/application/src/main/data/json/system/widget_types/temperature_gauge.json
+++ b/application/src/main/data/json/system/widget_types/temperature_gauge.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<canvas id=\"radialGauge\"></canvas>\n",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-analogue-radial-gauge-widget-settings",
     "dataKeySettingsDirective": "",
     "hasBasicMode": true,
diff --git a/application/src/main/data/json/system/widget_types/temperature_radial_gauge.json b/application/src/main/data/json/system/widget_types/temperature_radial_gauge.json
index 37f0454576..a508264166 100644
--- a/application/src/main/data/json/system/widget_types/temperature_radial_gauge.json
+++ b/application/src/main/data/json/system/widget_types/temperature_radial_gauge.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<canvas id=\"radialGauge\"></canvas>\n",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-analogue-radial-gauge-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-radial-gauge-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/temperature_range_chart.json b/application/src/main/data/json/system/widget_types/temperature_range_chart.json
index 48d06f11d2..2810381c51 100644
--- a/application/src/main/data/json/system/widget_types/temperature_range_chart.json
+++ b/application/src/main/data/json/system/widget_types/temperature_range_chart.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-range-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-range-chart-widget>",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-range-chart-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/temperature_range_chart_with_background.json b/application/src/main/data/json/system/widget_types/temperature_range_chart_with_background.json
index 999289448f..e4e49fe12c 100644
--- a/application/src/main/data/json/system/widget_types/temperature_range_chart_with_background.json
+++ b/application/src/main/data/json/system/widget_types/temperature_range_chart_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-range-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-range-chart-widget>",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-range-chart-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/thermometer_scale.json b/application/src/main/data/json/system/widget_types/thermometer_scale.json
index 031914d248..f1270c3e2b 100644
--- a/application/src/main/data/json/system/widget_types/thermometer_scale.json
+++ b/application/src/main/data/json/system/widget_types/thermometer_scale.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<canvas id=\"linearGauge\"></canvas>\n",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueLinearGauge(self.ctx, 'linearGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbAnalogueLinearGauge(self.ctx, 'linearGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-analogue-linear-gauge-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-thermometer-scale-gauge-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/time_series_chart.json b/application/src/main/data/json/system/widget_types/time_series_chart.json
index d61472b6f9..80afebe8bf 100644
--- a/application/src/main/data/json/system/widget_types/time_series_chart.json
+++ b/application/src/main/data/json/system/widget_types/time_series_chart.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-time-series-chart-widget \n    [ctx]=\"ctx\">\n</tb-time-series-chart-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onDataUpdated();\n}\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onLatestDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        hasAdditionalLatestDataKeys: true,\n        dataKeySettingsFunction: TbTimeSeriesChart.dataKeySettings(),\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries', units: '°C', decimals: 0 }];\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onDataUpdated();\n}\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onLatestDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        hasAdditionalLatestDataKeys: true,\n        supportsUnitConversion: true,\n        dataKeySettingsFunction: TbTimeSeriesChart.dataKeySettings(),\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries', units: '°C', decimals: 0 }];\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-time-series-chart-widget-settings",
     "dataKeySettingsDirective": "tb-time-series-chart-key-settings",
     "latestDataKeySettingsDirective": "",
diff --git a/application/src/main/data/json/system/widget_types/timeseries_table.json b/application/src/main/data/json/system/widget_types/timeseries_table.json
index 753ce172f6..8343eb918c 100644
--- a/application/src/main/data/json/system/widget_types/timeseries_table.json
+++ b/application/src/main/data/json/system/widget_types/timeseries_table.json
@@ -11,10 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-timeseries-table-widget \n    [ctx]=\"ctx\">\n</tb-timeseries-table-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n     self.ctx.$scope.timeseriesTableWidget.onDataUpdated();\n}\n\nself.onLatestDataUpdated = function() {\n     self.ctx.$scope.timeseriesTableWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n     self.ctx.$scope.timeseriesTableWidget.onEditModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        ignoreDataUpdateOnIntervalTick: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries', units: '°C', decimals: 0 }];\n        }\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
-    "latestDataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n     self.ctx.$scope.timeseriesTableWidget.onDataUpdated();\n}\n\nself.onLatestDataUpdated = function() {\n     self.ctx.$scope.timeseriesTableWidget.onLatestDataUpdated();\n}\n\nself.onEditModeChanged = function() {\n     self.ctx.$scope.timeseriesTableWidget.onEditModeChanged();\n}\n\nself.typeParameters = function() {\n    return {\n        ignoreDataUpdateOnIntervalTick: true,\n        hasAdditionalLatestDataKeys: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries', units: '°C', decimals: 0 }];\n        }\n    };\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true,\n            hasShowCondition: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n}\n",
     "settingsDirective": "tb-timeseries-table-widget-settings",
     "dataKeySettingsDirective": "tb-timeseries-table-key-settings",
     "latestDataKeySettingsDirective": "tb-timeseries-table-latest-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/uv_index_card.json b/application/src/main/data/json/system/widget_types/uv_index_card.json
index fc6e0fb479..797948b1cb 100644
--- a/application/src/main/data/json/system/widget_types/uv_index_card.json
+++ b/application/src/main/data/json/system/widget_types/uv_index_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'uv', label: 'UV Index', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'uv', label: 'UV Index', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/uv_index_card_with_background.json b/application/src/main/data/json/system/widget_types/uv_index_card_with_background.json
index eabb06a04d..4b3f255401 100644
--- a/application/src/main/data/json/system/widget_types/uv_index_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/uv_index_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'uv', label: 'UV Index', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'uv', label: 'UV Index', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/uv_index_chart_card.json b/application/src/main/data/json/system/widget_types/uv_index_chart_card.json
index 17b34ed296..393f7359a4 100644
--- a/application/src/main/data/json/system/widget_types/uv_index_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/uv_index_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'uv', label: 'UV Index', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'uv', '', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'uv', label: 'UV Index', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'uv', '', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/uv_index_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/uv_index_chart_card_with_background.json
index 4d75147067..78a7b899be 100644
--- a/application/src/main/data/json/system/widget_types/uv_index_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/uv_index_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'uv', label: 'UV Index', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'uv', '', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'uv', label: 'UV Index', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: '', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'uv', '', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/value_and_chart_card.json b/application/src/main/data/json/system/widget_types/value_and_chart_card.json
index 2b24bb1879..45740837c9 100644
--- a/application/src/main/data/json/system/widget_types/value_and_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/value_and_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'watermeter', label: 'Watermeter', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'watermeter', 'm³', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'watermeter', label: 'Watermeter', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm³', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'watermeter', 'm³', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/value_card.json b/application/src/main/data/json/system/widget_types/value_card.json
index bd23ef78b6..a0cce85fa2 100644
--- a/application/src/main/data/json/system/widget_types/value_card.json
+++ b/application/src/main/data/json/system/widget_types/value_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/value_stepper.json b/application/src/main/data/json/system/widget_types/value_stepper.json
index dea2406539..3bd173b9e8 100644
--- a/application/src/main/data/json/system/widget_types/value_stepper.json
+++ b/application/src/main/data/json/system/widget_types/value_stepper.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-value-stepper-widget\n    [ctx]='ctx'\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-stepper-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.actionWidget.onInit();\n}\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '230px',\n        previewHeight: '110px',\n        embedTitlePanel: true,\n        displayRpcMessageToast: false\n    };\n};\n\nself.onDestroy = function() {\n}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.actionWidget.onInit();\n}\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '230px',\n        previewHeight: '110px',\n        embedTitlePanel: true,\n        displayRpcMessageToast: false,\n        supportsUnitConversion: true\n    };\n};\n\nself.onDestroy = function() {\n}\n",
     "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-stepper-widget-settings",
     "hasBasicMode": true,
diff --git a/application/src/main/data/json/system/widget_types/vertical_bar.json b/application/src/main/data/json/system/widget_types/vertical_bar.json
index 5f577ce65c..bd5737cb49 100644
--- a/application/src/main/data/json/system/widget_types/vertical_bar.json
+++ b/application/src/main/data/json/system/widget_types/vertical_bar.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<canvas id=\"digitalGauge\"></canvas>",
     "templateCss": "#gauge {\n    text-align: center;\n   /* margin-left: -100px;\n    margin-right: -100px;*/\n    /*margin-top: -50px;*/\n    \n}\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.gauge = new TbCanvasDigitalGauge(self.ctx, 'digitalGauge');    \n}\n\nself.onDataUpdated = function() {\n    self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n    self.ctx.gauge.resize();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        supportsUnitConversion: true\n    };\n}\n\nself.onMobileModeChanged = function() {\n    self.ctx.gauge.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.gauge.destroy();\n}\n\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-digital-gauge-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-digital-simple-gauge-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/vibration_card.json b/application/src/main/data/json/system/widget_types/vibration_card.json
index 657391066a..033da084fb 100644
--- a/application/src/main/data/json/system/widget_types/vibration_card.json
+++ b/application/src/main/data/json/system/widget_types/vibration_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'vibration', label: 'Vibration ', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'vibration', label: 'Vibration ', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/vibration_card_with_background.json b/application/src/main/data/json/system/widget_types/vibration_card_with_background.json
index 915409ae17..f078b93194 100644
--- a/application/src/main/data/json/system/widget_types/vibration_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/vibration_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'vibration', label: 'Vibration ', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'vibration', label: 'Vibration ', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/vibration_chart_card.json b/application/src/main/data/json/system/widget_types/vibration_chart_card.json
index 9297cfcb69..c7dcf7a6ed 100644
--- a/application/src/main/data/json/system/widget_types/vibration_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/vibration_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'vibration', label: 'Vibration', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm/s²', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'vibration', 'm/s²', 1);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'vibration', label: 'Vibration', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm/s²', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'vibration', 'm/s²', 1);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/vibration_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/vibration_chart_card_with_background.json
index a662f3334f..443d1b7a33 100644
--- a/application/src/main/data/json/system/widget_types/vibration_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/vibration_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'vibration', label: 'Vibration', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm/s²', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'vibration', 'm/s²', 1);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'vibration', label: 'Vibration', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm/s²', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'vibration', 'm/s²', 1);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/visibility_card.json b/application/src/main/data/json/system/widget_types/visibility_card.json
index 8d56d75765..c640c702e9 100644
--- a/application/src/main/data/json/system/widget_types/visibility_card.json
+++ b/application/src/main/data/json/system/widget_types/visibility_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'visibility', label: 'Visibility', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'visibility', label: 'Visibility', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/visibility_card_with_background.json b/application/src/main/data/json/system/widget_types/visibility_card_with_background.json
index f4000966bc..02e12105b8 100644
--- a/application/src/main/data/json/system/widget_types/visibility_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/visibility_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'visibility', label: 'Visibility', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'visibility', label: 'Visibility', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/visibility_chart_card.json b/application/src/main/data/json/system/widget_types/visibility_chart_card.json
index e4a2b35014..fe69562505 100644
--- a/application/src/main/data/json/system/widget_types/visibility_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/visibility_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'visibility', label: 'Visibility', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'km', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'visibility', 'km', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'visibility', label: 'Visibility', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'km', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'visibility', 'km', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/visibility_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/visibility_chart_card_with_background.json
index 0b8840495a..52454f7947 100644
--- a/application/src/main/data/json/system/widget_types/visibility_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/visibility_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'visibility', label: 'Visibility', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'km', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'visibility', 'km', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'visibility', label: 'Visibility', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'km', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'visibility', 'km', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/volatile_organic_compounds_card.json b/application/src/main/data/json/system/widget_types/volatile_organic_compounds_card.json
index 7b55352efd..517ecaf1ce 100644
--- a/application/src/main/data/json/system/widget_types/volatile_organic_compounds_card.json
+++ b/application/src/main/data/json/system/widget_types/volatile_organic_compounds_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'voc', label: 'VOCs', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'voc', label: 'VOCs', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/volatile_organic_compounds_card_with_background.json b/application/src/main/data/json/system/widget_types/volatile_organic_compounds_card_with_background.json
index a97d4ac758..fb5bf45da1 100644
--- a/application/src/main/data/json/system/widget_types/volatile_organic_compounds_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/volatile_organic_compounds_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'voc', label: 'VOCs', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'voc', label: 'VOCs', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/volatile_organic_compounds_chart_card.json b/application/src/main/data/json/system/widget_types/volatile_organic_compounds_chart_card.json
index 533cb2dcaa..b146908138 100644
--- a/application/src/main/data/json/system/widget_types/volatile_organic_compounds_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/volatile_organic_compounds_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'voc', label: 'VOCs', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'ppb', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'voc', 'ppb', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'voc', label: 'VOCs', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'ppb', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'voc', 'ppb', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/volatile_organic_compounds_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/volatile_organic_compounds_chart_card_with_background.json
index 2ff968ffd6..0e1e1890f6 100644
--- a/application/src/main/data/json/system/widget_types/volatile_organic_compounds_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/volatile_organic_compounds_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'voc', label: 'VOCs', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'ppb', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'voc', 'ppb', 0);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'voc', label: 'VOCs', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'ppb', decimals: 0 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'voc', 'ppb', 0);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/wind_speed_and_direction.json b/application/src/main/data/json/system/widget_types/wind_speed_and_direction.json
index 1fc2105431..78c4fdabf0 100644
--- a/application/src/main/data/json/system/widget_types/wind_speed_and_direction.json
+++ b/application/src/main/data/json/system/widget_types/wind_speed_and_direction.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-wind-speed-direction-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-wind-speed-direction-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.windSpeedDirectionWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.windSpeedDirectionWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 2,\n        singleEntity: true,\n        previewWidth: '270px',\n        previewHeight: '270px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'direction', label: 'Wind Direction', type: 'timeseries' },\n                    { name: 'speed', label: 'Wind Speed', type: 'timeseries',\n                      units: 'm/s', decimals: 1 }];\n        }\n    };\n};\n\nself.actionSources = function() {\n    return {\n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.windSpeedDirectionWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.windSpeedDirectionWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 2,\n        singleEntity: true,\n        previewWidth: '270px',\n        previewHeight: '270px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'direction', label: 'Wind Direction', type: 'timeseries' },\n                    { name: 'speed', label: 'Wind Speed', type: 'timeseries',\n                      units: 'm/s', decimals: 1 }];\n        }\n    };\n};\n\nself.actionSources = function() {\n    return {\n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "",
     "settingsDirective": "tb-wind-speed-direction-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/wind_speed_and_direction_with_background.json b/application/src/main/data/json/system/widget_types/wind_speed_and_direction_with_background.json
index 8e44297c4d..f96a21781f 100644
--- a/application/src/main/data/json/system/widget_types/wind_speed_and_direction_with_background.json
+++ b/application/src/main/data/json/system/widget_types/wind_speed_and_direction_with_background.json
@@ -11,7 +11,7 @@
     "resources": [],
     "templateHtml": "<tb-wind-speed-direction-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-wind-speed-direction-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.windSpeedDirectionWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.windSpeedDirectionWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 2,\n        singleEntity: true,\n        previewWidth: '270px',\n        previewHeight: '270px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'direction', label: 'Wind Direction', type: 'timeseries' },\n                    { name: 'speed', label: 'Wind Speed', type: 'timeseries',\n                      units: 'm/s', decimals: 1 }];\n        }\n    };\n};\n\nself.actionSources = function() {\n    return {\n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n};\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.windSpeedDirectionWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.windSpeedDirectionWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 2,\n        singleEntity: true,\n        previewWidth: '270px',\n        previewHeight: '270px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'direction', label: 'Wind Direction', type: 'timeseries' },\n                    { name: 'speed', label: 'Wind Speed', type: 'timeseries',\n                      units: 'm/s', decimals: 1 }];\n        }\n    };\n};\n\nself.actionSources = function() {\n    return {\n        'cardClick': {\n            name: 'widget-action.card-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n};\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "",
     "settingsDirective": "tb-wind-speed-direction-widget-settings",
diff --git a/application/src/main/data/json/system/widget_types/wind_speed_card.json b/application/src/main/data/json/system/widget_types/wind_speed_card.json
index 7dc8b9d8a1..0727d4a905 100644
--- a/application/src/main/data/json/system/widget_types/wind_speed_card.json
+++ b/application/src/main/data/json/system/widget_types/wind_speed_card.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'speed', label: 'Wind Speed', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'speed', label: 'Wind Speed', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/wind_speed_card_with_background.json b/application/src/main/data/json/system/widget_types/wind_speed_card_with_background.json
index ce133f8fdc..1fdc2e2ec3 100644
--- a/application/src/main/data/json/system/widget_types/wind_speed_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/wind_speed_card_with_background.json
@@ -11,9 +11,9 @@
     "resources": [],
     "templateHtml": "<tb-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-value-card-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'speed', label: 'Wind Speed', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
-    "settingsSchema": "",
-    "dataKeySettingsSchema": "",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.valueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.valueCardWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '250px',\n        previewHeight: '250px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'speed', label: 'Wind Speed', type: 'timeseries' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
     "settingsDirective": "tb-value-card-widget-settings",
     "hasBasicMode": true,
     "basicModeDirective": "tb-value-card-basic-config",
diff --git a/application/src/main/data/json/system/widget_types/wind_speed_chart_card.json b/application/src/main/data/json/system/widget_types/wind_speed_chart_card.json
index f08b65f93e..1b057c932d 100644
--- a/application/src/main/data/json/system/widget_types/wind_speed_chart_card.json
+++ b/application/src/main/data/json/system/widget_types/wind_speed_chart_card.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'speed', label: 'Wind Speed', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm/s', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'speed', 'm/s', 1);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'speed', label: 'Wind Speed', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm/s', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'speed', 'm/s', 1);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/application/src/main/data/json/system/widget_types/wind_speed_chart_card_with_background.json b/application/src/main/data/json/system/widget_types/wind_speed_chart_card_with_background.json
index a4fa44b912..7c5b7ff83d 100644
--- a/application/src/main/data/json/system/widget_types/wind_speed_chart_card_with_background.json
+++ b/application/src/main/data/json/system/widget_types/wind_speed_chart_card_with_background.json
@@ -11,10 +11,10 @@
     "resources": [],
     "templateHtml": "<tb-aggregated-value-card-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-aggregated-value-card-widget>\n",
     "templateCss": ".legend {\n    font-size: 13px;\n    line-height: 10px;\n}\n\n.legend table { \n    border-spacing: 0px;\n    border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'speed', label: 'Wind Speed', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm/s', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'speed', 'm/s', 1);\n        }\n    };\n}\n",
-    "settingsSchema": "{}",
-    "dataKeySettingsSchema": "{}",
-    "latestDataKeySettingsSchema": "{}",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDataUpdated();\n};\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onLatestDataUpdated();\n}\n\nself.onResize = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onResize();\n}\n\nself.onEditModeChanged = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onEditModeChanged();\n}\n\nself.onDestroy = function() {\n    self.ctx.$scope.aggregatedValueCardWidget.onDestroy();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '400px',\n        previewHeight: '300px',\n        embedTitlePanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: true,\n        defaultDataKeysFunction: function() {\n            return [\n                 { name: 'speed', label: 'Wind Speed', type: 'timeseries', color: 'rgba(0, 0, 0, 0.87)', units: 'm/s', decimals: 1 }\n            ];\n        },\n        defaultLatestDataKeysFunction: function(configComponent, configData) {\n            return configComponent.createDefaultAggregatedValueLatestDataKeys(configData, 'speed', 'm/s', 1);\n        }\n    };\n}\n",
+    "settingsForm": [],
+    "dataKeySettingsForm": [],
+    "latestDataKeySettingsForm": [],
     "settingsDirective": "tb-aggregated-value-card-widget-settings",
     "dataKeySettingsDirective": "",
     "latestDataKeySettingsDirective": "tb-aggregated-value-card-key-settings",
diff --git a/ui-ngx/src/app/core/api/widget-api.models.ts b/ui-ngx/src/app/core/api/widget-api.models.ts
index d5f1b45a82..3338cffa25 100644
--- a/ui-ngx/src/app/core/api/widget-api.models.ts
+++ b/ui-ngx/src/app/core/api/widget-api.models.ts
@@ -23,7 +23,9 @@ import {
   DatasourceType,
   KeyInfo,
   LegendConfig,
-  LegendData, TargetDevice, WidgetAction,
+  LegendData,
+  TargetDevice,
+  WidgetAction,
   WidgetActionDescriptor,
   widgetType
 } from '@shared/models/widget.models';
@@ -60,9 +62,10 @@ import { AlarmDataService } from '@core/api/alarm-data.service';
 import { IDashboardController } from '@home/components/dashboard-page/dashboard-page.models';
 import { PopoverPlacement } from '@shared/components/popover.models';
 import { PersistentRpc } from '@shared/models/rpc.models';
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, Injector } from '@angular/core';
 import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
 import { MatDialogRef } from '@angular/material/dialog';
+import { TbUnit } from '@shared/models/unit.models';
 
 export interface TimewindowFunctions {
   onUpdateTimewindow: (startTimeMs: number, endTimeMs: number, interval?: number) => void;
@@ -232,6 +235,7 @@ export class WidgetSubscriptionContext {
   dashboardUtils: DashboardUtilsService;
   raf: RafService;
   widgetUtils: IWidgetUtils;
+  $injector: Injector;
   getServerTimeDiff: () => Observable<number>;
 }
 
@@ -283,7 +287,7 @@ export interface WidgetSubscriptionOptions {
   timeForComparison?: ComparisonDuration;
   comparisonCustomIntervalValue?: number;
   decimals?: number;
-  units?: string;
+  units?: TbUnit;
   callbacks?: WidgetSubscriptionCallbacks;
 }
 
diff --git a/ui-ngx/src/app/core/api/widget-subscription.ts b/ui-ngx/src/app/core/api/widget-subscription.ts
index b492c5335f..d3a851016d 100644
--- a/ui-ngx/src/app/core/api/widget-subscription.ts
+++ b/ui-ngx/src/app/core/api/widget-subscription.ts
@@ -23,13 +23,15 @@ import {
   WidgetSubscriptionOptions
 } from '@core/api/widget-api.models';
 import {
-  DataKey, DataKeySettingsWithComparison,
+  DataKey,
+  DataKeySettingsWithComparison,
   DataSet,
   DataSetHolder,
   Datasource,
   DatasourceData,
   datasourcesHasAggregation,
-  DatasourceType, isDataKeySettingsWithComparison,
+  DatasourceType,
+  isDataKeySettingsWithComparison,
   LegendConfig,
   LegendData,
   LegendKey,
@@ -62,7 +64,8 @@ import {
   flatFormattedData,
   formattedDataFormDatasourceData,
   isDefinedAndNotNull,
-  isEqual, isUndefined,
+  isEqual,
+  isUndefined,
   parseHttpErrorMessage
 } from '@core/utils';
 import { EntityId } from '@app/shared/models/id/entity-id';
@@ -84,6 +87,8 @@ import { AlarmDataListener } from '@core/api/alarm-data.service';
 import { RpcStatus } from '@shared/models/rpc.models';
 import { EventEmitter } from '@angular/core';
 import { NOT_SUPPORTED } from '@shared/models/telemetry/telemetry.models';
+import { isNotEmptyTbUnits, TbUnit } from '@shared/models/unit.models';
+import { ValueFormatProcessor } from '@shared/models/widget-settings.models';
 
 const moment = moment_;
 
@@ -189,7 +194,7 @@ export class WidgetSubscription implements IWidgetSubscription {
   stateData: boolean;
   datasourcesOptional: boolean;
   decimals: number;
-  units: string;
+  units: TbUnit;
   comparisonEnabled: boolean;
   timeForComparison: ComparisonDuration;
   comparisonCustomIntervalValue: number;
@@ -619,7 +624,7 @@ export class WidgetSubscription implements IWidgetSubscription {
                 if (additionalInfoJson && additionalInfoJson.description) {
                   entityDescription = additionalInfoJson.description;
                 }
-              } catch (e) {}
+              } catch (e) {/**/}
             }
           }
         }
@@ -1412,9 +1417,13 @@ export class WidgetSubscription implements IWidgetSubscription {
               this.data.push(datasourceData);
               this.hiddenData.push({data: []});
               if (this.displayLegend) {
+                const decimals = isDefinedAndNotNull(dataKey.decimals) ? dataKey.decimals : this.decimals;
+                const units = isNotEmptyTbUnits(dataKey.units) ? dataKey.units : this.units;
+                const valueFormat = ValueFormatProcessor.fromSettings(this.ctx.$injector, {decimals, units})
                 const legendKey: LegendKey = {
                   dataKey,
-                  dataIndex: dataKeyIndex
+                  dataIndex: dataKeyIndex,
+                  valueFormat
                 };
                 this.legendData.keys.push(legendKey);
                 const legendKeyData: LegendKeyData = {
@@ -1644,24 +1653,22 @@ export class WidgetSubscription implements IWidgetSubscription {
   }
 
   private updateLegend(dataIndex: number, data: DataSet, detectChanges: boolean) {
-    const dataKey = this.legendData.keys.find(key => key.dataIndex === dataIndex).dataKey;
-    const decimals = isDefinedAndNotNull(dataKey.decimals) ? dataKey.decimals : this.decimals;
-    const units = dataKey.units && dataKey.units.length ? dataKey.units : this.units;
+    const valueFormat = this.legendData.keys.find(key => key.dataIndex === dataIndex).valueFormat;
     const legendKeyData = this.legendData.data[dataIndex];
     if (this.legendConfig.showMin) {
-      legendKeyData.min = this.ctx.widgetUtils.formatValue(calculateMin(data), decimals, units);
+      legendKeyData.min = valueFormat.format(calculateMin(data));
     }
     if (this.legendConfig.showMax) {
-      legendKeyData.max = this.ctx.widgetUtils.formatValue(calculateMax(data), decimals, units);
+      legendKeyData.max = valueFormat.format(calculateMax(data));
     }
     if (this.legendConfig.showAvg) {
-      legendKeyData.avg = this.ctx.widgetUtils.formatValue(calculateAvg(data), decimals, units);
+      legendKeyData.avg = valueFormat.format(calculateAvg(data));
     }
     if (this.legendConfig.showTotal) {
-      legendKeyData.total = this.ctx.widgetUtils.formatValue(calculateTotal(data), decimals, units);
+      legendKeyData.total = valueFormat.format(calculateTotal(data));
     }
     if (this.legendConfig.showLatest) {
-      legendKeyData.latest = this.ctx.widgetUtils.formatValue(calculateLatest(data), decimals, units);
+      legendKeyData.latest = valueFormat.format(calculateLatest(data));
     }
     this.callbacks.legendDataUpdated(this, detectChanges !== false);
   }
diff --git a/ui-ngx/src/app/core/services/unit.service.ts b/ui-ngx/src/app/core/services/unit.service.ts
index 026ac0f3fe..d09b3fccb3 100644
--- a/ui-ngx/src/app/core/services/unit.service.ts
+++ b/ui-ngx/src/app/core/services/unit.service.ts
@@ -81,11 +81,16 @@ export class UnitService {
   geUnitConverter(unit: TbUnitMapping): TbUnitConverter;
   geUnitConverter(from: string, to: string): TbUnitConverter;
   geUnitConverter(unit: TbUnitMapping | string, to?: string): TbUnitConverter {
-    if (unit !== null && typeof unit === 'object') {
-      const target = this.getTargetUnitSymbol(unit);
-      return this.converter.getUnitConverter(unit.from, target);
+    try {
+      if (unit !== null && typeof unit === 'object') {
+        const target = this.getTargetUnitSymbol(unit);
+        return this.converter.getUnitConverter(unit.from, target);
+      }
+      return this.converter.getUnitConverter(unit as string, to);
+    } catch (e) {
+      console.warn(e);
+      return (x: number) => x;
     }
-    return this.converter.getUnitConverter(unit as string, to);
   }
 
   getTargetUnitSymbol(unit: TbUnitMapping | string): string {
@@ -98,11 +103,16 @@ export class UnitService {
   convertUnitValue(value: number, unit: TbUnitMapping): number;
   convertUnitValue(value: number, from: string, to: string): number;
   convertUnitValue(value: number, unit: string | TbUnitMapping, to?: string): number {
-    if (unit !== null && typeof unit === 'object') {
-      const target = this.getTargetUnitSymbol(unit);
-      return this.converter.convert(value, unit.from, target);
+    try {
+      if (unit !== null && typeof unit === 'object') {
+        const target = this.getTargetUnitSymbol(unit);
+        return this.converter.convert(value, unit.from, target);
+      }
+      return this.converter.convert(value, unit as string, to);
+    } catch (e) {
+      console.warn(e);
+      return value;
     }
-    return this.converter.convert(value, unit as string, to);
   }
 
   private getUnitSystemByTimezone(): UnitSystem {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html
index 9b77abf74f..f1c8787fff 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.html
@@ -48,7 +48,7 @@
   </mat-form-field>
   <div class="tb-units-field">
     <tb-unit-input
-      [allowConverted]="supportsUnitConversion"
+      [supportsUnitConversion]="supportsUnitConversion"
       formControlName="units">
     </tb-unit-input>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.ts
index 23b700ccbf..87b2fbbc48 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-key-row.component.ts
@@ -40,8 +40,6 @@ import {
 } from '@shared/models/widget.models';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { AggregationType } from '@shared/models/time/time.models';
-import { TranslateService } from '@ngx-translate/core';
-import { TruncatePipe } from '@shared/pipe/truncate.pipe';
 import {
   DataKeyConfigDialogComponent,
   DataKeyConfigDialogData
@@ -55,6 +53,7 @@ import {
 import { WidgetConfigCallbacks } from '@home/components/widget/config/widget-config.component.models';
 import { FormProperty } from '@shared/models/dynamic-form.models';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { getSourceTbUnitSymbol, TbUnit } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-aggregated-data-key-row',
@@ -119,10 +118,6 @@ export class AggregatedDataKeyRowComponent implements ControlValueAccessor, OnIn
     return this.widgetConfigComponent.modelValue?.latestDataKeySettingsDirective;
   }
 
-  get isEntityDatasource(): boolean {
-    return [DatasourceType.device, DatasourceType.entity].includes(this.datasourceType);
-  }
-
   get supportsUnitConversion(): boolean {
     return this.widgetConfigComponent.modelValue?.typeParameters?.supportsUnitConversion ?? false;
   }
@@ -132,8 +127,6 @@ export class AggregatedDataKeyRowComponent implements ControlValueAccessor, OnIn
   constructor(private fb: UntypedFormBuilder,
               private dialog: MatDialog,
               private cd: ChangeDetectorRef,
-              public translate: TranslateService,
-              public truncate: TruncatePipe,
               private widgetConfigComponent: WidgetConfigComponent,
               private destroyRef: DestroyRef) {
   }
@@ -258,8 +251,8 @@ export class AggregatedDataKeyRowComponent implements ControlValueAccessor, OnIn
   }
 
   private _valuePreviewFn(): string {
-    const units: string = this.keyRowFormGroup.get('units').value;
+    const units: TbUnit = this.keyRowFormGroup.get('units').value;
     const decimals: number = this.keyRowFormGroup.get('decimals').value;
-    return formatValue(22, decimals, units, true);
+    return formatValue(22, decimals, getSourceTbUnitSymbol(units), true);
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.ts
index f8e22d54dc..b67941e368 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-data-keys-panel.component.ts
@@ -15,7 +15,6 @@
 ///
 
 import {
-  ChangeDetectorRef,
   Component,
   DestroyRef,
   forwardRef,
@@ -33,11 +32,9 @@ import {
   UntypedFormBuilder,
   UntypedFormGroup
 } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
-import { DataKey, DatasourceType, widgetType } from '@shared/models/widget.models';
+import { DataKey, DatasourceType } from '@shared/models/widget.models';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
-import { UtilsService } from '@core/services/utils.service';
 import { DataKeysCallbacks } from '@home/components/widget/lib/settings/common/key/data-keys.component.models';
 import { aggregatedValueCardDefaultKeySettings } from '@home/components/widget/lib/cards/aggregated-value-card.models';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -70,25 +67,13 @@ export class AggregatedDataKeysPanelComponent implements ControlValueAccessor, O
 
   keysListFormGroup: UntypedFormGroup;
 
-  get widgetType(): widgetType {
-    return this.widgetConfigComponent.widgetType;
-  }
-
   get callbacks(): DataKeysCallbacks {
     return this.widgetConfigComponent.widgetConfigCallbacks;
   }
 
-  get noKeys(): boolean {
-    const keys: DataKey[] = this.keysListFormGroup.get('keys').value;
-    return keys.length === 0;
-  }
-
   private propagateChange = (_val: any) => {};
 
   constructor(private fb: UntypedFormBuilder,
-              private dialog: MatDialog,
-              private cd: ChangeDetectorRef,
-              private utils: UtilsService,
               private widgetConfigComponent: WidgetConfigComponent,
               private destroyRef: DestroyRef) {
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html
index 4bc8059906..738dad0210 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/aggregated-value-card-basic-config.component.html
@@ -111,7 +111,7 @@
         {{ 'widgets.aggregated-value-card.chart' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <tb-unit-input class="flex" formControlName="chartUnits"></tb-unit-input>
+        <tb-unit-input class="flex" supportsUnitConversion formControlName="chartUnits"></tb-unit-input>
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="chartDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
           <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html
index 809b12ee83..f205a2b00c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.html
@@ -72,7 +72,7 @@
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.label-value-card.value</div>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <tb-unit-input class="flex" formControlName="units"></tb-unit-input>
+        <tb-unit-input class="flex" formControlName="units" supportsUnitConversion></tb-unit-input>
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
           <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.ts
index eb9dda36f5..370660895c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/label-value-card-basic-config.component.ts
@@ -37,6 +37,7 @@ import {
   getTimewindowConfig,
   setTimewindowConfig
 } from '@home/components/widget/config/timewindow-config-panel.component';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-label-value-card-basic-config',
@@ -184,7 +185,7 @@ export class LabelValueCardBasicConfigComponent extends BasicWidgetConfigCompone
   }
 
   private _valuePreviewFn(): string {
-    const units: string = this.labelValueCardWidgetConfigForm.get('units').value;
+    const units = getSourceTbUnitSymbol(this.labelValueCardWidgetConfigForm.get('units').value);
     const decimals: number = this.labelValueCardWidgetConfigForm.get('decimals').value;
     return formatValue(22, decimals, units, true);
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html
index 8e464e78e2..a0973be506 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html
@@ -91,7 +91,7 @@
         {{ 'widgets.progress-bar.value' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <tb-unit-input class="flex" formControlName="units"></tb-unit-input>
+        <tb-unit-input class="flex" formControlName="units" supportsUnitConversion></tb-unit-input>
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
           <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.ts
index e0c068684d..49e17c6bd0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.ts
@@ -42,6 +42,7 @@ import {
   progressBarLayoutTranslations,
   ProgressBarWidgetSettings
 } from '@home/components/widget/lib/cards/progress-bar-widget.models';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-progress-bar-basic-config',
@@ -258,7 +259,7 @@ export class ProgressBarBasicConfigComponent extends BasicWidgetConfigComponent
   }
 
   private _valuePreviewFn(): string {
-    const units: string = this.widgetConfig.config.units;
+    const units: string = getSourceTbUnitSymbol(this.widgetConfig.config.units);
     const decimals: number = this.widgetConfig.config.decimals;
     return formatValue(78, decimals, units, true);
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
index 644a09fa5b..0cd6504abb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.html
@@ -84,7 +84,7 @@
     <div class="tb-form-row">
       <div class="fixed-title-width" translate>widgets.value-card.value</div>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <tb-unit-input class="flex" formControlName="units" allowConverted></tb-unit-input>
+        <tb-unit-input class="flex" formControlName="units" supportsUnitConversion></tb-unit-input>
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
           <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.ts
index 1c70492e2d..09b60fa123 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-card-basic-config.component.ts
@@ -33,12 +33,7 @@ import {
   setTimewindowConfig
 } from '@home/components/widget/config/timewindow-config-panel.component';
 import { formatValue, isDefinedAndNotNull, isUndefined } from '@core/utils';
-import {
-  DateFormatProcessor,
-  DateFormatSettings,
-  getLabel,
-  setLabel
-} from '@shared/models/widget-settings.models';
+import { DateFormatProcessor, DateFormatSettings, getLabel, setLabel } from '@shared/models/widget-settings.models';
 import {
   valueCardDefaultSettings,
   ValueCardLayout,
@@ -47,6 +42,7 @@ import {
   valueCardLayoutTranslations,
   ValueCardWidgetSettings
 } from '@home/components/widget/lib/cards/value-card-widget.models';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-value-card-basic-config',
@@ -278,7 +274,7 @@ export class ValueCardBasicConfigComponent extends BasicWidgetConfigComponent {
   }
 
   private _valuePreviewFn(): string {
-    const units: string = this.valueCardWidgetConfigForm.get('units').value;
+    const units = getSourceTbUnitSymbol(this.valueCardWidgetConfigForm.get('units').value);
     const decimals: number = this.valueCardWidgetConfigForm.get('decimals').value;
     return formatValue(22, decimals, units, true);
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html
index 5ab069f8c2..dc2dbdf655 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.html
@@ -90,7 +90,7 @@
         {{ 'widgets.value-chart-card.value' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <tb-unit-input class="flex" formControlName="units"></tb-unit-input>
+        <tb-unit-input class="flex" formControlName="units" supportsUnitConversion></tb-unit-input>
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
           <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.ts
index 52ae5f6abb..5113b04a13 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/value-chart-card-basic-config.component.ts
@@ -36,6 +36,7 @@ import {
   valueChartCardLayoutTranslations,
   ValueChartCardWidgetSettings
 } from '@home/components/widget/lib/cards/value-chart-card-widget.models';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-value-chart-card-basic-config',
@@ -247,7 +248,7 @@ export class ValueChartCardBasicConfigComponent extends BasicWidgetConfigCompone
   }
 
   private _valuePreviewFn(): string {
-    const units: string = this.widgetConfig.config.units;
+    const units: string = getSourceTbUnitSymbol(this.widgetConfig.config.units);
     const decimals: number = this.widgetConfig.config.decimals;
     return formatValue(22, decimals, units, true);
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
index 5bce6ed53d..4b4dcd148d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.html
@@ -100,7 +100,8 @@
     <div class="tb-form-row space-between">
       <div translate>widget-config.units-short</div>
       <tb-unit-input
-          formControlName="units">
+        supportsUnitConversion=""
+        formControlName="units">
       </tb-unit-input>
     </div>
     <div class="tb-form-row space-between">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts
index 5b8df88fd1..9f9550062e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/bar-chart-with-labels-basic-config.component.ts
@@ -45,6 +45,7 @@ import {
   BarChartWithLabelsWidgetSettings
 } from '@home/components/widget/lib/chart/bar-chart-with-labels-widget.models';
 import { TimeSeriesChartType } from '@home/components/widget/lib/chart/time-series-chart.models';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-bar-chart-with-labels-basic-config',
@@ -365,7 +366,7 @@ export class BarChartWithLabelsBasicConfigComponent extends BasicWidgetConfigCom
   }
 
   private _tooltipValuePreviewFn(): string {
-    const units: string = this.barChartWidgetConfigForm.get('units').value;
+    const units: string = getSourceTbUnitSymbol(this.barChartWidgetConfigForm.get('units').value);
     const decimals: number = this.barChartWidgetConfigForm.get('decimals').value;
     return formatValue(22, decimals, units, false);
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html
index 4a9569fb29..1f7a02a6f9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.html
@@ -88,7 +88,8 @@
     <div class="tb-form-row space-between">
       <div translate>widget-config.units-short</div>
       <tb-unit-input
-          formControlName="units">
+        supportsUnitConversion
+        formControlName="units">
       </tb-unit-input>
     </div>
     <div class="tb-form-row space-between">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.ts
index 9890895938..4a105c9cdd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/latest-chart-basic-config.component.ts
@@ -53,10 +53,13 @@ import {
   pieChartLabelPositionTranslations
 } from '@home/components/widget/lib/chart/chart.models';
 import {
-  DoughnutLayout, doughnutLayoutImages,
+  DoughnutLayout,
+  doughnutLayoutImages,
   doughnutLayouts,
-  doughnutLayoutTranslations, horizontalDoughnutLayoutImages
+  doughnutLayoutTranslations,
+  horizontalDoughnutLayoutImages
 } from '@home/components/widget/lib/chart/doughnut-widget.models';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 @Directive()
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
@@ -350,7 +353,7 @@ export abstract class LatestChartBasicConfigComponent<S extends LatestChartWidge
   }
 
   private _valuePreviewFn(): string {
-    const units: string = this.latestChartWidgetConfigForm.get('units').value;
+    const units: string = getSourceTbUnitSymbol(this.latestChartWidgetConfigForm.get('units').value);
     const decimals: number = this.latestChartWidgetConfigForm.get('decimals').value;
     return formatValue(110, decimals, units, false);
   }
@@ -361,7 +364,7 @@ export abstract class LatestChartBasicConfigComponent<S extends LatestChartWidge
     if (tooltipValueType === LatestChartTooltipValueType.percentage) {
       return formatValue(35, decimals, '%', false);
     } else {
-      const units: string = this.latestChartWidgetConfigForm.get('units').value;
+      const units: string = getSourceTbUnitSymbol(this.latestChartWidgetConfigForm.get('units').value);
       return formatValue(110, decimals, units, false);
     }
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
index 1d8ca0e5ad..f0d36264e9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.html
@@ -84,7 +84,8 @@
     <div class="tb-form-row space-between">
       <div translate>widget-config.units-short</div>
       <tb-unit-input
-          formControlName="units">
+        supportsUnitConversion=""
+        formControlName="units">
       </tb-unit-input>
     </div>
     <div class="tb-form-row space-between">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts
index 6dc86d9d72..1a2e938612 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts
@@ -56,6 +56,7 @@ import {
   chartShapes,
   chartShapeTranslations
 } from '@home/components/widget/lib/chart/chart.models';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-range-chart-basic-config',
@@ -434,13 +435,13 @@ export class RangeChartBasicConfigComponent extends BasicWidgetConfigComponent {
   }
 
   private _pointLabelPreviewFn(): string {
-    const units: string = this.rangeChartWidgetConfigForm.get('units').value;
+    const units: string = getSourceTbUnitSymbol(this.rangeChartWidgetConfigForm.get('units').value);
     const decimals: number = this.rangeChartWidgetConfigForm.get('decimals').value;
     return formatValue(22, decimals, units, false);
   }
 
   private _tooltipValuePreviewFn(): string {
-    const units: string = this.rangeChartWidgetConfigForm.get('units').value;
+    const units: string = getSourceTbUnitSymbol(this.rangeChartWidgetConfigForm.get('units').value);
     const decimals: number = this.rangeChartWidgetConfigForm.get('decimals').value;
     return formatValue(22, decimals, units, false);
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.html
index ace382d228..32c28aaf81 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.html
@@ -69,7 +69,7 @@
   </div>
   <div *ngIf="!hideUnits && !hideDataKeyUnits && (!singleRow || displayUnitsOrDigits)" class="tb-units-field">
     <tb-unit-input *ngIf="displayUnitsOrDigits"
-      [allowConverted]="supportsUnitConversion"
+                   [supportsUnitConversion]="supportsUnitConversion"
       formControlName="units">
     </tb-unit-input>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html
index d4246c51ca..4c8f160799 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html
@@ -53,11 +53,12 @@
       <div translate>widget-config.units-short</div>
       <div class="flex flex-row items-center justify-start gap-2">
         <tb-unit-input
+          supportsUnitConversion
           formControlName="units">
         </tb-unit-input>
         <tb-font-settings formControlName="unitsFont"
                           disabledLineHeight
-                          [previewText]="radialGaugeWidgetConfigForm.get('units').value">
+                          [previewText]="unitsPreviewFn">
         </tb-font-settings>
         <tb-color-input asBoxInput
                         colorClearButton
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.ts
index bf4c645d27..880dc31b5b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.ts
@@ -31,6 +31,7 @@ import {
 } from '@home/components/widget/config/timewindow-config-panel.component';
 import { formatValue, isUndefined } from '@core/utils';
 import { ColorType } from '@shared/models/widget-settings.models';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 export class GaugeBasicConfigComponent extends BasicWidgetConfigComponent {
 
@@ -49,6 +50,7 @@ export class GaugeBasicConfigComponent extends BasicWidgetConfigComponent {
   radialGaugeWidgetConfigForm: UntypedFormGroup;
 
   valuePreviewFn = this._valuePreviewFn.bind(this);
+  unitsPreviewFn = this._unitsPreviewFn.bind(this);
 
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
@@ -182,7 +184,11 @@ export class GaugeBasicConfigComponent extends BasicWidgetConfigComponent {
   }
 
   private _valuePreviewFn(): string {
-    const units: string = this.radialGaugeWidgetConfigForm.get('units').value;
+    const units: string = getSourceTbUnitSymbol(this.radialGaugeWidgetConfigForm.get('units').value);
     return formatValue(22, 0, units, true);
   }
+
+  private _unitsPreviewFn(): string {
+    return getSourceTbUnitSymbol(this.radialGaugeWidgetConfigForm.get('units').value);
+  }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html
index 97a1e8d1c6..7e7d3517b0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html
@@ -95,6 +95,7 @@
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
         <tb-unit-input
           class="flex"
+          supportsUnitConversion
           formControlName="units">
         </tb-unit-input>
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.ts
index aa6455c4de..67497b0b6e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.ts
@@ -42,6 +42,7 @@ import {
   DigitalGaugeType
 } from '@home/components/widget/lib/digital-gauge.models';
 import { ColorSettings, ColorType } from '@shared/models/widget-settings.models';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-digital-simple-gauge-basic-config',
@@ -266,6 +267,6 @@ export class DigitalSimpleGaugeBasicConfigComponent extends BasicWidgetConfigCom
   }
 
   private _valuePreviewFn(units: boolean): string {
-    return formatValue(22, 0, units ? this.simpleGaugeWidgetConfigForm.get('units').value : null, true);
+    return formatValue(22, 0, units ? getSourceTbUnitSymbol(this.simpleGaugeWidgetConfigForm.get('units').value) : null, true);
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.ts
index 91bb19197c..c3a1e2fa32 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.ts
@@ -43,6 +43,7 @@ import {
   batteryLevelLayoutTranslations,
   BatteryLevelWidgetSettings
 } from '@home/components/widget/lib/indicator/battery-level-widget.models';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-battery-level-basic-config',
@@ -241,7 +242,7 @@ export class BatteryLevelBasicConfigComponent extends BasicWidgetConfigComponent
   }
 
   private _valuePreviewFn(): string {
-    const units: string = this.widgetConfig.config.units;
+    const units: string = getSourceTbUnitSymbol(this.widgetConfig.config.units);
     const decimals: number = this.widgetConfig.config.decimals;
     return formatValue(55, decimals, units, true);
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
index 3fdc6d096b..d2752aebab 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
@@ -142,6 +142,7 @@
         </mat-form-field>
         <tb-unit-input *ngIf="levelCardWidgetConfigForm.get('widgetUnitsSource').value === DataSourceType.static; else selectUnitsAttributes"
                        class="flex" required
+                       supportsUnitConversion
                        [tagFilter]="unitsType.capacity"
                        formControlName="units">
         </tb-unit-input>
@@ -268,6 +269,7 @@
           </mat-slide-toggle>
           <div class="tb-flex row flex-end align-center">
             <tb-unit-input required class="flex"
+                           supportsUnitConversion
                            [tagFilter]="unitsType.capacity"
                            formControlName="tooltipUnits">
             </tb-unit-input>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts
index c9ae57b0d7..3a64cf6b1d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts
@@ -56,7 +56,7 @@ import {
   ShapesTranslations,
   updatedFormSettingsValidators
 } from '@home/components/widget/lib/indicator/liquid-level-widget.models';
-import { UnitsType } from '@shared/models/unit.models';
+import { getSourceTbUnitSymbol, UnitsType } from '@shared/models/unit.models';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { ImageCardsSelectComponent } from '@home/components/widget/lib/settings/common/image-cards-select.component';
 import { map, share, tap } from 'rxjs/operators';
@@ -357,13 +357,13 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
   }
 
   private _valuePreviewFn(): string {
-    const units: string = this.levelCardWidgetConfigForm.get('units').value;
+    const units: string = getSourceTbUnitSymbol(this.levelCardWidgetConfigForm.get('units').value);
     const decimals: number = this.levelCardWidgetConfigForm.get('decimals').value;
     return formatValue(22, decimals, units, true);
   }
 
   private _tooltipValuePreviewFn() {
-    const units: string = this.levelCardWidgetConfigForm.get('tooltipUnits').value;
+    const units: string = getSourceTbUnitSymbol(this.levelCardWidgetConfigForm.get('tooltipUnits').value);
     const decimals: number = this.levelCardWidgetConfigForm.get('tooltipLevelDecimals').value;
     return formatValue(32, decimals, units, true);
   }
@@ -372,7 +372,7 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon
     const value = this.levelCardWidgetConfigForm.get('volumeConstant').value;
     const datasourceUnits = this.levelCardWidgetConfigForm.get('datasourceUnits').value;
     const decimals: number = this.widgetConfig.config.decimals;
-    let units: string = this.widgetConfig.config.units;
+    let units = getSourceTbUnitSymbol(this.widgetConfig.config.units);
 
     if (datasourceUnits !== CapacityUnits.percent) {
       units = datasourceUnits;
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
index d156edb752..04ae0edf63 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.html
@@ -126,7 +126,7 @@
             {{ 'tooltip.value' | translate }}
           </mat-slide-toggle>
           <div class="flex flex-1 flex-row items-center justify-start gap-2">
-            <tb-unit-input class="flex" formControlName="units"></tb-unit-input>
+            <tb-unit-input class="flex" formControlName="units" supportsUnitConversion></tb-unit-input>
             <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
               <input matInput formControlName="decimals" type="number" min="0" max="15" step="1"
                      placeholder="{{ 'widget-config.set' | translate }}">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.ts
index 02bfc2af73..4bf37216a4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/signal-strength-basic-config.component.ts
@@ -46,6 +46,7 @@ import {
   signalStrengthLayoutTranslations,
   SignalStrengthWidgetSettings
 } from '@home/components/widget/lib/indicator/signal-strength-widget.models';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-signal-strength-basic-config',
@@ -305,7 +306,7 @@ export class SignalStrengthBasicConfigComponent extends BasicWidgetConfigCompone
   }
 
   private _tooltipValuePreviewFn(): string {
-    const units: string = this.widgetConfig.config.units;
+    const units: string = getSourceTbUnitSymbol(this.widgetConfig.config.units);
     const decimals: number = this.widgetConfig.config.decimals;
     return formatValue(-76, decimals, units, true);
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
index 95a43fc504..cbbc1c6238 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
@@ -115,7 +115,7 @@
         {{ 'widgets.slider.value' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <tb-unit-input class="flex" formControlName="valueUnits"></tb-unit-input>
+        <tb-unit-input class="flex" formControlName="valueUnits" supportsUnitConversion></tb-unit-input>
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="valueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
           <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.ts
index 79fc48d4ab..564a9fe238 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.ts
@@ -33,6 +33,7 @@ import {
   SliderWidgetSettings
 } from '@home/components/widget/lib/rpc/slider-widget.models';
 import { cssSizeToStrSize, resolveCssSize } from '@shared/models/widget-settings.models';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-slider-basic-config',
@@ -304,7 +305,7 @@ export class SliderBasicConfigComponent extends BasicWidgetConfigComponent {
   }
 
   private _valuePreviewFn(): string {
-    const units: string = this.sliderWidgetConfigForm.get('valueUnits').value;
+    const units: string = getSourceTbUnitSymbol(this.sliderWidgetConfigForm.get('valueUnits').value);
     const decimals: number = this.sliderWidgetConfigForm.get('valueDecimals').value;
     return formatValue(48, decimals, units, false);
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/value-stepper-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/value-stepper-basic-config.component.html
index 2d98e75655..e6b63b2221 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/value-stepper-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/value-stepper-basic-config.component.html
@@ -106,7 +106,7 @@
         {{ 'widgets.value-stepper.value' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <tb-unit-input class="flex" formControlName="valueUnits"></tb-unit-input>
+        <tb-unit-input class="flex" formControlName="valueUnits" supportsUnitConversion></tb-unit-input>
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="valueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
           <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/value-stepper-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/value-stepper-basic-config.component.ts
index 763816b0f9..569a951faa 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/value-stepper-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/value-stepper-basic-config.component.ts
@@ -31,6 +31,7 @@ import {
   valueStepperTypeTranslations,
   ValueStepperWidgetSettings
 } from '@home/components/widget/lib/rpc/value-stepper-widget.models';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 type ButtonAppearanceType = 'left' | 'right';
 
@@ -218,7 +219,7 @@ export class ValueStepperBasicConfigComponent extends BasicWidgetConfigComponent
   }
 
   private _valuePreviewFn(): string {
-    const units: string = this.valueStepperWidgetConfigForm.get('appearance').get('valueUnits').value;
+    const units: string = getSourceTbUnitSymbol(this.valueStepperWidgetConfigForm.get('appearance').get('valueUnits').value);
     const decimals: number = this.valueStepperWidgetConfigForm.get('appearance').get('valueDecimals').value;
     return formatValue(48, decimals, units, false);
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.ts
index 4142adbe1d..807cc659f9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/weather/wind-speed-direction-basic-config.component.ts
@@ -43,6 +43,7 @@ import {
   windSpeedDirectionLayoutTranslations,
   WindSpeedDirectionWidgetSettings
 } from '@home/components/widget/lib/weather/wind-speed-direction-widget.models';
+import { getSourceTbUnitSymbol, TbUnit } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-wind-speed-direction-basic-config',
@@ -272,7 +273,7 @@ export class WindSpeedDirectionBasicConfigComponent extends BasicWidgetConfigCom
   private _centerValuePreviewFn(): string {
     const centerValueDataKey: DataKey = this.windSpeedDirectionWidgetConfigForm.get('centerValueKey').value;
     if (centerValueDataKey) {
-      let units: string = this.widgetConfig.config.units;
+      let units: TbUnit = this.widgetConfig.config.units;
       let decimals: number = this.widgetConfig.config.decimals;
       if (isDefinedAndNotNull(centerValueDataKey?.decimals)) {
         decimals = centerValueDataKey.decimals;
@@ -280,7 +281,7 @@ export class WindSpeedDirectionBasicConfigComponent extends BasicWidgetConfigCom
       if (centerValueDataKey?.units) {
         units = centerValueDataKey.units;
       }
-      return formatValue(25, decimals, units, true);
+      return formatValue(25, decimals, getSourceTbUnitSymbol(units), true);
     } else {
       return '225°';
     }
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.html b/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.html
index 9059decca4..1f48728166 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/datasource.component.html
@@ -93,6 +93,7 @@
                   [hideDataKeyUnits]="hideDataKeyUnits"
                   [hideDataKeyDecimals]="hideDataKeyDecimals"
                   latestDataKeys
+                  [supportsUnitConversion]="supportsUnitConversion"
                   [optDataKeys]="true"
                   [aliasController]="aliasController"
                   [dataKeySettingsForm]="latestDataKeySettingsForm"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts
index 7384f76b62..2268021003 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts
@@ -141,6 +141,7 @@ import {
 import { getCurrentAuthUser } from '@core/auth/auth.selectors';
 import { FormBuilder } from '@angular/forms';
 import { DEFAULT_OVERLAY_POSITIONS } from '@shared/models/overlay.models';
+import { ValueFormatProcessor } from '@shared/models/widget-settings.models';
 
 interface AlarmsTableWidgetSettings extends TableWidgetSettings {
   alarmsTitle: string;
@@ -456,12 +457,13 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
         }
         this.stylesInfo[dataKey.def] = getCellStyleInfo(this.ctx, keySettings, 'value, alarm, ctx');
         const contentFunctionInfo = getCellContentFunctionInfo(this.ctx, keySettings, 'value, alarm, ctx');
-        const contentInfo: CellContentInfo = {
+        const decimals = (dataKey.decimals || dataKey.decimals === 0) ? dataKey.decimals : this.ctx.widgetConfig.decimals;
+        const units = dataKey.units || this.ctx.widgetConfig.units;
+        const valueFormat = ValueFormatProcessor.fromSettings(this.ctx.$injector, {units, decimals, showZeroDecimals: true});
+        this.contentsInfo[dataKey.def] = {
           contentFunction: contentFunctionInfo,
-          units: dataKey.units,
-          decimals: dataKey.decimals
+          valueFormat
         };
-        this.contentsInfo[dataKey.def] = contentInfo;
         this.columnWidth[dataKey.def] = getColumnWidth(keySettings);
         this.columnDefaultVisibility[dataKey.def] = getColumnDefaultVisibility(keySettings, this.ctx);
         this.columnSelectionAvailability[dataKey.def] = getColumnSelectionAvailability(keySettings);
@@ -741,7 +743,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
 
   public rowStyle(alarm: AlarmDataInfo, row: number): Observable<any> {
     let style$: Observable<any>;
-    let res = this.rowStyleCache[row];
+    const res = this.rowStyleCache[row];
     if (!res) {
       style$ = this.rowStylesInfo.pipe(
         map(styleInfo => {
@@ -779,7 +781,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
     let style$: Observable<any>;
     const col = this.columns.indexOf(key);
     const index = row * this.columns.length + col;
-    let res = this.cellStyleCache[index];
+    const res = this.cellStyleCache[index];
     if (!res) {
       if (alarm && key) {
         style$ = this.stylesInfo[key.def].pipe(
@@ -829,7 +831,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
     let content$: Observable<SafeHtml>;
     const col = this.columns.indexOf(key);
     const index = row * this.columns.length + col;
-    let res = this.cellContentCache[index];
+    const res = this.cellContentCache[index];
     if (isUndefined(res)) {
       const contentInfo = this.contentsInfo[key.def];
       content$ = contentInfo.contentFunction.pipe(
@@ -1134,9 +1136,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
           return this.datePipe.transform(value, 'yyyy-MM-dd HH:mm:ss');
         }
       }
-      const decimals = (contentInfo.decimals || contentInfo.decimals === 0) ? contentInfo.decimals : this.ctx.widgetConfig.decimals;
-      const units = contentInfo.units || this.ctx.widgetConfig.units;
-      return this.ctx.utils.formatValue(value, decimals, units, true);
+      return contentInfo.valueFormat.format(value);
     } else {
       return '';
     }
@@ -1350,7 +1350,7 @@ class AlarmsDatasource implements DataSource<AlarmDataInfo> {
     const alarm: AlarmDataInfo = deepClone(alarmData);
     delete alarm.latest;
     const latest = alarmData.latest;
-    this.dataKeys.forEach((dataKey, index) => {
+    this.dataKeys.forEach((dataKey) => {
       const type = dataKeyTypeToEntityKeyType(dataKey.type);
       let value = '';
       if (type) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/analogue-gauge.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/analogue-gauge.models.ts
index 1cbc41c368..c6b523edc6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/analogue-gauge.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/analogue-gauge.models.ts
@@ -22,6 +22,10 @@ import tinycolor from 'tinycolor2';
 import Highlight = CanvasGauges.Highlight;
 import BaseGauge = CanvasGauges.BaseGauge;
 import GenericOptions = CanvasGauges.GenericOptions;
+import { TbUnit } from '@shared/models/unit.models';
+import { ValueFormatProcessor } from '@shared/models/widget-settings.models';
+import { UnitService } from '@core/services/unit.service';
+import { DataKey } from '@shared/models/widget.models';
 
 export type AnimationRule = 'linear' | 'quad' | 'quint' | 'cycle'
                             | 'bounce' | 'elastic' | 'dequad' | 'dequint'
@@ -30,6 +34,7 @@ export type AnimationRule = 'linear' | 'quad' | 'quint' | 'cycle'
 export type AnimationTarget = 'needle' | 'plate';
 
 export interface AnalogueGaugeSettings {
+  formatValue: ValueFormatProcessor,
   minValue: number;
   maxValue: number;
   unitTitle: string;
@@ -71,6 +76,7 @@ interface BaseGaugeModel extends BaseGauge {
 export abstract class TbBaseGauge<S, O extends GenericOptions> {
 
   private gauge: BaseGaugeModel;
+  protected formatValue: ValueFormatProcessor;
 
   protected constructor(protected ctx: WidgetContext, canvasId: string) {
     const gaugeElement = $('#' + canvasId, ctx.$container)[0];
@@ -88,7 +94,10 @@ export abstract class TbBaseGauge<S, O extends GenericOptions> {
       const cellData = this.ctx.data[0];
       if (cellData.data.length > 0) {
         const tvPair = cellData.data[cellData.data.length - 1];
-        const value = parseFloat(tvPair[1]);
+        let value = parseFloat(tvPair[1]);
+        if (this.formatValue) {
+          value = parseFloat(this.formatValue.format(value));
+        }
         if (value !== this.gauge.value) {
           if (!this.gauge.options.animation) {
             this.gauge._value = value;
@@ -126,8 +135,13 @@ export abstract class TbAnalogueGauge<S extends AnalogueGaugeSettings, O extends
 
   protected createGaugeOptions(gaugeElement: HTMLElement, settings: S): O {
 
-    const minValue = settings.minValue || 0;
-    const maxValue = settings.maxValue || 100;
+    const units = getUnits(this.ctx, settings);
+    const valueDec = getValueDec(this.ctx, settings);
+    this.formatValue = ValueFormatProcessor.fromSettings(this.ctx.$injector, {units, decimals: valueDec, ignoreUnitSymbol: true});
+    const unitSymbols = this.ctx.$injector.get(UnitService).getTargetUnitSymbol(units);
+
+    const minValue = Number(this.formatValue.format(settings.minValue || 0));
+    const maxValue = Number(this.formatValue.format(settings.maxValue || 100));
 
     const dataKey = this.ctx.data[0].dataKey;
     const keyColor = settings.defaultColor || dataKey.color;
@@ -138,19 +152,29 @@ export abstract class TbAnalogueGauge<S extends AnalogueGaugeSettings, O extends
 
     const valueInt = settings.valueInt || 3;
 
-    const valueDec = getValueDec(this.ctx, settings);
-
     step = parseFloat(parseFloat(step + '').toFixed(valueDec)) || 1;
 
     const majorTicks: number[] = [];
     const highlights: Highlight[] = [];
     let tick = minValue;
 
+    let hasCustomHighlights = false;
+    if (settings?.highlights?.length > 0) {
+      hasCustomHighlights = true;
+      settings.highlights.forEach((highlight: Highlight) => {
+        highlights.push({
+          from: Number(this.formatValue.format(highlight.from)),
+          to: Number(this.formatValue.format(highlight.to)),
+          color: highlight.color
+        });
+      })
+    }
+
     while (tick <= maxValue) {
       majorTicks.push(tick);
       let nextTick = tick + step;
       nextTick = parseFloat(parseFloat(nextTick + '').toFixed(valueDec));
-      if (tick < maxValue) {
+      if (tick < maxValue && !hasCustomHighlights) {
         const highlightColor = tinycolor(keyColor);
         const percent = (tick - minValue) / total;
         highlightColor.setAlpha(percent);
@@ -175,7 +199,7 @@ export abstract class TbAnalogueGauge<S extends AnalogueGaugeSettings, O extends
       maxValue,
       majorTicks,
       minorTicks: settings.minorTicks || 2,
-      units: getUnits(this.ctx, settings),
+      units: unitSymbols,
       title: ((settings.showUnitTitle !== false) ?
         (settings.unitTitle && settings.unitTitle.length > 0 ?
           settings.unitTitle : dataKey.label) : ''),
@@ -197,7 +221,7 @@ export abstract class TbAnalogueGauge<S extends AnalogueGaugeSettings, O extends
       valueBoxBorderRadius: 2.5,
 
       // highlights
-      highlights: (settings.highlights && settings.highlights.length > 0) ? settings.highlights : highlights,
+      highlights,
       highlightsWidth: (isDefined(settings.highlightsWidth) && settings.highlightsWidth !== null) ? settings.highlightsWidth : 15,
 
       // fonts
@@ -256,8 +280,8 @@ export abstract class TbAnalogueGauge<S extends AnalogueGaugeSettings, O extends
 
 }
 
-function getValueDec(ctx: WidgetContext, settings: AnalogueGaugeSettings): number {
-  let dataKey;
+function getValueDec(ctx: WidgetContext, _settings: AnalogueGaugeSettings): number {
+  let dataKey: DataKey;
   if (ctx.data && ctx.data[0]) {
     dataKey = ctx.data[0].dataKey;
   }
@@ -268,14 +292,14 @@ function getValueDec(ctx: WidgetContext, settings: AnalogueGaugeSettings): numbe
   }
 }
 
-function getUnits(ctx: WidgetContext, settings: AnalogueGaugeSettings): string {
-  let dataKey;
+function getUnits(ctx: WidgetContext, settings: AnalogueGaugeSettings): TbUnit {
+  let dataKey: DataKey;
   if (ctx.data && ctx.data[0]) {
     dataKey = ctx.data[0].dataKey;
   }
-  if (dataKey && dataKey.units && dataKey.units.length) {
+  if (dataKey?.units) {
     return dataKey.units;
   } else {
-    return isDefined(settings.units) && settings.units.length > 0 ? settings.units : ctx.units;
+    return isDefinedAndNotNull(settings.units) ? settings.units : ctx.units;
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts b/ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts
index 9db79a6c4e..ddc8f96d18 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts
@@ -18,7 +18,7 @@ import * as CanvasGauges from 'canvas-gauges';
 import { FontStyle, FontWeight } from '@home/components/widget/lib/settings.models';
 import tinycolor from 'tinycolor2';
 import { isDefined, isDefinedAndNotNull, isUndefined, padValue } from '@core/utils';
-import { ColorProcessor, constantColor } from '@shared/models/widget-settings.models';
+import { ColorProcessor, constantColor, ValueFormatProcessor } from '@shared/models/widget-settings.models';
 import GenericOptions = CanvasGauges.GenericOptions;
 import BaseGauge = CanvasGauges.BaseGauge;
 
@@ -73,6 +73,7 @@ export interface CanvasDigitalGaugeOptions extends GenericOptions {
   showTimestamp?: boolean;
 
   barColorProcessor: ColorProcessor;
+  valueFormat: ValueFormatProcessor;
 }
 
 const defaultDigitalGaugeOptions: CanvasDigitalGaugeOptions = { ...GenericOptions,
@@ -84,6 +85,7 @@ const defaultDigitalGaugeOptions: CanvasDigitalGaugeOptions = { ...GenericOption
 
     gaugeColor: '#777',
     barColorProcessor: ColorProcessor.fromSettings(constantColor('blue')),
+    valueFormat: null,
 
     symbol: '',
     hideValue: false,
@@ -558,8 +560,8 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D,
       bd.barRight = bd.origBaseX + w + /*bd.width*/ -options.fontMinMaxSize / 3 * bd.fontSizeFactor;
     } else {
       context.font = Drawings.font(options, 'MinMax', bd.fontSizeFactor);
-      const minTextWidth = context.measureText(options.minValue + '').width;
-      const maxTextWidth = context.measureText(options.maxValue + '').width;
+      const minTextWidth = context.measureText(options.valueFormat.format(options.minValue) + '').width;
+      const maxTextWidth = context.measureText(options.valueFormat.format(options.maxValue) + '').width;
       const maxW = Math.max(minTextWidth, maxTextWidth);
       bd.minX = bd.origBaseX + maxW / 2 + options.fontMinMaxSize / 3 * bd.fontSizeFactor;
       bd.maxX = bd.origBaseX + w + /*bd.width*/ -maxW / 2 - options.fontMinMaxSize / 3 * bd.fontSizeFactor;
@@ -752,8 +754,8 @@ function drawDigitalMinMax(context: DigitalGaugeCanvasRenderingContext2D, option
   context.textBaseline = fontMinMaxBaseline;
   context.font = Drawings.font(options, 'MinMax', fontSizeFactor);
   context.lineWidth = 0;
-  drawText(context, options, 'MinMax', options.minValue + '', minX, minY);
-  drawText(context, options, 'MinMax', options.maxValue + '', maxX, maxY);
+  drawText(context, options, 'MinMax', options.valueFormat.format(options.minValue) + '', minX, minY);
+  drawText(context, options, 'MinMax', options.valueFormat.format(options.maxValue) + '', maxX, maxY);
   context.restore();
 }
 
@@ -768,7 +770,7 @@ function drawDigitalValue(context: DigitalGaugeCanvasRenderingContext2D, options
   const textX = Math.round(baseX + width / 2);
   const textY = valueY;
 
-  let text = options.valueText || padValue(value, options.valueDec);
+  let text = options.valueText || padValue(options.valueFormat.format(value), options.valueDec);
   text += options.symbol;
 
   context.save();
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts
index 1db352bdba..0432cef1b6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts
@@ -136,7 +136,7 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
     if (dataKey?.name && this.ctx.defaultSubscription.firstDatasource?.latestDataKeys?.length) {
       const dataKeys = this.ctx.defaultSubscription.firstDatasource?.latestDataKeys;
       for (const position of Object.keys(AggregatedValueCardKeyPosition)) {
-        const value = computeAggregatedCardValue(dataKeys, dataKey?.name, AggregatedValueCardKeyPosition[position]);
+        const value = computeAggregatedCardValue(dataKeys, dataKey?.name, AggregatedValueCardKeyPosition[position], this.ctx.$injector, this.ctx.decimals);
         if (value) {
           this.values[position] = value;
         }
@@ -252,7 +252,7 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
         if (tsValue && isDefinedAndNotNull(tsValue[1]) && isNumeric(tsValue[1])) {
           ts = tsValue[0];
           value = tsValue[1];
-          aggValue.value = formatValue(value, (aggValue.key.decimals || this.ctx.decimals), null, false);
+          aggValue.value = aggValue.valueFormat.format(value);
         } else {
           aggValue.value = 'N/A';
         }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card.models.ts
index d97776c9b1..f93cf38a4d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card.models.ts
@@ -19,17 +19,17 @@ import {
   BackgroundType,
   ColorProcessor,
   ColorSettings,
-  ColorType,
   ComponentStyle,
   constantColor,
   DateFormatSettings,
   Font,
   lastUpdateAgoDateFormat,
-  textStyle
+  textStyle,
+  ValueFormatProcessor
 } from '@shared/models/widget-settings.models';
-import { ComparisonResultType, DataEntry, DataKey, DatasourceData } from '@shared/models/widget.models';
-import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
-import { AggregationType } from '@shared/models/time/time.models';
+import { DataEntry, DataKey, DatasourceData } from '@shared/models/widget.models';
+import { Injector } from '@angular/core';
+import { UnitService } from '@core/services/unit.service';
 
 export interface AggregatedValueCardWidgetSettings {
   autoScale: boolean;
@@ -81,10 +81,12 @@ export interface AggregatedValueCardValue {
   showArrow: boolean;
   upArrow: boolean;
   downArrow: boolean;
+  valueFormat: ValueFormatProcessor;
 }
 
 export const computeAggregatedCardValue =
-  (dataKeys: DataKey[], keyName: string, position: AggregatedValueCardKeyPosition): AggregatedValueCardValue => {
+  (dataKeys: DataKey[], keyName: string, position: AggregatedValueCardKeyPosition,
+   $injector: Injector, widgetDecimal: number): AggregatedValueCardValue => {
   const key = dataKeys.find(dataKey => ( dataKey.name === keyName && (dataKey.settings?.position === position ||
                                          (!dataKey.settings?.position && position === AggregatedValueCardKeyPosition.center)) ));
   if (key) {
@@ -92,13 +94,18 @@ export const computeAggregatedCardValue =
     return {
       key,
       value: '',
-      units: key.units,
+      units: $injector.get(UnitService).getTargetUnitSymbol(key.units),
       style: textStyle(settings.font),
       color: ColorProcessor.fromSettings(settings.color),
       center: position === AggregatedValueCardKeyPosition.center,
       showArrow: settings.showArrow,
       upArrow: false,
-      downArrow: false
+      downArrow: false,
+      valueFormat: ValueFormatProcessor.fromSettings($injector, {
+        units: key.units,
+        decimals: key.decimals || widgetDecimal,
+        ignoreUnitSymbol: true,
+      })
     };
   }
 };
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/label-value-card-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/label-value-card-widget.component.ts
index b0833cb802..9af85d4276 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/label-value-card-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/label-value-card-widget.component.ts
@@ -33,12 +33,13 @@ import {
   backgroundStyle,
   ColorProcessor,
   ComponentStyle,
-  getDataKey,
+  createValueFormatterFromSettings,
   getSingleTsValue,
   iconStyle,
   overlayStyle,
   resolveCssSize,
-  textStyle
+  textStyle,
+  ValueFormatProcessor
 } from '@shared/models/widget-settings.models';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -46,7 +47,7 @@ import {
   labelValueCardWidgetDefaultSettings,
   LabelValueCardWidgetSettings
 } from '@home/components/widget/lib/cards/label-value-card-widget.models';
-import { formatValue, isDefinedAndNotNull } from '@core/utils';
+import { isDefinedAndNotNull } from '@core/utils';
 
 @Component({
   selector: 'tb-label-value-card-widget',
@@ -94,9 +95,7 @@ export class LabelValueCardWidgetComponent implements OnInit, AfterViewInit, OnD
   hasCardClickAction = false;
 
   private panelResize$: ResizeObserver;
-
-  private decimals = 0;
-  private units = '';
+  private valueFormat: ValueFormatProcessor;
 
   constructor(private imagePipe: ImagePipe,
               private sanitizer: DomSanitizer,
@@ -108,15 +107,7 @@ export class LabelValueCardWidgetComponent implements OnInit, AfterViewInit, OnD
     this.ctx.$scope.labelValueCardWidget = this;
     this.settings = {...labelValueCardWidgetDefaultSettings, ...this.ctx.settings};
 
-    this.decimals = this.ctx.decimals;
-    this.units = this.ctx.units;
-    const dataKey = getDataKey(this.ctx.datasources);
-    if (isDefinedAndNotNull(dataKey?.decimals)) {
-      this.decimals = dataKey.decimals;
-    }
-    if (dataKey?.units) {
-      this.units = dataKey.units;
-    }
+    this.valueFormat = createValueFormatterFromSettings(this.ctx);
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
@@ -167,7 +158,7 @@ export class LabelValueCardWidgetComponent implements OnInit, AfterViewInit, OnD
     let value;
     if (tsValue && isDefinedAndNotNull(tsValue[1]) && tsValue[0] !== 0) {
       value = tsValue[1];
-      this.valueText = formatValue(value, this.decimals, this.units, false);
+      this.valueText = this.valueFormat.format(value);
     } else {
       this.valueText = 'N/A';
     }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.ts
index 699e9928d6..0e8643ba3b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.ts
@@ -28,17 +28,17 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import { WidgetContext } from '@home/models/widget-component.models';
-import { formatValue, isDefinedAndNotNull, isNumeric } from '@core/utils';
-import { DatePipe } from '@angular/common';
+import { isDefinedAndNotNull, isNumeric } from '@core/utils';
 import {
   backgroundStyle,
   ColorProcessor,
   ComponentStyle,
-  getDataKey,
+  createValueFormatterFromSettings,
   getSingleTsValue,
   overlayStyle,
   resolveCssSize,
-  textStyle
+  textStyle,
+  ValueFormatProcessor
 } from '@shared/models/widget-settings.models';
 import { WidgetComponent } from '@home/components/widget/widget.component';
 import { progressBarDefaultSettings, ProgressBarLayout, ProgressBarWidgetSettings } from './progress-bar-widget.models';
@@ -99,13 +99,10 @@ export class ProgressBarWidgetComponent implements OnInit, OnDestroy, AfterViewI
   overlayStyle: ComponentStyle = {};
   padding: string;
 
-  progressBarPanelResize$: ResizeObserver;
+  private progressBarPanelResize$: ResizeObserver;
+  private valueFormat: ValueFormatProcessor;
 
-  private decimals = 0;
-  private units = '';
-
-  constructor(private date: DatePipe,
-              private imagePipe: ImagePipe,
+  constructor(private imagePipe: ImagePipe,
               private sanitizer: DomSanitizer,
               private widgetComponent: WidgetComponent,
               private renderer: Renderer2,
@@ -116,15 +113,7 @@ export class ProgressBarWidgetComponent implements OnInit, OnDestroy, AfterViewI
     this.ctx.$scope.progressBarWidget = this;
     this.settings = {...progressBarDefaultSettings, ...this.ctx.settings};
 
-    this.decimals = this.ctx.decimals;
-    this.units = this.ctx.units;
-    const dataKey = getDataKey(this.ctx.datasources);
-    if (isDefinedAndNotNull(dataKey?.decimals)) {
-      this.decimals = dataKey.decimals;
-    }
-    if (dataKey?.units) {
-      this.units = dataKey.units;
-    }
+    this.valueFormat = createValueFormatterFromSettings(this.ctx);
 
     this.layout = this.settings.layout;
 
@@ -151,7 +140,7 @@ export class ProgressBarWidgetComponent implements OnInit, OnDestroy, AfterViewI
       ctx: this.ctx,
       minGradientValue: this.settings.tickMin,
       maxGradientValue: this.settings.tickMax
-    });;
+    });
 
     this.showTicks = this.settings.showTicks && this.layout === ProgressBarLayout.default;
     if (this.showTicks) {
@@ -177,6 +166,9 @@ export class ProgressBarWidgetComponent implements OnInit, OnDestroy, AfterViewI
   }
 
   ngOnDestroy() {
+    if (this.progressBarPanelResize$) {
+      this.progressBarPanelResize$.disconnect();
+    }
   }
 
   public onInit() {
@@ -190,7 +182,7 @@ export class ProgressBarWidgetComponent implements OnInit, OnDestroy, AfterViewI
     this.value = 0;
     if (tsValue && isDefinedAndNotNull(tsValue[1]) && isNumeric(tsValue[1])) {
       this.value = tsValue[1];
-      this.valueText = formatValue(this.value, this.decimals, this.units, false);
+      this.valueText = this.valueFormat.format(this.value);
     } else {
       this.valueText = 'N/A';
     }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts
index ff54db2fc3..0a48f67c9c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts
@@ -32,8 +32,8 @@ import {
   backgroundStyle,
   ColorProcessor,
   ComponentStyle,
+  createValueFormatterFromSettings,
   DateFormatProcessor,
-  getDataKey,
   getLabel,
   getSingleTsValue,
   iconStyle,
@@ -116,16 +116,7 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro
     this.ctx.$scope.valueCardWidget = this;
     this.settings = {...valueCardDefaultSettings(this.horizontal), ...this.ctx.settings};
 
-    let decimals = this.ctx.decimals;
-    let units = this.ctx.units;
-    const dataKey = getDataKey(this.ctx.datasources);
-    if (isDefinedAndNotNull(dataKey?.decimals)) {
-      decimals = dataKey.decimals;
-    }
-    if (dataKey?.units) {
-      units = dataKey.units;
-    }
-    this.valueFormat = ValueFormatProcessor.fromSettings(this.ctx.$injector, {units: units, dec: decimals});
+    this.valueFormat = createValueFormatterFromSettings(this.ctx);
 
     this.layout = this.settings.layout;
 
@@ -188,7 +179,7 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro
     if (tsValue && isDefinedAndNotNull(tsValue[1]) && tsValue[0] !== 0) {
       ts = tsValue[0];
       value = tsValue[1];
-      this.valueText = this.valueFormat.update(value); // formatValue(value, this.decimals, this.units, false);
+      this.valueText = this.valueFormat.format(value);
     } else {
       this.valueText = 'N/A';
     }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts
index 9ddf229c98..f9044c2086 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts
@@ -28,7 +28,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import { WidgetContext } from '@home/models/widget-component.models';
-import { formatValue, isDefinedAndNotNull, isNumeric } from '@core/utils';
+import { isDefinedAndNotNull, isNumeric } from '@core/utils';
 import {
   autoDateFormat,
   backgroundStyle,
@@ -37,10 +37,9 @@ import {
   getDataKey,
   overlayStyle,
   resolveCssSize,
-  simpleDateFormat,
-  textStyle
+  textStyle,
+  ValueFormatProcessor
 } from '@shared/models/widget-settings.models';
-import { WidgetComponent } from '@home/components/widget/widget.component';
 import {
   valueChartCardDefaultSettings,
   ValueChartCardLayout,
@@ -105,15 +104,12 @@ export class ValueChartCardWidgetComponent implements OnInit, AfterViewInit, OnD
   private valueKey: DataKey;
   private contentResize$: ResizeObserver;
 
-  private decimals = 0;
-  private units = '';
-
   private valueFontSize: number;
+  private valueFormat: ValueFormatProcessor;
 
   constructor(private imagePipe: ImagePipe,
               private sanitizer: DomSanitizer,
               private renderer: Renderer2,
-              private widgetComponent: WidgetComponent,
               private cd: ChangeDetectorRef) {
   }
 
@@ -122,19 +118,20 @@ export class ValueChartCardWidgetComponent implements OnInit, AfterViewInit, OnD
     this.settings = {...valueChartCardDefaultSettings, ...this.ctx.settings};
 
     if (this.showValue) {
-      this.decimals = this.ctx.decimals;
-      this.units = this.ctx.units;
+      let decimals = this.ctx.decimals ?? 0;
+      let units = this.ctx.units ?? '';
       const dataKey = getDataKey(this.ctx.datasources);
       if (dataKey?.name && this.ctx.defaultSubscription.firstDatasource?.latestDataKeys?.length) {
         const dataKeys = this.ctx.defaultSubscription.firstDatasource?.latestDataKeys;
         this.valueKey = dataKeys?.find(k => k.name === dataKey.name);
         if (isDefinedAndNotNull(this.valueKey?.decimals)) {
-          this.decimals = this.valueKey.decimals;
+          decimals = this.valueKey.decimals;
         }
         if (this.valueKey?.units) {
-          this.units = dataKey.units;
+          units = dataKey.units;
         }
       }
+      this.valueFormat = ValueFormatProcessor.fromSettings(this.ctx.$injector, {units: units, decimals: decimals});
     }
 
     this.layout = this.settings.layout;
@@ -212,7 +209,7 @@ export class ValueChartCardWidgetComponent implements OnInit, AfterViewInit, OnD
       let value;
       if (tsValue && isDefinedAndNotNull(tsValue[1]) && isNumeric(tsValue[1])) {
         value = tsValue[1];
-        this.valueText = formatValue(value, this.decimals, this.units, false);
+        this.valueText = this.valueFormat?.format(value);
       } else {
         this.valueText = 'N/A';
       }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bars-chart.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bars-chart.ts
index ed48e9f9d4..92df6dd363 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bars-chart.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bars-chart.ts
@@ -25,12 +25,13 @@ import { ComponentStyle } from '@shared/models/widget-settings.models';
 import { LinearGradientObject } from 'zrender/lib/graphic/LinearGradient';
 import tinycolor from 'tinycolor2';
 import { BarDataItemOption, BarSeriesLabelOption } from 'echarts/types/src/chart/bar/BarSeries';
-import { formatValue, isDefinedAndNotNull } from '@core/utils';
+import { isDefinedAndNotNull } from '@core/utils';
 import {
   ChartFillType,
   ChartLabelPosition,
   createChartTextStyle,
-  createLinearOpacityGradient, toAnimationOption
+  createLinearOpacityGradient,
+  toAnimationOption
 } from '@home/components/widget/lib/chart/chart.models';
 import { ValueAxisBaseOption } from 'echarts/types/src/coord/axisCommonTypes';
 import { RadiusAxisOption, YAXisOption } from 'echarts/types/dist/shared';
@@ -98,7 +99,7 @@ export class TbBarsChart extends TbLatestChart<BarsChartSettings> {
         fontWeight: axisTickLabelStyle.fontWeight,
         fontFamily: axisTickLabelStyle.fontFamily,
         fontSize: axisTickLabelStyle.fontSize,
-        formatter: (value: any) => formatValue(value, this.decimals, this.units, false)
+        formatter: (value: any) => this.valueFormatter.format(value)
       }
     };
     if (this.settings.polar) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.models.ts
index 931d3c52ed..90928e6c93 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.models.ts
@@ -15,7 +15,7 @@
 ///
 
 import { DataKey, Datasource, LegendPosition } from '@shared/models/widget.models';
-import { BackgroundSettings, BackgroundType, Font } from '@shared/models/widget-settings.models';
+import { BackgroundSettings, BackgroundType, Font, ValueFormatProcessor } from '@shared/models/widget-settings.models';
 import { Renderer2 } from '@angular/core';
 import { CallbackDataParams } from 'echarts/types/dist/shared';
 import { formatValue, isDefinedAndNotNull, mergeDeep } from '@core/utils';
@@ -57,6 +57,7 @@ export interface LatestChartTooltipSettings {
   showTooltip: boolean;
   tooltipValueType: LatestChartTooltipValueType;
   tooltipValueDecimals: number;
+  tooltipValueFormater: ValueFormatProcessor;
   tooltipValueFont: Font;
   tooltipValueColor: string;
   tooltipBackgroundColor: string;
@@ -77,7 +78,8 @@ export const latestChartTooltipDefaultSettings: LatestChartTooltipSettings = {
   },
   tooltipValueColor: 'rgba(0, 0, 0, 0.76)',
   tooltipBackgroundColor: 'rgba(255, 255, 255, 0.76)',
-  tooltipBackgroundBlur: 4
+  tooltipBackgroundBlur: 4,
+  tooltipValueFormater: null
 };
 
 export interface LatestChartSettings extends LatestChartTooltipSettings {
@@ -144,7 +146,6 @@ export const latestChartWidgetDefaultSettings: LatestChartWidgetSettings = {
 export const latestChartTooltipFormatter = (renderer: Renderer2,
                                             settings: LatestChartTooltipSettings,
                                             params: CallbackDataParams,
-                                            units: string,
                                             total: number,
                                             dataItems: LatestChartDataItem[]): null | HTMLElement => {
   if (params.value && Array.isArray(params.value)) {
@@ -160,7 +161,7 @@ export const latestChartTooltipFormatter = (renderer: Renderer2,
         const value = params.value[i];
         renderer.appendChild(tooltipElement,
           constructTooltipSeriesElement(renderer, settings, dataItem.dataKey.label, value as number, null,
-            units, total, dataItem.dataKey.color));
+            total, dataItem.dataKey.color));
       }
       return tooltipElement;
     } else {
@@ -168,7 +169,7 @@ export const latestChartTooltipFormatter = (renderer: Renderer2,
     }
   } else if (params.name) {
     return constructTooltipSeriesElement(renderer, settings, params.name,
-      params.value as number, params.percent, units, total);
+      params.value as number, params.percent, total);
   } else {
     return null;
   }
@@ -179,7 +180,6 @@ const constructTooltipSeriesElement = (renderer: Renderer2,
                                        label: string,
                                        value: number,
                                        percent: number | undefined,
-                                       units: string,
                                        total: number,
                                        circleColor?: string): HTMLElement => {
   let formattedValue: string;
@@ -187,7 +187,7 @@ const constructTooltipSeriesElement = (renderer: Renderer2,
     const percents = isDefinedAndNotNull(percent) ? percent : value / total * 100;
     formattedValue = formatValue(percents, settings.tooltipValueDecimals, '%', false);
   } else {
-    formattedValue = formatValue(value, settings.tooltipValueDecimals, units, false);
+    formattedValue = settings.tooltipValueFormater?.format(value);
   }
   const textElement: HTMLElement = renderer.createElement('div');
   renderer.setStyle(textElement, 'display', 'flex');
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.ts
index fad0d84632..b9f0940b52 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.ts
@@ -25,12 +25,13 @@ import { WidgetContext } from '@home/models/widget-component.models';
 import { DeepPartial } from '@shared/models/common';
 import { Renderer2 } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { formatValue, isDefinedAndNotNull, isNumeric, mergeDeep } from '@core/utils';
+import { isDefinedAndNotNull, isNumeric, mergeDeep } from '@core/utils';
 import { DataKey } from '@shared/models/widget.models';
 import * as echarts from 'echarts/core';
 import { CallbackDataParams } from 'echarts/types/dist/shared';
 import { SVG, Svg } from '@svgdotjs/svg.js';
 import { toAnimationOption } from '@home/components/widget/lib/chart/chart.models';
+import { ValueFormatProcessor } from '@shared/models/widget-settings.models';
 
 export abstract class TbLatestChart<S extends LatestChartSettings> {
 
@@ -38,8 +39,7 @@ export abstract class TbLatestChart<S extends LatestChartSettings> {
 
   protected readonly settings: S;
 
-  protected readonly decimals: number;
-  protected readonly units: string;
+  protected valueFormatter: ValueFormatProcessor;
 
   protected total = 0;
   protected totalText = 'N/A';
@@ -64,11 +64,8 @@ export abstract class TbLatestChart<S extends LatestChartSettings> {
       this.defaultSettings(),
       this.inputSettings as S);
 
-    this.decimals = this.ctx.decimals;
-    this.units = this.ctx.units;
-
     this.initSettings();
-
+    this.prepareValueFormat();
     this.setupData();
 
     this.onResize();
@@ -80,6 +77,15 @@ export abstract class TbLatestChart<S extends LatestChartSettings> {
     }
   }
 
+  private prepareValueFormat() {
+    const units = this.ctx.units;
+
+    if (this.settings.showTooltip) {
+      this.settings.tooltipValueFormater = ValueFormatProcessor.fromSettings(this.ctx.$injector, {units, decimals: this.settings.tooltipValueDecimals});
+    }
+    this.valueFormatter = ValueFormatProcessor.fromSettings(this.ctx.$injector, {units, decimals: this.ctx.decimals});
+  }
+
   private setupData(): void {
     let counter = 0;
     if (this.ctx.datasources.length) {
@@ -236,7 +242,7 @@ export abstract class TbLatestChart<S extends LatestChartSettings> {
           const legendItem = this.legendItems.find(item => item.dataKey === dataItem.dataKey);
           if (dataItem.hasValue) {
             legendItem.hasValue = true;
-            legendItem.value = formatValue(dataItem.value, this.decimals, this.units, false);
+            legendItem.value = this.valueFormatter.format(dataItem.value);
           } else {
             legendItem.hasValue = false;
             legendItem.value = '--';
@@ -245,7 +251,7 @@ export abstract class TbLatestChart<S extends LatestChartSettings> {
       }
       if (this.settings.showTotal || this.settings.showLegend) {
         if (hasValue) {
-          this.totalText = formatValue(this.total, this.decimals, this.units, false);
+          this.totalText = this.valueFormatter.format(this.total);
           if (this.settings.showLegend && !this.settings.showTotal) {
             this.legendItems[this.legendItems.length - 1].hasValue = true;
             this.legendItems[this.legendItems.length - 1].value = this.totalText;
@@ -275,7 +281,7 @@ export abstract class TbLatestChart<S extends LatestChartSettings> {
         confine: true,
         formatter: (params: CallbackDataParams) =>
           this.settings.showTooltip
-            ? latestChartTooltipFormatter(this.renderer, this.settings, params, this.units, this.total, this.dataItems)
+            ? latestChartTooltipFormatter(this.renderer, this.settings, params, this.total, this.dataItems)
             : undefined,
         padding: [4, 8],
         backgroundColor: this.settings.tooltipBackgroundColor,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart.ts
index 804418304a..27aa1597bd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/radar-chart.ts
@@ -23,9 +23,10 @@ import { TranslateService } from '@ngx-translate/core';
 import {
   ChartFillType,
   createChartTextStyle,
-  createLinearOpacityGradient, createRadialOpacityGradient, toAnimationOption
+  createRadialOpacityGradient,
+  toAnimationOption
 } from '@home/components/widget/lib/chart/chart.models';
-import { formatValue, isDefinedAndNotNull, isEqual } from '@core/utils';
+import { isDefinedAndNotNull } from '@core/utils';
 import { ComponentStyle } from '@shared/models/widget-settings.models';
 import { AreaStyleOption, SeriesLabelOption } from 'echarts/types/src/util/types';
 import { RadarIndicatorOption } from 'echarts/types/src/coord/radar/RadarModel';
@@ -72,7 +73,7 @@ export class TbRadarChart extends TbLatestChart<RadarChartSettings> {
         fontWeight: axisTickLabelStyle.fontWeight,
         fontFamily: axisTickLabelStyle.fontFamily,
         fontSize: axisTickLabelStyle.fontSize,
-        formatter: (value: any) => formatValue(value, this.decimals, this.units, false)
+        formatter: (value: any) => this.valueFormatter.format(value)
       }
     }];
 
@@ -87,7 +88,7 @@ export class TbRadarChart extends TbLatestChart<RadarChartSettings> {
       formatter: (params) => {
         let result = '';
         if (isDefinedAndNotNull(params.value)) {
-          result = formatValue(params.value, this.decimals, this.units, false);
+          result = this.valueFormatter.format(params.value);
         }
         return `{value|${result}}`;
       },
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts
index 0201ec7d5f..3a75d6cc5e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts
@@ -23,7 +23,6 @@ import {
   OnDestroy,
   OnInit,
   Renderer2,
-  TemplateRef,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
@@ -49,6 +48,8 @@ import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
 import { TbTimeSeriesChart } from '@home/components/widget/lib/chart/time-series-chart';
 import { WidgetComponent } from '@home/components/widget/widget.component';
+import { isTbUnitMapping, TbUnitMapping } from '@shared/models/unit.models';
+import { UnitService } from '@core/services/unit.service';
 
 @Component({
   selector: 'tb-range-chart-widget',
@@ -78,7 +79,8 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
   visibleRangeItems: RangeItem[];
 
   private decimals = 0;
-  private units = '';
+  private units: string = '';
+  private unitConvertor = (x: number) => x;
 
   private rangeItems: RangeItem[];
 
@@ -94,25 +96,30 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
   ngOnInit(): void {
     this.ctx.$scope.rangeChartWidget = this;
     this.settings = {...rangeChartDefaultSettings, ...this.ctx.settings};
+    const unitService = this.ctx.$injector.get(UnitService);
 
     this.decimals = this.ctx.decimals;
-    this.units = this.ctx.units;
+    let units = this.ctx.units;
     const dataKey = getDataKey(this.ctx.datasources);
     if (isDefinedAndNotNull(dataKey?.decimals)) {
       this.decimals = dataKey.decimals;
     }
     if (dataKey?.units) {
-      this.units = dataKey.units;
+      units = dataKey.units;
     }
     if (dataKey) {
       dataKey.settings = rangeChartTimeSeriesKeySettings(this.settings);
     }
+    this.units = unitService.getTargetUnitSymbol(units);
+    if (isTbUnitMapping(units)) {
+      this.unitConvertor = unitService.geUnitConverter(units as unknown as TbUnitMapping);
+    }
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
     this.padding = this.settings.background.overlay.enabled ? undefined : this.settings.padding;
 
-    this.rangeItems = toRangeItems(this.settings.rangeColors);
+    this.rangeItems = toRangeItems(this.settings.rangeColors, this.unitConvertor);
     this.visibleRangeItems = this.rangeItems.filter(item => item.visible);
 
     this.showLegend = this.settings.showLegend && !!this.rangeItems.length;
@@ -126,7 +133,7 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
   }
 
   ngAfterViewInit() {
-    const settings = rangeChartTimeSeriesSettings(this.settings, this.rangeItems, this.decimals, this.units);
+    const settings = rangeChartTimeSeriesSettings(this.settings, this.rangeItems, this.decimals, this.units, this.unitConvertor);
     this.timeSeriesChart = new TbTimeSeriesChart(this.ctx, settings, this.chartShape.nativeElement, this.renderer);
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts
index e87e65cb39..7134a924fe 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts
@@ -42,7 +42,7 @@ import {
   TimeSeriesChartXAxisSettings,
   TimeSeriesChartYAxisSettings
 } from '@home/components/widget/lib/chart/time-series-chart.models';
-import { isNumber, mergeDeep } from '@core/utils';
+import { isDefinedAndNotNull, isNumber, mergeDeep } from '@core/utils';
 import { DeepPartial } from '@shared/models/common';
 import {
   chartAnimationDefaultSettings,
@@ -220,13 +220,13 @@ export const rangeChartDefaultSettings: RangeChartWidgetSettings = {
 };
 
 export const rangeChartTimeSeriesSettings = (settings: RangeChartWidgetSettings, rangeItems: RangeItem[],
-                                             decimals: number, units: string): DeepPartial<TimeSeriesChartSettings> => {
+                                             decimals: number, units: string, valueConvertor: (x: number) => number): DeepPartial<TimeSeriesChartSettings> => {
   let thresholds: DeepPartial<TimeSeriesChartThreshold>[] = settings.showRangeThresholds ? getMarkPoints(rangeItems).map(item => ({
     ...{type: ValueSourceType.constant,
     yAxisId: 'default',
     units,
     decimals,
-    value: item},
+    value: valueConvertor(item)},
     ...settings.rangeThreshold
   } as DeepPartial<TimeSeriesChartThreshold>)) : [];
   if (settings.thresholds?.length) {
@@ -291,20 +291,21 @@ export const rangeChartTimeSeriesKeySettings = (settings: RangeChartWidgetSettin
     }
   });
 
-export const toRangeItems = (colorRanges: Array<ColorRange>): RangeItem[] => {
+export const toRangeItems = (colorRanges: Array<ColorRange>, convertValue: (x: number) => number): RangeItem[] => {
   const rangeItems: RangeItem[] = [];
   let counter = 0;
   const ranges = sortedColorRange(filterIncludingColorRanges(colorRanges)).filter(r => isNumber(r.from) || isNumber(r.to));
   for (let i = 0; i < ranges.length; i++) {
     const range = ranges[i];
     let from = range.from;
-    const to = range.to;
+    const to = isDefinedAndNotNull(range.to) ? convertValue(range.to) : range.to;
     if (i > 0) {
       const prevRange = ranges[i - 1];
       if (isNumber(prevRange.to) && isNumber(from) && from < prevRange.to) {
         from = prevRange.to;
       }
     }
+    from = isDefinedAndNotNull(from) ? convertValue(from) : from;
     rangeItems.push(
       {
         index: counter++,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts
index 2c9e8257ad..b29f809fef 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts
@@ -98,6 +98,7 @@ import {
   TimeSeriesChartTooltipValueFormatFunction,
   TimeSeriesChartTooltipWidgetSettings
 } from '@home/components/widget/lib/chart/time-series-chart-tooltip.models';
+import { TbUnitConverter } from '@shared/models/unit.models';
 
 type TimeSeriesChartDataEntry = [number, any, number, number];
 
@@ -144,6 +145,7 @@ export interface TimeSeriesChartDataItem {
   yAxisIndex: number;
   option?: LineSeriesOption | CustomSeriesOption;
   barRenderContext?: BarRenderContext;
+  unitConvertor?: TbUnitConverter;
 }
 
 export const timeAxisBandWidthCalculator: TimeAxisBandWidthCalculator = (model) => {
@@ -857,6 +859,7 @@ export interface TimeSeriesChartThresholdItem {
   value: TimeSeriesChartThresholdValue;
   settings: TimeSeriesChartThreshold;
   option?: LineSeriesOption;
+  unitConvertor?: TbUnitConverter
 }
 
 export interface TimeSeriesChartAxis {
@@ -880,7 +883,8 @@ export const createTimeSeriesYAxis = (units: string,
                                       decimals: number,
                                       settings: TimeSeriesChartYAxisSettings,
                                       utils: UtilsService,
-                                      darkMode: boolean): TimeSeriesChartYAxis => {
+                                      darkMode: boolean,
+                                      unitConvertor: (x: number) => number): TimeSeriesChartYAxis => {
   const yAxisTickLabelStyle = createChartTextStyle(settings.tickLabelFont,
     settings.tickLabelColor, darkMode, 'axis.tickLabel');
   const yAxisNameStyle = createChartTextStyle(settings.labelFont,
@@ -934,8 +938,8 @@ export const createTimeSeriesYAxis = (units: string,
       offset: 0,
       alignTicks: true,
       scale: true,
-      min: settings.min,
-      max: settings.max,
+      min: isDefinedAndNotNull(settings.min) ? unitConvertor(Number(settings.min)) : settings.min,
+      max: isDefinedAndNotNull(settings.max) ? unitConvertor(Number(settings.max)) : settings.max,
       minInterval,
       splitNumber,
       interval,
@@ -1128,7 +1132,7 @@ export const calculateThresholdsOffset = (chart: ECharts,
   return result;
 };
 
-export const parseThresholdData = (value: any): TimeSeriesChartThresholdValue => {
+export const parseThresholdData = (value: any, valueConvertor?: TbUnitConverter): TimeSeriesChartThresholdValue => {
   let thresholdValue: TimeSeriesChartThresholdValue;
   if (Array.isArray(value)) {
     thresholdValue = value;
@@ -1140,7 +1144,7 @@ export const parseThresholdData = (value: any): TimeSeriesChartThresholdValue =>
       thresholdValue = [value];
     }
   }
-  return thresholdValue;
+  return valueConvertor ? thresholdValue.map(item => isNumeric(item) ? valueConvertor(Number(item)) : item) : thresholdValue;
 };
 
 const generateChartThresholds = (thresholdItems: TimeSeriesChartThresholdItem[]): Array<LineSeriesOption> => {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts
index 7bea76d325..d1c3a41567 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts
@@ -82,6 +82,8 @@ import {
   TimeSeriesChartTooltipTrigger,
   TimeSeriesChartTooltipValueFormatFunction
 } from '@home/components/widget/lib/chart/time-series-chart-tooltip.models';
+import { UnitService } from '@core/services/unit.service';
+import { isNotEmptyTbUnits, isTbUnitMapping, TbUnit, TbUnitMapping } from '@shared/models/unit.models';
 
 export class TbTimeSeriesChart {
 
@@ -163,6 +165,8 @@ export class TbTimeSeriesChart {
 
   private onParentScroll = this._onParentScroll.bind(this);
 
+  private unitService: UnitService;
+
   yMin$ = this.yMinSubject.asObservable();
   yMax$ = this.yMaxSubject.asObservable();
 
@@ -186,6 +190,7 @@ export class TbTimeSeriesChart {
     const $dashboardPageElement = this.ctx.$containerParent.parents('.tb-dashboard-page');
     const dashboardPageElement = $dashboardPageElement.length ? $($dashboardPageElement[$dashboardPageElement.length-1]) : null;
     this.darkMode = this.settings.darkMode || dashboardPageElement?.hasClass('dark');
+    this.unitService = this.ctx.$injector.get(UnitService);
     this.setupXAxes();
     this.setupYAxes();
     this.setupData();
@@ -234,7 +239,7 @@ export class TbTimeSeriesChart {
       const datasourceData = this.ctx.data ? this.ctx.data.find(d => d.dataKey === item.dataKey) : null;
       if (!isEqual(item.dataSet, datasourceData?.data)) {
         item.dataSet = datasourceData?.data;
-        item.data = datasourceData?.data ? toTimeSeriesChartDataSet(datasourceData.data, this.stateValueConverter?.valueConverter) : [];
+        item.data = datasourceData?.data ? toTimeSeriesChartDataSet(datasourceData.data, this.stateValueConverter?.valueConverter ?? item.unitConvertor) : [];
       }
     }
     this.onResize();
@@ -275,7 +280,7 @@ export class TbTimeSeriesChart {
         if (item.settings.type === ValueSourceType.latestKey && item.latestDataKey) {
           const data = this.ctx.latestData.find(d => d.dataKey === item.latestDataKey);
           if (data.data[0]) {
-            item.value = parseThresholdData(data.data[0][1]);
+            item.value = parseThresholdData(data.data[0][1], item.unitConvertor);
             update = true;
           }
         }
@@ -413,9 +418,14 @@ export class TbTimeSeriesChart {
           }
           dataKey.settings = keySettings;
           const datasourceData = this.ctx.data ? this.ctx.data.find(d => d.dataKey === dataKey) : null;
+          const units: TbUnit = isNotEmptyTbUnits(dataKey.units) ? dataKey.units : this.ctx.units;
+          const unitSymbol = this.unitService.getTargetUnitSymbol(units);
+          let unitConvertor: (value: number) => number;
+          if (isTbUnitMapping(units)) {
+            unitConvertor = this.unitService.geUnitConverter(units as unknown as TbUnitMapping);
+          }
           const data = datasourceData?.data ?
-            toTimeSeriesChartDataSet(datasourceData.data, this.stateValueConverter?.valueConverter) : [];
-          const units = dataKey.units && dataKey.units.length ? dataKey.units : this.ctx.units;
+            toTimeSeriesChartDataSet(datasourceData.data, this.stateValueConverter?.valueConverter ?? unitConvertor) : [];
           const decimals = isDefinedAndNotNull(dataKey.decimals) ? dataKey.decimals :
             (isDefinedAndNotNull(this.ctx.decimals) ? this.ctx.decimals : 2);
           let yAxisId = keySettings.yAxisId;
@@ -426,7 +436,7 @@ export class TbTimeSeriesChart {
           const xAxisIndex = comparisonItem ? 1 : 0;
           this.dataItems.push({
             id: this.nextComponentId(),
-            units,
+            units: unitSymbol,
             decimals,
             xAxisIndex,
             yAxisId,
@@ -436,7 +446,8 @@ export class TbTimeSeriesChart {
             dataKey,
             data,
             enabled: !keySettings.dataHiddenByDefault,
-            tooltipValueFormatFunction: createTooltipValueFormatFunction(keySettings.tooltipValueFormatter)
+            tooltipValueFormatFunction: createTooltipValueFormatFunction(keySettings.tooltipValueFormatter),
+            unitConvertor
           });
         }
       }
@@ -456,6 +467,12 @@ export class TbTimeSeriesChart {
       let latestDataKey: DataKey = null;
       let entityDataKey: DataKey = null;
       let value = null;
+      const units: TbUnit = isNotEmptyTbUnits(threshold.units) ? threshold.units : this.ctx.units;
+      const unitSymbol = this.unitService.getTargetUnitSymbol(units);
+      let unitConvertor: (value: number) => number;
+      if (isTbUnitMapping(units)) {
+        unitConvertor = this.unitService.geUnitConverter(units as unknown as TbUnitMapping);
+      }
       if (threshold.type === ValueSourceType.latestKey) {
         if (this.ctx.datasources.length) {
           for (const datasource of this.ctx.datasources) {
@@ -496,9 +513,8 @@ export class TbTimeSeriesChart {
           thresholdDatasources.push(datasource);
         }
       } else { // constant
-        value = threshold.value;
+        value = unitConvertor ? unitConvertor(threshold.value) : threshold.value;
       }
-      const units = threshold.units && threshold.units.length ? threshold.units : this.ctx.units;
       const decimals = isDefinedAndNotNull(threshold.decimals) ? threshold.decimals :
         (isDefinedAndNotNull(this.ctx.decimals) ? this.ctx.decimals : 2);
       let yAxisId = threshold.yAxisId;
@@ -507,13 +523,14 @@ export class TbTimeSeriesChart {
       }
       const thresholdItem: TimeSeriesChartThresholdItem = {
         id: this.nextComponentId(),
-        units,
+        units: unitSymbol,
         decimals,
         yAxisId,
         yAxisIndex: this.getYAxisIndex(yAxisId),
         value,
         latestDataKey,
-        settings: threshold
+        settings: threshold,
+        unitConvertor
       };
       if (entityDataKey) {
         entityDataKey.settings.thresholdItemId = thresholdItem.id;
@@ -541,14 +558,19 @@ export class TbTimeSeriesChart {
     for (const yAxisSettings of yAxisSettingsList) {
       const axisSettings = mergeDeep<TimeSeriesChartYAxisSettings>({} as TimeSeriesChartYAxisSettings,
         defaultTimeSeriesChartYAxisSettings, yAxisSettings);
-      const units = axisSettings.units && axisSettings.units.length ? axisSettings.units : this.ctx.units;
+      const units: TbUnit = isNotEmptyTbUnits(axisSettings.units) ? axisSettings.units : this.ctx.units;
+      const unitSymbol = this.unitService.getTargetUnitSymbol(units);
+      let unitConvertor: (value: number) => number = (x) => x;
+      if (isTbUnitMapping(units)) {
+        unitConvertor = this.unitService.geUnitConverter(units as unknown as TbUnitMapping);
+      }
       const decimals = isDefinedAndNotNull(axisSettings.decimals) ? axisSettings.decimals :
         (isDefinedAndNotNull(this.ctx.decimals) ? this.ctx.decimals : 2);
       if (this.stateValueConverter) {
         axisSettings.ticksGenerator = this.stateValueConverter.ticksGenerator;
         axisSettings.ticksFormatter = this.stateValueConverter.ticksFormatter;
       }
-      const yAxis = createTimeSeriesYAxis(units, decimals, axisSettings, this.ctx.utilsService, this.darkMode);
+      const yAxis = createTimeSeriesYAxis(unitSymbol, decimals, axisSettings, this.ctx.utilsService, this.darkMode, unitConvertor);
       this.yAxisList.push(yAxis);
     }
   }
@@ -592,7 +614,7 @@ export class TbTimeSeriesChart {
                 if (item.settings.type === ValueSourceType.entity) {
                   const data = subscription.data.find(d => d.dataKey.settings?.thresholdItemId === item.id);
                   if (data.data[0]) {
-                    item.value = parseThresholdData(data.data[0][1]);
+                    item.value = parseThresholdData(data.data[0][1], item.unitConvertor);
                     update = true;
                   }
                 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.models.ts
index f6321fa54a..e7016743be 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.models.ts
@@ -28,6 +28,7 @@ import {
 } from '@shared/models/widget-settings.models';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { isDefinedAndNotNull } from '@core/utils';
+import { TbUnit } from '@shared/models/unit.models';
 
 export interface AttributeSourceProperty {
   valueSource: string;
@@ -109,7 +110,7 @@ export interface DigitalGaugeSettings {
   valueFont?: FontSettings;
   minMaxFont?: FontSettings;
   decimals?: number;
-  units?: string;
+  units?: TbUnit;
   hideValue?: boolean;
   hideMinMax?: boolean;
   showTicks?: boolean;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts b/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts
index fb8a31c558..81ab5d6bd9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts
@@ -21,12 +21,19 @@ import {
   DigitalGaugeSettings
 } from '@home/components/widget/lib/digital-gauge.models';
 import tinycolor from 'tinycolor2';
-import { isDefined, isDefinedAndNotNull } from '@core/utils';
+import { isDefinedAndNotNull } from '@core/utils';
 import { prepareFontSettings } from '@home/components/widget/lib/settings.models';
 import { CanvasDigitalGauge, CanvasDigitalGaugeOptions } from '@home/components/widget/lib/canvas-digital-gauge';
 import { DatePipe } from '@angular/common';
 import { IWidgetSubscription } from '@core/api/widget-api.models';
-import { ColorProcessor, createValueSubscription, ValueSourceType } from '@shared/models/widget-settings.models';
+import {
+  ColorProcessor,
+  createValueSubscription,
+  ValueFormatProcessor,
+  ValueSourceType
+} from '@shared/models/widget-settings.models';
+import { UnitService } from '@core/services/unit.service';
+import { isNotEmptyTbUnits } from '@shared/models/unit.models';
 import GenericOptions = CanvasGauges.GenericOptions;
 
 // @dynamic
@@ -68,11 +75,11 @@ export class TbCanvasDigitalGauge {
     this.localSettings.tickWidth = settings.tickWidth || 4;
     this.localSettings.colorTicks = settings.colorTicks || '#666';
 
-    this.localSettings.decimals = isDefined(dataKey.decimals) ? dataKey.decimals :
+    this.localSettings.decimals = isDefinedAndNotNull(dataKey.decimals) ? dataKey.decimals :
       (isDefinedAndNotNull(settings.decimals) ? settings.decimals : ctx.decimals);
 
-    this.localSettings.units = dataKey.units && dataKey.units.length ? dataKey.units :
-      (isDefined(settings.units) && settings.units.length > 0 ? settings.units : ctx.units);
+    this.localSettings.units = isNotEmptyTbUnits(dataKey.units) ? dataKey.units :
+      (isNotEmptyTbUnits(settings.units) ? settings.units : ctx.units);
 
     this.localSettings.hideValue = settings.showValue !== true;
     this.localSettings.hideMinMax = settings.showMinMax !== true;
@@ -116,6 +123,10 @@ export class TbCanvasDigitalGauge {
     });
 
     this.barColorProcessor = ColorProcessor.fromSettings(settings.barColor, this.ctx);
+    this.valueFormat = ValueFormatProcessor.fromSettings(this.ctx.$injector, {
+      units: this.localSettings.units,
+      ignoreUnitSymbol: true
+    });
 
     const gaugeData: CanvasDigitalGaugeOptions = {
       renderTo: gaugeElement,
@@ -124,6 +135,7 @@ export class TbCanvasDigitalGauge {
       gaugeColor: this.localSettings.gaugeColor,
 
       barColorProcessor: this.barColorProcessor,
+      valueFormat: this.valueFormat,
 
       colorTicks: this.localSettings.colorTicks,
       tickWidth: this.localSettings.tickWidth,
@@ -161,7 +173,7 @@ export class TbCanvasDigitalGauge {
       dashThickness: this.localSettings.dashThickness,
       roundedLineCap: this.localSettings.roundedLineCap,
 
-      symbol: this.localSettings.units,
+      symbol: this.ctx.$injector.get(UnitService).getTargetUnitSymbol(this.localSettings.units),
       unitTitle: this.localSettings.unitTitle,
       showUnitTitle: this.localSettings.showUnitTitle,
       showTimestamp: this.localSettings.showTimestamp,
@@ -190,6 +202,7 @@ export class TbCanvasDigitalGauge {
   private ticksSourcesSubscription: IWidgetSubscription;
 
   private readonly barColorProcessor: ColorProcessor;
+  private readonly valueFormat: ValueFormatProcessor;
 
   private gauge: CanvasDigitalGauge;
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.ts
index 653c388364..8c6cec57c0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.ts
@@ -107,6 +107,7 @@ import { AggregationType } from '@shared/models/time/time.models';
 import { FormBuilder } from '@angular/forms';
 import { DEFAULT_OVERLAY_POSITIONS } from '@shared/models/overlay.models';
 import { CompiledTbFunction } from '@shared/models/js-function.models';
+import { ValueFormatProcessor } from '@shared/models/widget-settings.models';
 
 interface EntitiesTableWidgetSettings extends TableWidgetSettings {
   entitiesTitle: string;
@@ -475,14 +476,13 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
 
         this.stylesInfo[dataKey.def] = getCellStyleInfo(this.ctx, keySettings, 'value, entity, ctx');
         const contentFunctionInfo = getCellContentFunctionInfo(this.ctx, keySettings, 'value, entity, ctx');
-        const contentInfo: CellContentInfo = {
+        const decimals = (dataKey.decimals || dataKey.decimals === 0) ? dataKey.decimals : this.ctx.widgetConfig.decimals;
+        const units = dataKey.units || this.ctx.widgetConfig.units;
+        const valueFormat = ValueFormatProcessor.fromSettings(this.ctx.$injector, {units, decimals, showZeroDecimals: true});
+        this.contentsInfo[dataKey.def] = {
           contentFunction: contentFunctionInfo,
-          units: dataKey.units,
-          decimals: dataKey.decimals
+          valueFormat
         };
-        this.contentsInfo[dataKey.def] = contentInfo;
-        this.contentsInfo[dataKey.def].units = dataKey.units;
-        this.contentsInfo[dataKey.def].decimals = dataKey.decimals;
         this.columnWidth[dataKey.def] = getColumnWidth(keySettings);
         this.columnDefaultVisibility[dataKey.def] = getColumnDefaultVisibility(keySettings, this.ctx);
         this.columnSelectionAvailability[dataKey.def] = getColumnSelectionAvailability(keySettings);
@@ -629,7 +629,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
 
   public rowStyle(entity: EntityData, row: number): Observable<any> {
     let style$: Observable<any>;
-    let res = this.rowStyleCache[row];
+    const res = this.rowStyleCache[row];
     if (!res) {
       style$ = this.rowStylesInfo.pipe(
         map(styleInfo => {
@@ -667,7 +667,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
     let style$: Observable<any>;
     const col = this.columns.indexOf(key);
     const index = row * this.columns.length + col;
-    let res = this.cellStyleCache[index];
+    const res = this.cellStyleCache[index];
     if (!res) {
       if (entity && key) {
         style$ = this.stylesInfo[key.def].pipe(
@@ -717,7 +717,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
     let content$: Observable<SafeHtml>;
     const col = this.columns.indexOf(key);
     const index = row * this.columns.length + col;
-    let res = this.cellContentCache[index];
+    const res = this.cellContentCache[index];
     if (isUndefined(res)) {
       const contentInfo = this.contentsInfo[key.def];
       content$ = contentInfo.contentFunction.pipe(
@@ -766,9 +766,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
           return this.datePipe.transform(value, 'yyyy-MM-dd HH:mm:ss');
         }
       }
-      const decimals = (contentInfo.decimals || contentInfo.decimals === 0) ? contentInfo.decimals : this.ctx.widgetConfig.decimals;
-      const units = contentInfo.units || this.ctx.widgetConfig.units;
-      return this.ctx.utils.formatValue(value, decimals, units, true);
+      return contentInfo.valueFormat.format(value);
     } else {
       return '';
     }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts
index ac68f42828..b20cda25a9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts
@@ -61,6 +61,7 @@ import { CancelAnimationFrame } from '@core/services/raf.service';
 import { UtilsService } from '@core/services/utils.service';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { BehaviorSubject } from 'rxjs';
+import { getSourceTbUnitSymbol, isNotEmptyTbUnits } from '@shared/models/unit.models';
 import Timeout = NodeJS.Timeout;
 
 const moment = moment_;
@@ -151,7 +152,7 @@ export class TbFlot {
     }
 
     this.trackDecimals = ctx.decimals;
-    this.trackUnits = ctx.units;
+    this.trackUnits = getSourceTbUnitSymbol(ctx.units);
     this.tooltipIndividual = this.chartType === 'pie' || (isDefined(this.settings.tooltipIndividual)
       ? this.settings.tooltipIndividual : false);
     this.tooltipCumulative = isDefined(this.settings.tooltipCumulative) ? this.settings.tooltipCumulative : false;
@@ -480,7 +481,7 @@ export class TbFlot {
       }
 
       if (this.yaxis) {
-        const units = series.dataKey.units && series.dataKey.units.length ? series.dataKey.units : this.trackUnits;
+        const units = getSourceTbUnitSymbol(isNotEmptyTbUnits(series.dataKey.units) ? series.dataKey.units : this.trackUnits);
         let yaxis: TbFlotAxisOptions;
         if (keySettings.showSeparateAxis) {
           yaxis = this.createYAxis(keySettings, units);
@@ -1172,7 +1173,7 @@ export class TbFlot {
   }
 
   private formatPieTooltip(item: TbFlotPlotItem): string {
-    const units = item.series.dataKey.units && item.series.dataKey.units.length ? item.series.dataKey.units : this.trackUnits;
+    const units = getSourceTbUnitSymbol(isNotEmptyTbUnits(item.series.dataKey.units) ? item.series.dataKey.units : this.trackUnits);
     const decimals = isDefinedAndNotNull(item.series.dataKey.decimals) ? item.series.dataKey.decimals : this.trackDecimals;
     const divElement = this.seriesInfoDiv(item.series.dataKey.label, item.series.dataKey.color,
       item.datapoint[1][0][1], units, decimals, true, item.series.percent, 0,
@@ -1504,7 +1505,7 @@ export class TbFlot {
             hoverIndex,
             color: series.dataKey.color,
             label: series.dataKey.label,
-            units: series.dataKey.units,
+            units: getSourceTbUnitSymbol(series.dataKey.units),
             decimals: series.dataKey.decimals,
             tooltipValueFormatFunction: series.dataKey.tooltipValueFormatFunction,
             time: pointTime,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts
index 7b4176bce9..aafd20757e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts
@@ -28,18 +28,17 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import { WidgetContext } from '@home/models/widget-component.models';
-import { formatValue, isDefinedAndNotNull, isNumeric } from '@core/utils';
-import { DatePipe } from '@angular/common';
+import { isDefinedAndNotNull, isNumeric } from '@core/utils';
 import {
   backgroundStyle,
   ColorProcessor,
   ComponentStyle,
-  getDataKey,
+  createValueFormatterFromSettings,
   getSingleTsValue,
   overlayStyle,
-  textStyle
+  textStyle,
+  ValueFormatProcessor
 } from '@shared/models/widget-settings.models';
-import { WidgetComponent } from '@home/components/widget/widget.component';
 import {
   batteryLevelDefaultSettings,
   BatteryLevelLayout,
@@ -137,13 +136,10 @@ export class BatteryLevelWidgetComponent implements OnInit, OnDestroy, AfterView
 
   hasCardClickAction = false;
 
-  private decimals = 0;
-  private units = '';
+  private valueFormat: ValueFormatProcessor;
 
-  constructor(private date: DatePipe,
-              private imagePipe: ImagePipe,
+  constructor(private imagePipe: ImagePipe,
               private sanitizer: DomSanitizer,
-              private widgetComponent: WidgetComponent,
               private renderer: Renderer2,
               private cd: ChangeDetectorRef) {
   }
@@ -152,15 +148,7 @@ export class BatteryLevelWidgetComponent implements OnInit, OnDestroy, AfterView
     this.ctx.$scope.batteryLevelWidget = this;
     this.settings = {...batteryLevelDefaultSettings, ...this.ctx.settings};
 
-    this.decimals = this.ctx.decimals;
-    this.units = this.ctx.units;
-    const dataKey = getDataKey(this.ctx.datasources);
-    if (isDefinedAndNotNull(dataKey?.decimals)) {
-      this.decimals = dataKey.decimals;
-    }
-    if (dataKey?.units) {
-      this.units = dataKey.units;
-    }
+    this.valueFormat = createValueFormatterFromSettings(this.ctx);
 
     this.layout = this.settings.layout;
 
@@ -256,7 +244,7 @@ export class BatteryLevelWidgetComponent implements OnInit, OnDestroy, AfterView
     if (tsValue && isDefinedAndNotNull(tsValue[1]) && isNumeric(tsValue[1])) {
       this.value = tsValue[1];
       this.batteryFillValue = this.parseBatteryFillValue(this.value);
-      this.valueText = formatValue(this.value, this.decimals, this.units, false);
+      this.valueText = this.valueFormat.format(this.value);
     } else {
       this.valueText = 'N/A';
     }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts
index c344f332c1..cf505f2968 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts
@@ -57,10 +57,12 @@ import {
 import { ResourcesService } from '@core/services/resources.service';
 import { NULL_UUID } from '@shared/models/id/has-uuid';
 import { TranslateService } from '@ngx-translate/core';
-import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance;
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
 import { DataEntry } from '@shared/models/widget.models';
+import { getSourceTbUnitSymbol, isNotEmptyTbUnits, isTbUnitMapping, TbUnit } from '@shared/models/unit.models';
+import { UnitService } from '@core/services/unit.service';
+import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance;
 
 @Component({
   selector: 'tb-liquid-level-widget',
@@ -106,8 +108,12 @@ export class LiquidLevelWidgetComponent implements OnInit {
 
   private volume: number;
   private tooltipContent: string;
-  private widgetUnits: string;
+  private widgetUnits: TbUnit;
+  private widgetUnitsSymbol: string;
+  private widgetUnitsConvertor = (x: number) => x;
   private volumeUnits: string;
+  private tooltipUnitSymbol: string;
+  private tooltipUnitConvertor = (x: number) => x;
 
   private capacityUnits = Object.values(CapacityUnits);
 
@@ -115,7 +121,8 @@ export class LiquidLevelWidgetComponent implements OnInit {
               private sanitizer: DomSanitizer,
               private cd: ChangeDetectorRef,
               private resourcesService: ResourcesService,
-              private translate: TranslateService) {
+              private translate: TranslateService,
+              private unitService: UnitService) {
   }
 
   ngOnInit(): void {
@@ -156,6 +163,15 @@ export class LiquidLevelWidgetComponent implements OnInit {
           this.widgetUnits = units;
         }
 
+        this.widgetUnitsSymbol = this.unitService.getTargetUnitSymbol(this.widgetUnits);
+        if (isTbUnitMapping(this.widgetUnits)) {
+          this.widgetUnitsConvertor = this.unitService.geUnitConverter(this.widgetUnits as any);
+        }
+
+        this.tooltipUnitSymbol = this.unitService.getTargetUnitSymbol(this.settings.tooltipUnits);
+        if (isTbUnitMapping(this.settings.tooltipUnits)) {
+          this.tooltipUnitConvertor = this.unitService.geUnitConverter(this.settings.tooltipUnits as any);
+        }
         this.update(true);
       }
     });
@@ -171,7 +187,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
     this.tooltipDateFormat = DateFormatProcessor.fromSettings(this.ctx.$injector, this.settings.tooltipDateFormat);
   }
 
-  private getData(): Observable<{ svg: string; volume: number; units: string; volumeUnits: string}> {
+  private getData(): Observable<{ svg: string; volume: number; units: TbUnit; volumeUnits: string}> {
     if (this.ctx.datasources?.length) {
       const entityId: EntityId = {
         entityType: this.ctx.datasources[0].entityType,
@@ -325,7 +341,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
     return of(this.settings.selectedShape);
   }
 
-  private getTankersParams(entityId: EntityId): Observable<{ volume: number; units: string; volumeUnits: string }> {
+  private getTankersParams(entityId: EntityId): Observable<{ volume: number; units: TbUnit; volumeUnits: string }> {
     const isVolumeStatic = this.settings.layout !== LevelCardLayout.absolute
       && this.settings.datasourceUnits === CapacityUnits.percent
       || this.settings.volumeSource === LiquidWidgetDataSourceType.static;
@@ -372,8 +388,8 @@ export class LiquidLevelWidgetComponent implements OnInit {
         }
 
         if (!isUnitStatic) {
-          if (isNotEmptyStr(units)) {
-            const normalizeUnits = units.normalize().trim();
+          if (isNotEmptyTbUnits(units) && !isTbUnitMapping(units)) {
+            const normalizeUnits = (units as string).normalize().trim();
             units = this.capacityUnits.find(unit => unit.normalize() === normalizeUnits);
           }
           if (isUndefinedOrNull(units) || !isNotEmptyStr(units)) {
@@ -494,7 +510,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
     let value = 'N/A';
 
     if (isNumeric(data)) {
-      value = convertLiters(this.convertOutputData(percentage), this.widgetUnits as CapacityUnits, ConversionType.from)
+      value = this.widgetUnitsConvertor(convertLiters(this.convertOutputData(percentage), this.widgetUnits as CapacityUnits, ConversionType.from))
           .toFixed(this.settings.decimals || 0);
     }
     this.valueColor.update(value);
@@ -509,10 +525,10 @@ export class LiquidLevelWidgetComponent implements OnInit {
       let volume: number | string;
       if (this.widgetUnits !== CapacityUnits.percent) {
         const volumeInLiters: number = convertLiters(this.volume, this.volumeUnits as CapacityUnits, ConversionType.to);
-        volume = convertLiters(volumeInLiters, this.widgetUnits as CapacityUnits, ConversionType.from)
+        volume = this.widgetUnitsConvertor(convertLiters(volumeInLiters, this.widgetUnits as CapacityUnits, ConversionType.from))
           .toFixed(this.settings.decimals || 0);
       } else {
-        volume = this.volume.toFixed(this.settings.decimals || 0);
+        volume = this.widgetUnitsConvertor(this.volume).toFixed(this.settings.decimals || 0);
       }
 
       const volumeTextStyle = cssTextFromInlineStyle({...inlineTextStyle(this.settings.volumeFont),
@@ -520,7 +536,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
 
       container = jQueryContainerElement.find('.absolute-value-container');
       content = createAbsoluteLayout({inputValue: value, volume},
-        {valueStyle: valueTextStyle, volumeStyle: volumeTextStyle}, this.widgetUnits);
+        {valueStyle: valueTextStyle, volumeStyle: volumeTextStyle}, this.widgetUnitsSymbol);
 
     } else if (this.settings.layout === LevelCardLayout.percentage) {
       container = jQueryContainerElement.find('.percentage-value-container');
@@ -554,7 +570,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
 
     if (this.settings.showTooltipLevel) {
       const levelValue = typeof tooltipValue == 'number'
-          ? `${tooltipValue.toFixed(this.settings.tooltipLevelDecimals)}&nbsp;${this.settings.tooltipUnits}`
+          ? `${this.tooltipUnitConvertor(tooltipValue).toFixed(this.settings.tooltipLevelDecimals)}&nbsp;${this.tooltipUnitSymbol}`
           : 'N/A';
       content += this.createTooltipContent(
         this.ctx.translate.instant('widgets.liquid-level-card.level'),
@@ -608,8 +624,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
     const percentage = this.convertInputData(value);
     if (this.settings.tooltipUnits !== CapacityUnits.percent) {
       const liters = this.convertOutputData(percentage);
-
-      return convertLiters(liters, this.settings.tooltipUnits, ConversionType.from);
+      return convertLiters(liters, getSourceTbUnitSymbol(this.settings.tooltipUnits) as any, ConversionType.from)
     } else {
       return percentage;
     }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts
index 86d0b118c9..152e98eb57 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts
@@ -35,6 +35,7 @@ import { IAliasController } from '@core/api/widget-api.models';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { ResourcesService } from '@core/services/resources.service';
 import { FormGroup } from '@angular/forms';
+import { TbUnit } from '@shared/models/unit.models';
 
 export interface SvgInfo {
   svg: string;
@@ -70,7 +71,7 @@ export interface LevelCardWidgetSettings extends WidgetConfig {
   backgroundOverlayColor: ColorSettings;
   showTooltip: boolean;
   showTooltipLevel: boolean;
-  tooltipUnits: CapacityUnits;
+  tooltipUnits: TbUnit | CapacityUnits;
   tooltipLevelDecimals: number;
   tooltipLevelFont: Font;
   tooltipLevelColor: ColorSettings;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.ts
index 8a77c5b6ce..a45a85d2b1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.ts
@@ -49,14 +49,15 @@ import {
   backgroundStyle,
   ColorProcessor,
   ComponentStyle,
+  createValueFormatterFromSettings,
   DateFormatProcessor,
-  getDataKey,
   getSingleTsValue,
   overlayStyle,
-  textStyle
+  textStyle,
+  ValueFormatProcessor
 } from '@shared/models/widget-settings.models';
 import { WidgetComponent } from '@home/components/widget/widget.component';
-import { formatValue, isDefinedAndNotNull, isNumeric, isUndefinedOrNull } from '@core/utils';
+import { isNumeric, isUndefinedOrNull } from '@core/utils';
 import { Element, G, Svg, SVG } from '@svgdotjs/svg.js';
 import {
   signalBarActive,
@@ -130,8 +131,7 @@ export class SignalStrengthWidgetComponent implements OnInit, OnDestroy, AfterVi
 
   hasCardClickAction = false;
 
-  private decimals = 0;
-  private units = '';
+  private valueFormat: ValueFormatProcessor;
 
   private drawSvgShapePending = false;
   private svgShape: Svg;
@@ -188,15 +188,7 @@ export class SignalStrengthWidgetComponent implements OnInit, OnDestroy, AfterVi
     this.showTooltipDate = this.showTooltip && this.settings.showTooltipDate;
 
     if (this.showTooltipValue) {
-      this.decimals = this.ctx.decimals;
-      this.units = this.ctx.units;
-      const dataKey = getDataKey(this.ctx.datasources);
-      if (isDefinedAndNotNull(dataKey?.decimals)) {
-        this.decimals = dataKey.decimals;
-      }
-      if (dataKey?.units) {
-        this.units = dataKey.units;
-      }
+      this.valueFormat = createValueFormatterFromSettings(this.ctx);
       this.tooltipValueStyle = textStyle(this.settings.tooltipValueFont);
       this.tooltipValueStyle.color = this.settings.tooltipValueColor;
       this.tooltipValueLabelStyle = {...this.tooltipValueStyle, ...this.tooltipValueLabelStyle};
@@ -257,7 +249,7 @@ export class SignalStrengthWidgetComponent implements OnInit, OnDestroy, AfterVi
     if (!this.noData) {
       this.rssi = Number(value);
       if (this.showTooltipValue) {
-        this.tooltipValueText = formatValue(value, this.decimals, this.units, false);
+        this.tooltipValueText = this.valueFormat.format(value);
       }
     } else {
       this.rssi = this.noSignalRssiValue;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/knob.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/knob.component.ts
index 12865d7989..6dedab0bf2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/knob.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/knob.component.ts
@@ -24,6 +24,7 @@ import { isDefined, isNumber } from '@core/utils';
 import { CanvasDigitalGaugeOptions } from '@home/components/widget/lib/canvas-digital-gauge';
 import tinycolor from 'tinycolor2';
 import { ColorProcessor, gradientColor } from '@shared/models/widget-settings.models';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 import GenericOptions = CanvasGauges.GenericOptions;
 
 interface KnobSettings {
@@ -165,7 +166,8 @@ export class KnobComponent extends PageComponent implements OnInit, OnDestroy {
       donutStartAngle: 3 / 4 * Math.PI,
       donutEndAngle: 9 / 4 * Math.PI,
       animation: false,
-      barColorProcessor: ColorProcessor.fromSettings(gradientColor('rgba(0, 0, 0, 0)', levelColors, this.minValue, this.maxValue), this.ctx)
+      barColorProcessor: ColorProcessor.fromSettings(gradientColor('rgba(0, 0, 0, 0)', levelColors, this.minValue, this.maxValue), this.ctx),
+      valueFormat: null
     };
 
     this.knob.on('click', (e) => {
@@ -406,7 +408,7 @@ export class KnobComponent extends PageComponent implements OnInit, OnDestroy {
   }
 
   private formatValue(value: any): string {
-    return this.ctx.utils.formatValue(value, this.ctx.decimals, this.ctx.units, true);
+    return this.ctx.utils.formatValue(value, this.ctx.decimals, getSourceTbUnitSymbol(this.ctx.units), true);
   }
 
   private rpcRequestValue() {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.ts
index 882d8a18c2..70e85f26b5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.ts
@@ -31,7 +31,8 @@ import {
   ComponentStyle,
   iconStyle,
   overlayStyle,
-  textStyle
+  textStyle,
+  ValueFormatProcessor
 } from '@shared/models/widget-settings.models';
 import { Observable } from 'rxjs';
 import { ImagePipe } from '@shared/pipe/image.pipe';
@@ -43,7 +44,7 @@ import {
   sliderWidgetDefaultSettings,
   SliderWidgetSettings
 } from '@home/components/widget/lib/rpc/slider-widget.models';
-import { formatValue, isDefinedAndNotNull, isNumeric } from '@core/utils';
+import { isDefinedAndNotNull, isNumeric } from '@core/utils';
 import { WidgetComponent } from '@home/components/widget/widget.component';
 import tinycolor from 'tinycolor2';
 
@@ -126,6 +127,7 @@ export class SliderWidgetComponent extends
   private panelResize$: ResizeObserver;
 
   private valueSetter: ValueSetter<number>;
+  private valueFormat: ValueFormatProcessor;
 
   private sliderCssClass: string;
 
@@ -155,6 +157,11 @@ export class SliderWidgetComponent extends
     this.valueStyle = textStyle(this.settings.valueFont);
     this.valueStyle.color = this.settings.valueColor;
 
+    this.valueFormat = ValueFormatProcessor.fromSettings(this.ctx.$injector, {
+      units: this.settings.valueUnits,
+      decimals: this.settings.valueDecimals
+    });
+
     this.showLeftRightIcon = this.layout === SliderLayout.extended;
     if (this.showLeftRightIcon) {
       this.leftIcon = this.settings.leftIcon;
@@ -257,7 +264,7 @@ export class SliderWidgetComponent extends
   }
 
   private _sliderValueText(value: number): string {
-    return formatValue(value, this.settings.valueDecimals, this.settings.valueUnits, false);
+    return this.valueFormat.format(value);
   }
 
   private onValue(value: number): void {
@@ -269,7 +276,7 @@ export class SliderWidgetComponent extends
 
   private updateValueText() {
     if (isDefinedAndNotNull(this.value) && isNumeric(this.value)) {
-      this.valueText = formatValue(this.value, this.settings.valueDecimals, this.settings.valueUnits, false);
+      this.valueText = this.valueFormat.format(this.value);
     } else {
       this.valueText = 'N/A';
     }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.models.ts
index eddc37b271..033c1f25be 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.models.ts
@@ -24,6 +24,7 @@ import {
 } from '@shared/models/action-widget-settings.models';
 import { BackgroundSettings, BackgroundType, cssUnit, Font } from '@shared/models/widget-settings.models';
 import { AttributeScope } from '@shared/models/telemetry/telemetry.models';
+import { TbUnit } from '@shared/models/unit.models';
 
 export enum SliderLayout {
   default = 'default',
@@ -56,7 +57,7 @@ export interface SliderWidgetSettings {
   layout: SliderLayout;
   autoScale: boolean;
   showValue: boolean;
-  valueUnits: string;
+  valueUnits: TbUnit;
   valueDecimals: number;
   valueFont: Font;
   valueColor: string;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/value-stepper-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/value-stepper-widget.component.ts
index 92f6ea6907..80472e3237 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/value-stepper-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/value-stepper-widget.component.ts
@@ -29,7 +29,13 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import { BasicActionWidgetComponent, ValueSetter } from '@home/components/widget/lib/action/action-widget.models';
-import { backgroundStyle, ComponentStyle, overlayStyle, textStyle } from '@shared/models/widget-settings.models';
+import {
+  backgroundStyle,
+  ComponentStyle,
+  overlayStyle,
+  textStyle,
+  ValueFormatProcessor
+} from '@shared/models/widget-settings.models';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -42,7 +48,7 @@ import {
 } from '@home/components/widget/lib/rpc/power-button-widget.models';
 import { SVG, Svg } from '@svgdotjs/svg.js';
 import { MatIconRegistry } from '@angular/material/icon';
-import { formatValue, isDefinedAndNotNull, isNumeric } from '@core/utils';
+import { isDefinedAndNotNull, isNumeric } from '@core/utils';
 import {
   valueStepperDefaultSettings,
   ValueStepperWidgetSettings
@@ -113,6 +119,7 @@ export class ValueStepperWidgetComponent extends
   private leftDisabledState$ = new BehaviorSubject(false);
   private rightDisabledState$ = new BehaviorSubject(false);
 
+  private valueFormat: ValueFormatProcessor;
   protected destroyRef = inject(DestroyRef);
 
   constructor(protected imagePipe: ImagePipe,
@@ -142,6 +149,11 @@ export class ValueStepperWidgetComponent extends
     this.valueStyle = textStyle(this.settings.appearance.valueFont);
     this.valueStyleColor = this.settings.appearance.valueColor;
 
+    this.valueFormat = ValueFormatProcessor.fromSettings(this.ctx.$injector, {
+      units: this.settings.appearance.valueUnits,
+      decimals: this.settings.appearance.valueDecimals
+    });
+
     if (this.showValueBox) {
       const valueBoxCss = `.tb-value-stepper-value-box {\n`+
         `border: ${this.settings.appearance.showBorder ?
@@ -239,7 +251,7 @@ export class ValueStepperWidgetComponent extends
 
   private updateValueText() {
     if (isDefinedAndNotNull(this.value) && isNumeric(this.value)) {
-      this.valueText = formatValue(this.value, this.settings.appearance.valueDecimals, this.settings.appearance.valueUnits, false);
+      this.valueText = this.valueFormat.format(this.value);
     } else {
       this.valueText = 'N/A';
     }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/value-stepper-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/value-stepper-widget.models.ts
index e0603de4a5..51c30bd1bc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/value-stepper-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/value-stepper-widget.models.ts
@@ -26,6 +26,7 @@ import {
 import { WidgetButtonCustomStyles } from '@shared/components/button/widget-button.models';
 import { BackgroundSettings, BackgroundType, cssUnit, Font } from '@shared/models/widget-settings.models';
 import { AttributeScope } from '@shared/models/telemetry/telemetry.models';
+import { TbUnit } from '@shared/models/unit.models';
 
 const defaultMainColor = '#305680';
 
@@ -76,7 +77,7 @@ export interface ValueStepperAppearance {
   maxValueRange: number;
   valueStep: number;
   showValueBox: boolean;
-  valueUnits: string;
+  valueUnits: TbUnit;
   valueDecimals: number;
   valueFont: Font;
   valueColor: string;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.ts
index 60082c98b6..67f5b58935 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-value-card-widget-settings.component.ts
@@ -21,6 +21,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { labelValueCardWidgetDefaultSettings } from '@home/components/widget/lib/cards/label-value-card-widget.models';
 import { formatValue } from '@core/utils';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-label-value-card-widget-settings',
@@ -101,7 +102,7 @@ export class LabelValueCardWidgetSettingsComponent extends WidgetSettingsCompone
   }
 
   private _valuePreviewFn(): string {
-    const units: string = this.widgetConfig.config.units;
+    const units = getSourceTbUnitSymbol(this.widgetConfig.config.units);
     const decimals: number = this.widgetConfig.config.decimals;
     return formatValue(22, decimals, units, true);
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.ts
index a92a8454d3..4887c785cb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.ts
@@ -27,6 +27,7 @@ import {
   progressBarLayouts,
   progressBarLayoutTranslations
 } from '@home/components/widget/lib/cards/progress-bar-widget.models';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-progress-bar-widget-settings',
@@ -126,7 +127,7 @@ export class ProgressBarWidgetSettingsComponent extends WidgetSettingsComponent
   }
 
   private _valuePreviewFn(): string {
-    const units: string = this.widgetConfig.config.units;
+    const units = getSourceTbUnitSymbol(this.widgetConfig.config.units);
     const decimals: number = this.widgetConfig.config.decimals;
     return formatValue(78, decimals, units, true);
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.ts
index e3f6cfda58..1cdb15948a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.ts
@@ -21,16 +21,15 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import {
   valueCardDefaultSettings,
-  ValueCardLayout, valueCardLayoutImages,
-  valueCardLayouts, valueCardLayoutTranslations
+  ValueCardLayout,
+  valueCardLayoutImages,
+  valueCardLayouts,
+  valueCardLayoutTranslations
 } from '@home/components/widget/lib/cards/value-card-widget.models';
 import { formatValue, isDefinedAndNotNull } from '@core/utils';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import {
-  DateFormatProcessor,
-  DateFormatSettings,
-  getLabel
-} from '@shared/models/widget-settings.models';
+import { DateFormatProcessor, DateFormatSettings, getLabel } from '@shared/models/widget-settings.models';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-value-card-widget-settings',
@@ -188,7 +187,7 @@ export class ValueCardWidgetSettingsComponent extends WidgetSettingsComponent {
   }
 
   private _valuePreviewFn(): string {
-    const units: string = this.widgetConfig.config.units;
+    const units = getSourceTbUnitSymbol(this.widgetConfig.config.units);
     const decimals: number = this.widgetConfig.config.decimals;
     return formatValue(22, decimals, units, true);
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.ts
index e7fa0e3a2c..9503eb7df5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-chart-card-widget-settings.component.ts
@@ -26,6 +26,7 @@ import {
   valueChartCardLayoutImages,
   valueChartCardLayoutTranslations
 } from '@home/components/widget/lib/cards/value-chart-card-widget.models';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-value-chart-card-widget-settings',
@@ -91,7 +92,7 @@ export class ValueChartCardWidgetSettingsComponent extends WidgetSettingsCompone
   }
 
   private _valuePreviewFn(): string {
-    const units: string = this.widgetConfig.config.units;
+    const units = getSourceTbUnitSymbol(this.widgetConfig.config.units);
     const decimals: number = this.widgetConfig.config.decimals;
     return formatValue(22, decimals, units, true);
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.ts
index 87eaf593e6..5cf10b7a0b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/bar-chart-with-labels-widget-settings.component.ts
@@ -30,6 +30,7 @@ import { DateFormatProcessor, DateFormatSettings } from '@shared/models/widget-s
 import {
   barChartWithLabelsDefaultSettings
 } from '@home/components/widget/lib/chart/bar-chart-with-labels-widget.models';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-bar-chart-with-labels-widget-settings',
@@ -200,7 +201,7 @@ export class BarChartWithLabelsWidgetSettingsComponent extends WidgetSettingsCom
   }
 
   private _tooltipValuePreviewFn(): string {
-    const units: string = this.widgetConfig.config.units;
+    const units = getSourceTbUnitSymbol(this.widgetConfig.config.units);
     const decimals: number = this.widgetConfig.config.decimals;
     return formatValue(22, decimals, units, false);
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.ts
index 1d7baebd33..fc5940406c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/latest-chart-widget-settings.component.ts
@@ -50,6 +50,7 @@ import { formatValue, isDefinedAndNotNull } from '@core/utils';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 @Directive()
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
@@ -202,7 +203,7 @@ export abstract class LatestChartWidgetSettingsComponent<S extends LatestChartWi
   public abstract latestChartConfigTemplate(): TemplateRef<any>;
 
   private _valuePreviewFn(): string {
-    const units: string = this.widgetConfig.config.units;
+    const units = getSourceTbUnitSymbol(this.widgetConfig.config.units);
     const decimals: number = this.widgetConfig.config.decimals;
     return formatValue(110, decimals, units, false);
   }
@@ -213,7 +214,7 @@ export abstract class LatestChartWidgetSettingsComponent<S extends LatestChartWi
     if (tooltipValueType === LatestChartTooltipValueType.percentage) {
       return formatValue(35, decimals, '%', false);
     } else {
-      const units: string = this.widgetConfig.config.units;
+      const units = getSourceTbUnitSymbol(this.widgetConfig.config.units);
       return formatValue(110, decimals, units, false);
     }
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.ts
index ef9a9bcc71..580ba435a8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.ts
@@ -40,6 +40,7 @@ import {
   chartShapes,
   chartShapeTranslations
 } from '@home/components/widget/lib/chart/chart.models';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-range-chart-widget-settings',
@@ -268,13 +269,13 @@ export class RangeChartWidgetSettingsComponent extends WidgetSettingsComponent {
   }
 
   private _pointLabelPreviewFn(): string {
-    const units: string = this.widgetConfig.config.units;
+    const units = getSourceTbUnitSymbol(this.widgetConfig.config.units);
     const decimals: number = this.widgetConfig.config.decimals;
     return formatValue(22, decimals, units, false);
   }
 
   private _tooltipValuePreviewFn(): string {
-    const units: string = this.widgetConfig.config.units;
+    const units = getSourceTbUnitSymbol(this.widgetConfig.config.units);
     const decimals: number = this.widgetConfig.config.decimals;
     return formatValue(22, decimals, units, false);
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-line-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-line-settings.component.ts
index daaa8c5efe..523958a7c0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-line-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-line-settings.component.ts
@@ -42,6 +42,7 @@ import {
   chartShapeTranslations
 } from '@home/components/widget/lib/chart/chart.models';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { getSourceTbUnitSymbol, isNotEmptyTbUnits } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-time-series-chart-line-settings',
@@ -215,9 +216,9 @@ export class TimeSeriesChartLineSettingsComponent implements OnInit, ControlValu
   private _pointLabelPreviewFn(): string {
     const dataKey = this.dataKeyConfigComponent.modelValue;
     const widgetConfig = this.dataKeyConfigComponent.widgetConfig;
-    const units = dataKey.units && dataKey.units.length ? dataKey.units : widgetConfig.config.units;
+    const units = isNotEmptyTbUnits(dataKey.units) ? dataKey.units : widgetConfig.config.units;
     const decimals = isDefinedAndNotNull(dataKey.decimals) ? dataKey.decimals :
       (isDefinedAndNotNull(widgetConfig.config.decimals) ? widgetConfig.config.decimals : 2);
-    return formatValue(22, decimals, units, false);
+    return formatValue(22, decimals, getSourceTbUnitSymbol(units), false);
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-bar-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-bar-settings.component.ts
index 95fd171e77..ef4e486f80 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-bar-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/chart-bar-settings.component.ts
@@ -38,6 +38,7 @@ import {
 } from '@home/components/widget/lib/chart/chart.models';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { getSourceTbUnitSymbol, isNotEmptyTbUnits } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-chart-bar-settings',
@@ -183,10 +184,10 @@ export class ChartBarSettingsComponent implements OnInit, ControlValueAccessor {
     if (this.series) {
       const dataKey = this.dataKeyConfigComponent.modelValue;
       const widgetConfig = this.dataKeyConfigComponent.widgetConfig;
-      const units = dataKey.units && dataKey.units.length ? dataKey.units : widgetConfig.config.units;
+      const units = isNotEmptyTbUnits(dataKey.units) ? dataKey.units : widgetConfig.config.units;
       const decimals = isDefinedAndNotNull(dataKey.decimals) ? dataKey.decimals :
         (isDefinedAndNotNull(widgetConfig.config.decimals) ? widgetConfig.config.decimals : 2);
-      return formatValue(22, decimals, units, false);
+      return formatValue(22, decimals, getSourceTbUnitSymbol(units), false);
     } else {
       return 'Wind';
     }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.html
index 14b0ec1393..8325660061 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-axis-settings.component.html
@@ -58,6 +58,7 @@
         <div *ngIf="axisType === 'yAxis' && !hideUnits" class="tb-form-row space-between">
           <div translate>widget-config.units-short</div>
           <tb-unit-input
+            supportsUnitConversion
             formControlName="units">
           </tb-unit-input>
         </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-row.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-row.component.html
index 60815cd03a..c017d3bc0a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-row.component.html
@@ -89,7 +89,7 @@
     </tb-color-input>
   </div>
   <div class="tb-units-field">
-    <tb-unit-input formControlName="units">
+    <tb-unit-input formControlName="units" supportsUnitConversion>
     </tb-unit-input>
   </div>
   <div class="tb-decimals-field">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html
index 50b224765e..b36192e728 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.html
@@ -31,6 +31,7 @@
     <div class="tb-form-row space-between">
       <div translate>widget-config.units-short</div>
       <tb-unit-input
+        supportsUnitConversion
         formControlName="units">
       </tb-unit-input>
     </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.ts
index 47b6f98cbb..62bcba3cad 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-threshold-settings-panel.component.ts
@@ -28,12 +28,14 @@ import { WidgetConfig } from '@shared/models/widget.models';
 import { formatValue, isDefinedAndNotNull } from '@core/utils';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import {
-  chartLineTypes, chartLineTypeTranslations,
+  chartLineTypes,
+  chartLineTypeTranslations,
   ChartShape,
   chartShapes,
   chartShapeTranslations
 } from '@home/components/widget/lib/chart/chart.models';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { getSourceTbUnitSymbol, isNotEmptyTbUnits, TbUnit } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-time-series-chart-threshold-settings-panel',
@@ -163,11 +165,11 @@ export class TimeSeriesChartThresholdSettingsPanelComponent implements OnInit {
   }
 
   private _labelPreviewFn(): string {
-    let units: string = this.thresholdSettingsFormGroup.get('units').value;
-    units = units && units.length ? units : this.widgetConfig.units;
+    let units: TbUnit = this.thresholdSettingsFormGroup.get('units').value;
+    units = isNotEmptyTbUnits(units) ? units : this.widgetConfig.units;
     let decimals: number = this.thresholdSettingsFormGroup.get('decimals').value;
     decimals = isDefinedAndNotNull(decimals) ? decimals :
       (isDefinedAndNotNull(this.widgetConfig.decimals) ? this.widgetConfig.decimals : 2);
-    return formatValue(22, decimals, units, false);
+    return formatValue(22, decimals, getSourceTbUnitSymbol(units), false);
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axis-row.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axis-row.component.html
index 1b31ad2b59..bfa10c68d1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axis-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axis-row.component.html
@@ -41,7 +41,7 @@
     </mat-form-field>
   </div>
   <div class="tb-units-field">
-    <tb-unit-input formControlName="units">
+    <tb-unit-input formControlName="units" supportsUnitConversion>
     </tb-unit-input>
   </div>
   <div class="tb-decimals-field">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
index cbbc6b8c59..3c48c86c10 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.html
@@ -89,7 +89,7 @@
         {{ 'widgets.slider.value' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <tb-unit-input class="flex" formControlName="valueUnits"></tb-unit-input>
+        <tb-unit-input class="flex" formControlName="valueUnits" supportsUnitConversion></tb-unit-input>
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="valueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
           <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.ts
index 40caf7a729..d9e8ca87fb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slider-widget-settings.component.ts
@@ -28,6 +28,7 @@ import {
   sliderWidgetDefaultSettings
 } from '@home/components/widget/lib/rpc/slider-widget.models';
 import { formatValue } from '@core/utils';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-slider-widget-settings',
@@ -180,7 +181,7 @@ export class SliderWidgetSettingsComponent extends WidgetSettingsComponent {
   }
 
   private _valuePreviewFn(): string {
-    const units: string = this.sliderWidgetSettingsForm.get('valueUnits').value;
+    const units: string = getSourceTbUnitSymbol(this.sliderWidgetSettingsForm.get('valueUnits').value);
     const decimals: number = this.sliderWidgetSettingsForm.get('valueDecimals').value;
     return formatValue(48, decimals, units, false);
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/value-stepper-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/value-stepper-widget-settings.component.html
index c908304651..311ad42110 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/value-stepper-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/value-stepper-widget-settings.component.html
@@ -104,7 +104,7 @@
         {{ 'widgets.value-stepper.value' | translate }}
       </mat-slide-toggle>
       <div class="flex flex-1 flex-row items-center justify-start gap-2">
-        <tb-unit-input class="flex" formControlName="valueUnits"></tb-unit-input>
+        <tb-unit-input class="flex" formControlName="valueUnits" supportsUnitConversion></tb-unit-input>
         <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
           <input matInput formControlName="valueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
           <div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/value-stepper-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/value-stepper-widget-settings.component.ts
index c5bb26a2ec..a9065fca8d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/value-stepper-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/value-stepper-widget-settings.component.ts
@@ -28,6 +28,7 @@ import {
   valueStepperTypeTranslations
 } from '@home/components/widget/lib/rpc/value-stepper-widget.models';
 import { formatValue } from '@core/utils';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 type ButtonAppearanceType = 'left' | 'right';
 
@@ -184,7 +185,7 @@ export class ValueStepperWidgetSettingsComponent extends WidgetSettingsComponent
   }
 
   private _valuePreviewFn(): string {
-    const units: string = this.valueStepperWidgetSettingsForm.get('appearance').get('valueUnits').value;
+    const units: string = getSourceTbUnitSymbol(this.valueStepperWidgetSettingsForm.get('appearance').get('valueUnits').value);
     const decimals: number = this.valueStepperWidgetSettingsForm.get('appearance').get('valueDecimals').value;
     return formatValue(48, decimals, units, false);
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts
index 63f122cb15..7276c0e27d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts
@@ -20,7 +20,8 @@ import {
   AbstractControl,
   UntypedFormArray,
   UntypedFormBuilder,
-  UntypedFormGroup, ValidationErrors,
+  UntypedFormGroup,
+  ValidationErrors,
   ValidatorFn,
   Validators
 } from '@angular/forms';
@@ -45,6 +46,7 @@ import {
   ValueSourceConfig,
   ValueSourceType
 } from '@shared/models/widget-settings.models';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-digital-gauge-widget-settings',
@@ -412,6 +414,6 @@ export class DigitalGaugeWidgetSettingsComponent extends WidgetSettingsComponent
   }
 
   private _valuePreviewFn(units: boolean): string {
-    return formatValue(22, 0, units ? this.widget.config.units : null, true);
+    return formatValue(22, 0, units ? getSourceTbUnitSymbol(this.widget.config.units) : null, true);
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.ts
index a654d2270c..bf6b529d06 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.ts
@@ -27,6 +27,7 @@ import {
   batteryLevelLayouts,
   batteryLevelLayoutTranslations
 } from '@home/components/widget/lib/indicator/battery-level-widget.models';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-battery-level-widget-settings',
@@ -122,7 +123,7 @@ export class BatteryLevelWidgetSettingsComponent extends WidgetSettingsComponent
   }
 
   private _valuePreviewFn(): string {
-    const units: string = this.widgetConfig.config.units;
+    const units: string = getSourceTbUnitSymbol(this.widgetConfig.config.units);
     const decimals: number = this.widgetConfig.config.decimals;
     return formatValue(22, decimals, units, true);
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
index aff64a5e18..88f62477dd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
@@ -99,6 +99,7 @@
           </mat-form-field>
           <tb-unit-input *ngIf="levelCardWidgetSettingsForm.get('widgetUnitsSource').value !== DataSourceType.attribute; else selectUnitsAttributes"
                          required class="flex"
+                         supportsUnitConversion
                          [tagFilter]="unitsType.capacity"
                          formControlName="units">
           </tb-unit-input>
@@ -239,6 +240,7 @@
             </mat-slide-toggle>
             <div class="tb-flex row flex-start align-center">
               <tb-unit-input [tagFilter]="unitsType.capacity"
+                             supportsUnitConversion
                              required class="flex" formControlName="tooltipUnits">
               </tb-unit-input>
               <mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.ts
index 59f8c177c6..843c4470b5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.ts
@@ -44,7 +44,7 @@ import {
   ShapesTranslations,
   updatedFormSettingsValidators
 } from '@home/components/widget/lib/indicator/liquid-level-widget.models';
-import { UnitsType } from '@shared/models/unit.models';
+import { getSourceTbUnitSymbol, UnitsType } from '@shared/models/unit.models';
 import { ImageCardsSelectComponent } from '@home/components/widget/lib/settings/common/image-cards-select.component';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { Observable, of, ReplaySubject } from 'rxjs';
@@ -230,13 +230,13 @@ export class LiquidLevelCardWidgetSettingsComponent extends WidgetSettingsCompon
   }
 
   private _valuePreviewFn(): string {
-    const units: string = this.widgetConfig.config.units;
+    const units: string = getSourceTbUnitSymbol(this.widgetConfig.config.units);
     const decimals: number = this.widgetConfig.config.decimals;
     return formatValue(32, decimals, units, true);
   }
 
   private _tooltipValuePreviewFn() {
-    const units: string = this.levelCardWidgetSettingsForm.get('tooltipUnits').value;
+    const units: string = getSourceTbUnitSymbol(this.levelCardWidgetSettingsForm.get('tooltipUnits').value);
     const decimals: number = this.levelCardWidgetSettingsForm.get('tooltipLevelDecimals').value;
     return formatValue(32, decimals, units, true);
   }
@@ -245,7 +245,7 @@ export class LiquidLevelCardWidgetSettingsComponent extends WidgetSettingsCompon
     const value = this.levelCardWidgetSettingsForm.get('volumeConstant').value;
     const datasourceUnits = this.levelCardWidgetSettingsForm.get('datasourceUnits').value;
     const decimals: number = this.widgetConfig.config.decimals;
-    let units: string = this.widgetConfig.config.units;
+    let units: string = getSourceTbUnitSymbol(this.widgetConfig.config.units);
 
     if (datasourceUnits !== CapacityUnits.percent) {
       units = datasourceUnits;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.ts
index 74def6f08d..7b5b20e777 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/signal-strength-widget-settings.component.ts
@@ -27,6 +27,7 @@ import {
   signalStrengthLayoutTranslations
 } from '@home/components/widget/lib/indicator/signal-strength-widget.models';
 import { DateFormatProcessor, DateFormatSettings } from '@shared/models/widget-settings.models';
+import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-signal-strength-widget-settings',
@@ -154,7 +155,7 @@ export class SignalStrengthWidgetSettingsComponent extends WidgetSettingsCompone
   }
 
   private _tooltipValuePreviewFn(): string {
-    const units: string = this.widgetConfig.config.units;
+    const units: string = getSourceTbUnitSymbol(this.widgetConfig.config.units);
     const decimals: number = this.widgetConfig.config.decimals;
     return formatValue(-76, decimals, units, true);
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.ts
index 1b48bfd7c2..f947369840 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/weather/wind-speed-direction-widget-settings.component.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, Injector } from '@angular/core';
+import { Component } from '@angular/core';
 import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
@@ -28,6 +28,7 @@ import {
   windSpeedDirectionLayoutTranslations
 } from '@home/components/widget/lib/weather/wind-speed-direction-widget.models';
 import { getDataKey } from '@shared/models/widget-settings.models';
+import { getSourceTbUnitSymbol, TbUnit } from '@shared/models/unit.models';
 
 @Component({
   selector: 'tb-wind-speed-direction-widget-settings',
@@ -60,7 +61,6 @@ export class WindSpeedDirectionWidgetSettingsComponent extends WidgetSettingsCom
   centerValuePreviewFn = this._centerValuePreviewFn.bind(this);
 
   constructor(protected store: Store<AppState>,
-              private $injector: Injector,
               private fb: UntypedFormBuilder) {
     super(store);
   }
@@ -122,7 +122,7 @@ export class WindSpeedDirectionWidgetSettingsComponent extends WidgetSettingsCom
   private _centerValuePreviewFn(): string {
     const centerValueDataKey = getDataKey(this.widgetConfig.config.datasources, 1);
     if (centerValueDataKey) {
-      let units: string = this.widgetConfig.config.units;
+      let units: TbUnit = this.widgetConfig.config.units;
       let decimals: number = this.widgetConfig.config.decimals;
       if (isDefinedAndNotNull(centerValueDataKey?.decimals)) {
         decimals = centerValueDataKey.decimals;
@@ -130,7 +130,7 @@ export class WindSpeedDirectionWidgetSettingsComponent extends WidgetSettingsCom
       if (centerValueDataKey?.units) {
         units = centerValueDataKey.units;
       }
-      return formatValue(25, decimals, units, true);
+      return formatValue(25, decimals, getSourceTbUnitSymbol(units), true);
     } else {
       return '225°';
     }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
index 8aadc62ee4..16361c4761 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
@@ -34,6 +34,7 @@ import {
 } from '@shared/models/js-function.models';
 import { forkJoin, Observable, of, ReplaySubject } from 'rxjs';
 import { catchError, map, share } from 'rxjs/operators';
+import type { ValueFormatProcessor } from '@shared/models/widget-settings.models';
 
 type ColumnVisibilityOptions = 'visible' | 'hidden' | 'hidden-mobile';
 
@@ -106,8 +107,7 @@ export interface CellContentFunctionInfo {
 
 export interface CellContentInfo {
   contentFunction: Observable<CellContentFunctionInfo>;
-  units?: string;
-  decimals?: number;
+  valueFormat?: ValueFormatProcessor
 }
 
 export type CellStyleFunction = (...args: any[]) => any;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
index 2653b79059..d523bfc522 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts
@@ -104,7 +104,7 @@ import {
 import { ComponentPortal } from '@angular/cdk/portal';
 import { FormBuilder } from '@angular/forms';
 import { DEFAULT_OVERLAY_POSITIONS } from '@shared/models/overlay.models';
-import { DateFormatSettings } from '@shared/models/widget-settings.models';
+import { DateFormatSettings, ValueFormatProcessor } from '@shared/models/widget-settings.models';
 
 export interface TimeseriesTableWidgetSettings extends TableWidgetSettings {
   showTimestamp: boolean;
@@ -539,10 +539,12 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
       const contentFunctionInfo = getCellContentFunctionInfo(this.ctx, keySettings, 'value, rowData, ctx');
       const columnDefaultVisibility = getColumnDefaultVisibility(keySettings, this.ctx);
       const columnSelectionAvailability = getColumnSelectionAvailability(keySettings);
+      const decimals = (dataKey.decimals || dataKey.decimals === 0) ? dataKey.decimals : this.ctx.widgetConfig.decimals;
+      const units = dataKey.units || this.ctx.widgetConfig.units;
+      const valueFormat = ValueFormatProcessor.fromSettings(this.ctx.$injector, {units, decimals, showZeroDecimals: true});
       const contentInfo: CellContentInfo = {
         contentFunction: contentFunctionInfo,
-        units: dataKey.units,
-        decimals: dataKey.decimals
+        valueFormat
       };
       header.push({
         index: index + 1,
@@ -565,10 +567,12 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
         const contentFunctionInfo = getCellContentFunctionInfo(this.ctx, keySettings, 'value, rowData, ctx');
         const columnDefaultVisibility = getColumnDefaultVisibility(keySettings, this.ctx);
         const columnSelectionAvailability = getColumnSelectionAvailability(keySettings);
+        const decimals = (dataKey.decimals || dataKey.decimals === 0) ? dataKey.decimals : this.ctx.widgetConfig.decimals;
+        const units = dataKey.units || this.ctx.widgetConfig.units;
+        const valueFormat = ValueFormatProcessor.fromSettings(this.ctx.$injector, {units, decimals, showZeroDecimals: true});
         const contentInfo: CellContentInfo = {
           contentFunction: contentFunctionInfo,
-          units: dataKey.units,
-          decimals: dataKey.decimals
+          valueFormat
         };
         header.push({
           index: index + 1,
@@ -682,7 +686,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
 
   public rowStyle(source: TimeseriesTableSource, row: TimeseriesRow, index: number): Observable<any> {
     let style$: Observable<any>;
-    let res = this.rowStyleCache[index];
+    const res = this.rowStyleCache[index];
     if (!res) {
       style$ = this.rowStylesInfo.pipe(
         map(styleInfo => {
@@ -725,7 +729,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
                    index: number, row: TimeseriesRow, value: any, rowIndex: number): Observable<any> {
     let style$: Observable<any>;
     const cacheIndex = rowIndex * (source.header.length + 1) + index;
-    let res = this.cellStyleCache[cacheIndex];
+    const res = this.cellStyleCache[cacheIndex];
     if (!res) {
       if (index > 0) {
         style$ = header.styleInfo.pipe(
@@ -772,7 +776,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
                      index: number, row: TimeseriesRow, value: any, rowIndex: number): Observable<SafeHtml> {
     let content$: Observable<SafeHtml>;
     const cacheIndex = rowIndex * (source.header.length + 1) + index ;
-    let res = this.cellContentCache[cacheIndex];
+    const res = this.cellContentCache[cacheIndex];
     if (isUndefined(res)) {
       if (index === 0) {
         content$ = of(row.formattedTs);
@@ -792,9 +796,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
                 content = '' + value;
               }
             } else {
-              const decimals = (header.contentInfo.decimals || header.contentInfo.decimals === 0) ? header.contentInfo.decimals : this.ctx.widgetConfig.decimals;
-              const units = header.contentInfo.units || this.ctx.widgetConfig.units;
-              content = this.ctx.utils.formatValue(value, decimals, units, true);
+              content = header.contentInfo.valueFormat.format(value);
             }
             if (isDefined(content)) {
               content = this.utils.customTranslation(content, content);
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.ts
index cf6ac85538..f495c4b204 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.ts
@@ -40,7 +40,8 @@ import {
   Font,
   getDataKey,
   getSingleTsValueByDataKey,
-  overlayStyle
+  overlayStyle,
+  ValueFormatProcessor
 } from '@shared/models/widget-settings.models';
 import { formatValue, isDefinedAndNotNull, isNumeric } from '@core/utils';
 import { Path, Svg, SVG, Text } from '@svgdotjs/svg.js';
@@ -48,6 +49,7 @@ import { DataKey } from '@shared/models/widget.models';
 import { Observable } from 'rxjs';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
+import { UnitService } from '@core/services/unit.service';
 
 const shapeSize = 180;
 const cx = shapeSize / 2;
@@ -96,14 +98,14 @@ export class WindSpeedDirectionWidgetComponent implements OnInit, OnDestroy, Aft
 
   hasCardClickAction = false;
 
-  private decimals = 0;
-  private units = '';
-
   private drawSvgShapePending = false;
   private svgShape: Svg;
   private arrow: Path;
   private centerValueTextNode: Text;
 
+  private units = ''
+  private valueFormat: ValueFormatProcessor;
+
   private windDirectionDataKey: DataKey;
   private centerValueDataKey: DataKey;
 
@@ -111,6 +113,7 @@ export class WindSpeedDirectionWidgetComponent implements OnInit, OnDestroy, Aft
   private centerValueText = 'N/A';
 
   constructor(private imagePipe: ImagePipe,
+              private unitService: UnitService,
               private sanitizer: DomSanitizer,
               private renderer: Renderer2,
               private cd: ChangeDetectorRef) {
@@ -124,14 +127,16 @@ export class WindSpeedDirectionWidgetComponent implements OnInit, OnDestroy, Aft
     this.centerValueDataKey = getDataKey(this.ctx.datasources, 1);
 
     if (this.centerValueDataKey) {
-      this.decimals = this.ctx.decimals;
-      this.units = this.ctx.units;
+      let decimals = this.ctx.decimals;
+      let units = this.ctx.units;
       if (isDefinedAndNotNull(this.centerValueDataKey.decimals)) {
-        this.decimals = this.centerValueDataKey.decimals;
+        decimals = this.centerValueDataKey.decimals;
       }
       if (this.centerValueDataKey.units) {
-        this.units = this.centerValueDataKey.units;
+        units = this.centerValueDataKey.units;
       }
+      this.units = this.unitService.getTargetUnitSymbol(units);
+      this.valueFormat = ValueFormatProcessor.fromSettings(this.ctx.$injector, {units, decimals, ignoreUnitSymbol: true})
     }
 
     this.layout = this.settings.layout;
@@ -186,7 +191,7 @@ export class WindSpeedDirectionWidgetComponent implements OnInit, OnDestroy, Aft
       const centerValueTsValue = getSingleTsValueByDataKey(this.ctx.data, this.centerValueDataKey);
       if (centerValueTsValue && isDefinedAndNotNull(centerValueTsValue[1]) && isNumeric(centerValueTsValue[1])) {
         value = centerValueTsValue[1];
-        this.centerValueText = formatValue(value, this.decimals, '', false);
+        this.centerValueText = this.valueFormat.format(value);
       }
     }
     this.centerValueColor.update(value);
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
index 77764ba408..8d46ede134 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
@@ -291,7 +291,7 @@
       <div *ngIf="displayUnitsConfig" class="tb-form-row space-between">
         <div tb-hint-tooltip-icon="{{'widget-config.default-data-key-parameter-hint' | translate}}" translate>widget-config.units-by-default</div>
         <tb-unit-input
-          [allowConverted]="modelValue.typeParameters.supportsUnitConversion"
+          [supportsUnitConversion]="modelValue.typeParameters.supportsUnitConversion"
           formControlName="units">
         </tb-unit-input>
       </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
index 9287b92d57..d5a0b78ce5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
@@ -342,6 +342,7 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
     this.subscriptionContext.dashboardUtils = this.dashboardUtils;
     this.subscriptionContext.raf = this.raf;
     this.subscriptionContext.widgetUtils = this.widgetContext.utils;
+    this.subscriptionContext.$injector = this.injector;
     this.subscriptionContext.getServerTimeDiff = this.dashboardService.getServerTimeDiff.bind(this.dashboardService);
 
     this.widgetComponentService.getWidgetInfo(this.widget.typeFullFqn).subscribe({
diff --git a/ui-ngx/src/app/modules/home/models/widget-component.models.ts b/ui-ngx/src/app/modules/home/models/widget-component.models.ts
index aee890a5b2..8d2622ebea 100644
--- a/ui-ngx/src/app/modules/home/models/widget-component.models.ts
+++ b/ui-ngx/src/app/modules/home/models/widget-component.models.ts
@@ -51,7 +51,8 @@ import {
   ChangeDetectorRef,
   InjectionToken,
   Injector,
-  NgZone, Renderer2,
+  NgZone,
+  Renderer2,
   TemplateRef,
   Type,
   ViewContainerRef
@@ -116,6 +117,7 @@ import { UtilsService } from '@core/services/utils.service';
 import { CompiledTbFunction } from '@shared/models/js-function.models';
 import { FormProperty } from '@shared/models/dynamic-form.models';
 import { ExportableEntity } from '@shared/models/base-data';
+import { TbUnit } from '@shared/models/unit.models';
 
 export interface IWidgetAction {
   name: string;
@@ -174,7 +176,7 @@ export class WidgetContext {
     return this.widget.config.settings;
   }
 
-  get units(): string {
+  get units(): TbUnit {
     return this.widget.config.units || '';
   }
 
diff --git a/ui-ngx/src/app/shared/components/convert-unit-settings-panel.component.html b/ui-ngx/src/app/shared/components/convert-unit-settings-panel.component.html
index fb5e73aebc..7c935728a3 100644
--- a/ui-ngx/src/app/shared/components/convert-unit-settings-panel.component.html
+++ b/ui-ngx/src/app/shared/components/convert-unit-settings-panel.component.html
@@ -20,7 +20,8 @@
   <div class="tb-convert-settings-panel-content" [formGroup]="convertUnitForm">
     <div class="tb-form-row">
       <div class="min-w-25" [class.tb-disabled-label]="convertUnitForm.get('from').disabled" translate>unit.convert.convert-from</div>
-      <tb-unit-input #unitFrom class="flex-1" [required]="required" formControlName="from"></tb-unit-input>
+      <tb-unit-input #unitFrom class="flex-1" [required]="required" formControlName="from"
+                     [measure]="measure" [tagFilter]="tagFilter"></tb-unit-input>
     </div>
     <div class="tb-form-row">
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="convertUnit">
@@ -32,28 +33,43 @@
     <div class="tb-form-row">
       <div class="min-w-25" [class.tb-disabled-label]="convertUnitForm.get('METRIC').disabled" translate>unit.convert.to-metric</div>
       <tb-unit-input class="flex-1"
+                     onlySystemUnits
                      formControlName="METRIC"
+                     [tagFilter]="tagFilter"
                      [unitSystem]="UnitSystem.METRIC"
-                     [measure]="measure">
+                     [measure]="targetMeasure">
       </tb-unit-input>
     </div>
     <div class="tb-form-row">
       <div class="min-w-25" [class.tb-disabled-label]="convertUnitForm.get('IMPERIAL').disabled" translate>unit.convert.to-imperial</div>
       <tb-unit-input class="flex-1"
+                     onlySystemUnits
                      formControlName="IMPERIAL"
+                     [tagFilter]="tagFilter"
                      [unitSystem]="UnitSystem.IMPERIAL"
-                     [measure]="measure">
+                     [measure]="targetMeasure">
       </tb-unit-input>
     </div>
     <div class="tb-form-row">
       <div class="min-w-25" [class.tb-disabled-label]="convertUnitForm.get('HYBRID').disabled" translate>unit.convert.to-imperial</div>
       <tb-unit-input class="flex-1"
+                     onlySystemUnits
+                     [tagFilter]="tagFilter"
                      formControlName="HYBRID"
-                     [measure]="measure">
+                     [measure]="targetMeasure">
       </tb-unit-input>
     </div>
   </div>
   <div class="tb-convert-settings-panel-buttons">
+    <button mat-button
+            color="primary"
+            type="button"
+            *ngIf="!disabled"
+            (click)="clearUnit()"
+            [disabled]="!(!!convertUnitForm.value.from || convertUnitForm.value.convertUnit)">
+      {{ 'action.clear' | translate }}
+    </button>
+    <span class="flex-1"></span>
     <button mat-button
             color="primary"
             type="button"
diff --git a/ui-ngx/src/app/shared/components/convert-unit-settings-panel.component.ts b/ui-ngx/src/app/shared/components/convert-unit-settings-panel.component.ts
index 624bd9ec33..7d3b74e27e 100644
--- a/ui-ngx/src/app/shared/components/convert-unit-settings-panel.component.ts
+++ b/ui-ngx/src/app/shared/components/convert-unit-settings-panel.component.ts
@@ -15,13 +15,13 @@
 ///
 
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
-import { AllMeasures, TbUnit, UnitInfo, UnitSystem } from '@shared/models/unit.models';
+import { AllMeasures, isNotEmptyTbUnits, TbUnit, UnitInfo, UnitsType, UnitSystem } from '@shared/models/unit.models';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 import { FormBuilder, Validators } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { UnitService } from '@core/services/unit.service';
 import { debounceTime, first } from 'rxjs/operators';
-import { isEmptyStr } from '@core/utils';
+import { isUndefinedOrNull } from '@core/utils';
 import type { UnitInputComponent } from '@shared/components/unit-input.component';
 
 @Component({
@@ -47,10 +47,16 @@ export class ConvertUnitSettingsPanelComponent implements OnInit {
   @Output()
   unitSettingsApplied = new EventEmitter<TbUnit>();
 
-  UnitSystem = UnitSystem;
+  @Input()
+  tagFilter: UnitsType;
 
+  @Input()
   measure: AllMeasures;
 
+  UnitSystem = UnitSystem;
+
+  targetMeasure: AllMeasures;
+
   convertUnitForm =  this.fb.group({
     from: [''],
     convertUnit: [true],
@@ -69,16 +75,17 @@ export class ConvertUnitSettingsPanelComponent implements OnInit {
       takeUntilDestroyed()
     ).subscribe(unit => {
       const unitDescription = this.unitService.getUnitInfo(unit);
-      if (unitDescription) {
+      const units = unitDescription ? this.unitService.getUnits(unitDescription.measure) : [];
+      if (unitDescription && units.length > 1) {
         this.convertUnitForm.get('convertUnit').enable({emitEvent: true});
-        this.measure = unitDescription.measure;
+        this.targetMeasure = unitDescription.measure;
         if (unitDescription.system === UnitSystem.IMPERIAL) {
-          this.convertUnitForm.get('METRIC').setValue(this.unitService.getDefaultUnit(this.measure, UnitSystem.METRIC), {emitEvent: false});
+          this.convertUnitForm.get('METRIC').setValue(this.unitService.getDefaultUnit(this.targetMeasure, UnitSystem.METRIC), {emitEvent: false});
           this.convertUnitForm.get('IMPERIAL').setValue(unit, {emitEvent: false});
           this.convertUnitForm.get('HYBRID').setValue(unit, {emitEvent: false});
         } else {
           this.convertUnitForm.get('METRIC').setValue(unit, {emitEvent: false});
-          this.convertUnitForm.get('IMPERIAL').setValue(this.unitService.getDefaultUnit(this.measure, UnitSystem.IMPERIAL), {emitEvent: false});
+          this.convertUnitForm.get('IMPERIAL').setValue(this.unitService.getDefaultUnit(this.targetMeasure, UnitSystem.IMPERIAL), {emitEvent: false});
           this.convertUnitForm.get('HYBRID').setValue(unit, {emitEvent: false});
         }
       } else {
@@ -111,34 +118,38 @@ export class ConvertUnitSettingsPanelComponent implements OnInit {
     let unitDescription: UnitInfo;
     if (this.required) {
       this.convertUnitForm.get('from').setValidators(Validators.required);
-      this.convertUnitForm.get('from').updateValueAndValidity({emitEvent: false});
     }
     if (typeof this.unit === 'string') {
       this.convertUnitForm.get('convertUnit').setValue(false, {onlySelf: true});
-      this.convertUnitForm.get('from').setValue(this.unit, {emitEvent: true});
+      this.convertUnitForm.get('from').setValue(this.unit);
       unitDescription = this.unitService.getUnitInfo(this.unit);
-    } else if (this.unit === null) {
+    } else if (isUndefinedOrNull(this.unit)) {
       this.convertUnitForm.get('convertUnit').setValue(false, {onlySelf: true});
-      this.convertUnitForm.get('from').setValue(null, {emitEvent: true});
+      this.convertUnitForm.get('from').setValue(null);
     } else {
       this.convertUnitForm.patchValue(this.unit, {emitEvent: false});
       unitDescription = this.unitService.getUnitInfo(this.unit.from);
     }
 
     if (unitDescription?.measure) {
-      this.measure = unitDescription.measure;
+      this.targetMeasure = unitDescription.measure;
     } else {
       this.convertUnitForm.get('convertUnit').disable({emitEvent: false});
     }
     if (this.disabled) {
       this.convertUnitForm.disable({emitEvent: false});
-    } else if (this.unit === null || isEmptyStr(this.unit)) {
+    }
+    else if (!isNotEmptyTbUnits(this.unit)) {
       this.popover.tbAnimationDone.pipe(first()).subscribe(() => {
         this.unitFrom.unitInput.nativeElement.focus();
       });
     }
   }
 
+  clearUnit() {
+    this.unitSettingsApplied.emit(null);
+  }
+
   cancel() {
     this.popover.hide();
   }
diff --git a/ui-ngx/src/app/shared/components/unit-input.component.html b/ui-ngx/src/app/shared/components/unit-input.component.html
index e1ab29fab3..33c77130b9 100644
--- a/ui-ngx/src/app/shared/components/unit-input.component.html
+++ b/ui-ngx/src/app/shared/components/unit-input.component.html
@@ -23,10 +23,9 @@
          (focusin)="onFocus()"
          [matAutocomplete]="unitsAutocomplete"
          [matAutocompleteDisabled]="supportsUnitConversion">
-  <button *ngIf="unitsFormControl.value && !disabled && unitsFormControl.valid"
+  <button *ngIf="unitsFormControl.value && !disabled && unitsFormControl.valid && !isUnitMapping"
           type="button"
           class="tb-icon-24 mr-2"
-          [class.mr-2]="!supportsUnitConversion || !isUnitMapping"
           matSuffix mat-icon-button aria-label="Clear"
           (click)="clear($event)">
     <mat-icon class="material-icons">close</mat-icon>
diff --git a/ui-ngx/src/app/shared/components/unit-input.component.ts b/ui-ngx/src/app/shared/components/unit-input.component.ts
index beabf8b381..510f05826d 100644
--- a/ui-ngx/src/app/shared/components/unit-input.component.ts
+++ b/ui-ngx/src/app/shared/components/unit-input.component.ts
@@ -34,6 +34,7 @@ import { Observable, of, shareReplay } from 'rxjs';
 import {
   AllMeasures,
   getSourceTbUnitSymbol,
+  isTbUnitMapping,
   TbUnit,
   UnitInfo,
   UnitsType,
@@ -43,7 +44,7 @@ import { map, mergeMap } from 'rxjs/operators';
 import { UnitService } from '@core/services/unit.service';
 import { TbPopoverService } from '@shared/components/popover.service';
 import { ConvertUnitSettingsPanelComponent } from '@shared/components/convert-unit-settings-panel.component';
-import { isNotEmptyStr, isObject } from '@core/utils';
+import { isDefinedAndNotNull, isEqual, isNotEmptyStr } from '@core/utils';
 
 @Component({
   selector: 'tb-unit-input',
@@ -83,6 +84,9 @@ export class UnitInputComponent implements ControlValueAccessor, OnInit, OnChang
   @Input({transform: booleanAttribute})
   supportsUnitConversion = false;
 
+  @Input({transform: booleanAttribute})
+  onlySystemUnits = false;
+
   filteredUnits$: Observable<Array<[AllMeasures, Array<UnitInfo>]>>;
 
   searchText = '';
@@ -136,7 +140,7 @@ export class UnitInputComponent implements ControlValueAccessor, OnInit, OnChang
       this.isUnitMapping = false;
     } else {
       this.unitsFormControl.patchValue(symbol, {emitEvent: false});
-      this.isUnitMapping = symbol !== null;
+      this.isUnitMapping = isDefinedAndNotNull(symbol);
     }
     this.dirty = true;
   }
@@ -174,12 +178,10 @@ export class UnitInputComponent implements ControlValueAccessor, OnInit, OnChang
   clear($event: Event) {
     $event.stopPropagation();
     this.unitsFormControl.patchValue(null, {emitEvent: true});
-    if (!this.supportsUnitConversion) {
-      setTimeout(() => {
-        this.unitInput.nativeElement.blur();
-        this.unitInput.nativeElement.focus();
-      }, 0);
-    }
+    setTimeout(() => {
+      this.unitInput.nativeElement.blur();
+      this.unitInput.nativeElement.focus();
+    }, 0);
   }
 
   openConvertSettingsPopup($event: Event) {
@@ -202,6 +204,8 @@ export class UnitInputComponent implements ControlValueAccessor, OnInit, OnChang
           unit: this.extractTbUnit(this.unitsFormControl.value),
           required: this.required,
           disabled: this.disabled,
+          tagFilter: this.tagFilter,
+          measure: this.measure
         },
         isModal: true
       });
@@ -214,10 +218,20 @@ export class UnitInputComponent implements ControlValueAccessor, OnInit, OnChang
   }
 
   private updateModel(value: UnitInfo | TbUnit ) {
-    const res = this.extractTbUnit(value);
-    if (this.modelValue !== res) {
+    let res = this.extractTbUnit(value);
+    if (this.onlySystemUnits && !isTbUnitMapping(res)) {
+      const unitInfo = this.unitService.getUnitInfo(res as string);
+      if (unitInfo) {
+        if (this.measure && unitInfo.measure !== this.measure) {
+          res = null;
+        }
+      } else {
+        res = null;
+      }
+    }
+    if (!isEqual(this.modelValue, res)) {
       this.modelValue = res;
-      this.isUnitMapping = (res !== null && isObject(res));
+      this.isUnitMapping = isTbUnitMapping(res);
       this.propagateChange(this.modelValue);
     }
   }
diff --git a/ui-ngx/src/app/shared/models/unit.models.ts b/ui-ngx/src/app/shared/models/unit.models.ts
index 04bcdb147c..f388b6ab81 100644
--- a/ui-ngx/src/app/shared/models/unit.models.ts
+++ b/ui-ngx/src/app/shared/models/unit.models.ts
@@ -104,6 +104,7 @@ import voltage, { VoltageUnits } from '@shared/models/units/voltage';
 import volume, { VolumeUnits } from '@shared/models/units/volume';
 import volumeFlow, { VolumeFlowUnits } from '@shared/models/units/volume-flow';
 import { TranslateService } from '@ngx-translate/core';
+import { isNotEmptyStr } from '@core/utils';
 
 export type AllMeasuresUnits =
   | AbsorbedDoseRateUnits
@@ -663,3 +664,15 @@ export const getSourceTbUnitSymbol = (value: TbUnit | UnitInfo | null): string =
   }
   return value.from;
 }
+
+export const isNotEmptyTbUnits = (unit: any): boolean => {
+  if (typeof unit === 'object' && unit !== null && isNotEmptyStr(unit?.from)) {
+    return true;
+  }
+  return isNotEmptyStr(unit);
+}
+
+export const isTbUnitMapping = (unit: any): boolean => {
+  if (typeof unit !== 'object' || unit === null) return false;
+  return isNotEmptyStr(unit.from);
+};
diff --git a/ui-ngx/src/app/shared/models/widget-settings.models.ts b/ui-ngx/src/app/shared/models/widget-settings.models.ts
index 0e81219014..c904f07575 100644
--- a/ui-ngx/src/app/shared/models/widget-settings.models.ts
+++ b/ui-ngx/src/app/shared/models/widget-settings.models.ts
@@ -934,11 +934,7 @@ export class UnitConverterValueFormatProcessor extends ValueFormatProcessor {
     const unitService = this.$injector.get(UnitService);
     const unit = settings.units as TbUnitMapping;
     this.unitSymbol = settings.ignoreUnitSymbol ? null : unitService.getTargetUnitSymbol(unit);
-    try {
-      this.unitConverter = unitService.geUnitConverter(unit);
-    } catch (e) {
-      console.warn('Failed to create unit converter:', e);
-    }
+    this.unitConverter = unitService.geUnitConverter(unit);
 
     this.isDefinedDecimals = isDefinedAndNotNull(settings.decimals);
     this.hideZeroDecimals = !settings.showZeroDecimals;
diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts
index 221358d8c8..00b62cfb72 100644
--- a/ui-ngx/src/app/shared/models/widget.models.ts
+++ b/ui-ngx/src/app/shared/models/widget.models.ts
@@ -39,7 +39,7 @@ import { Dashboard } from '@shared/models/dashboard.models';
 import { IAliasController } from '@core/api/widget-api.models';
 import { isNotEmptyStr, mergeDeep, mergeDeepIgnoreArray } from '@core/utils';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
-import { ComponentStyle, Font, TimewindowStyle } from '@shared/models/widget-settings.models';
+import { ComponentStyle, Font, TimewindowStyle, ValueFormatProcessor } from '@shared/models/widget-settings.models';
 import { NULL_UUID } from '@shared/models/id/has-uuid';
 import { EntityInfoData, HasTenantId, HasVersion } from '@shared/models/entity.models';
 import {
@@ -50,6 +50,7 @@ import { WidgetConfigCallbacks } from '@home/components/widget/config/widget-con
 import { TbFunction } from '@shared/models/js-function.models';
 import { FormProperty, jsonFormSchemaToFormProperties } from '@shared/models/dynamic-form.models';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { TbUnit } from '@shared/models/unit.models';
 
 export enum widgetType {
   timeseries = 'timeseries',
@@ -332,6 +333,7 @@ export interface LegendConfig {
   showAvg: boolean;
   showTotal: boolean;
   showLatest: boolean;
+  valueFormat: ValueFormatProcessor;
 }
 
 export const defaultLegendConfig = (wType: widgetType): LegendConfig => ({
@@ -342,7 +344,8 @@ export const defaultLegendConfig = (wType: widgetType): LegendConfig => ({
   showMax: false,
   showAvg: wType === widgetType.timeseries,
   showTotal: false,
-  showLatest: false
+  showLatest: false,
+  valueFormat: null
 });
 
 export enum ComparisonResultType {
@@ -370,7 +373,7 @@ export interface KeyInfo {
   color?: string;
   funcBody?: TbFunction;
   postFuncBody?: TbFunction;
-  units?: string;
+  units?: TbUnit;
   decimals?: number;
 }
 
@@ -558,6 +561,7 @@ export interface DatasourceData extends DataSetHolder {
 export interface LegendKey {
   dataKey: DataKey;
   dataIndex: number;
+  valueFormat: ValueFormatProcessor;
 }
 
 export interface LegendKeyData {
@@ -899,7 +903,7 @@ export interface WidgetConfig {
   widgetStyle?: ComponentStyle;
   widgetCss?: string;
   titleStyle?: ComponentStyle;
-  units?: string;
+  units?: TbUnit;
   decimals?: number;
   noDataDisplayMessage?: string;
   pageSize?: number;
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index aa4ef10837..73946df6f6 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -5855,7 +5855,7 @@
             "to-imperial": "To imperial",
             "to-hybrid": "To hybrid",
             "convert-unit": "Convert unit",
-            "convert-unit-hint": "Work only with the default unit"
+            "convert-unit-hint": "Works only with system units and measures that have multiple options"
         },
         "unit-system": "Unit system",
         "unit-system-type": {