diff --git a/module/metric/js/view.ui.js b/module/metric/js/view.ui.js
index db24cc983e..924ccc0a85 100644
--- a/module/metric/js/view.ui.js
+++ b/module/metric/js/view.ui.js
@@ -28,3 +28,81 @@ window.testMetric = function()
         }
     })
 }
+
+function toggleVarType(event)
+{
+    let varTypeControl = $(event.target);
+    let varName = varTypeControl.closest('.form-body').children().first().text().slice(1);
+    let varType = varTypeControl.val();
+
+    let optionsControl = varTypeControl.closest('.form-body-group').find('#options');
+
+    if(varType == 'select')
+    {
+        optionsControl.removeClass('hidden');
+        toggleOptionsControl('defaultValue', varName, 'select', optionsControl.val());
+        toggleOptionsControl('queryValue', varName, 'select', optionsControl.val());
+
+    }
+    else if(varType == 'date')
+    {
+        optionsControl.addClass('hidden');
+        toggleOptionsControl('defaultValue', varName, 'date', optionsControl.val());
+        toggleOptionsControl('queryValue', varName, 'date', optionsControl.val());
+    }
+    else if(varType == 'input')
+    {
+        optionsControl.addClass('hidden');
+        toggleOptionsControl('defaultValue', varName, 'input',optionsControl.val());
+        toggleOptionsControl('queryValue', varName, 'input', optionsControl.val());
+    }
+}
+
+function toggleOptionsControl(controlName, paramName, controlType, optionsType)
+{
+    let name = controlName + '-' + paramName;
+
+    let selectControl = $('.' + name + '-select');
+    let dateControl   = $('.' + name + '-date');
+    let inputControl  = $('.' + name + '-input');
+
+    if(controlType == 'select')
+    {
+        dateControl.addClass('hidden');
+        inputControl.addClass('hidden');
+        selectControl.removeClass('hidden');
+        loadOptionsList(optionsType, selectControl);
+    }
+    else if(controlType == 'date')
+    {
+        selectControl.addClass('hidden');
+        inputControl.addClass('hidden');
+        dateControl.removeClass('hidden');
+    }
+    else if(controlType == 'input')
+    {
+        selectControl.addClass('hidden');
+        dateControl.addClass('hidden');
+        inputControl.removeClass('hidden');
+    }
+}
+
+function toggleOptionsList(event)
+{
+    let varName = $(event.target).closest('.form-body').children().first().text().slice(1);
+    let optionsType = $(event.target).val();
+    let selectControl = $('.' + name + '-select');
+
+    loadOptionsList(optionsType, $('.' + 'defaultValue-' + varName + '-select'));
+    loadOptionsList(optionsType, $('.' + 'queryValue-' + varName + '-select'));
+}
+
+function loadOptionsList(optionsType, selectControl)
+{
+    $.get($.createLink('metric', 'ajaxGetControlOptions', 'optionType=' + optionsType), function(options)
+    {
+        const defaultValuePicker = selectControl.find('.pick-value').zui('picker');
+        options = JSON.parse(options);
+        defaultValuePicker.render({items: options});
+    });
+}