# Licensed to the Apache Software Foundation (ASF) under one
# or more contributor license agreements.  See the NOTICE file
# distributed with this work for additional information
# regarding copyright ownership.  The ASF licenses this file
# to you under the Apache License, Version 2.0 (the
# "License"); you may not use this file except in compliance
# with the License.  You may obtain a copy of the License at
#
#   http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing,
# software distributed under the License is distributed on an
# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
# KIND, either express or implied.  See the License for the
# specific language governing permissions and limitations
# under the License.
diff --git a/editor-app/configuration/properties-form-properties-controller.js b/editor-app/configuration/properties-form-properties-controller.js
index ca8f051..fc02151 100644
--- a/editor-app/configuration/properties-form-properties-controller.js
+++ b/editor-app/configuration/properties-form-properties-controller.js
@@ -102,6 +102,20 @@ angular.module('flowableModeler').controller('FlowableFormPropertiesPopupCtrl',
                 { field: 'name', displayName: $scope.labels.nameLabel}]
             }
 
+            $scope.dropdownGridOptions = {
+    		    data: $scope.enumValues,
+                headerRowHeight: 28,
+                enableRowSelection: true,
+                enableRowHeaderSelection: false,
+                multiSelect: false,
+                modifierKeysToMultiSelect: false,
+                enableHorizontalScrollbar: 0,
+                enableColumnMenus: false,
+                enableSorting: false,
+                columnDefs: [{ field: 'id', displayName: $scope.labels.idLabel },
+                { field: 'name', displayName: $scope.labels.nameLabel}]
+            }
+
             $scope.gridOptions.onRegisterApi = function (gridApi) {
                 //set gridApi on scope
                 $scope.gridApi = gridApi;
@@ -124,6 +138,13 @@ angular.module('flowableModeler').controller('FlowableFormPropertiesPopupCtrl',
                     $scope.selectedEnumValue = row.entity;
                 });
             };
+            $scope.dropdownGridOptions.onRegisterApi = function (gridApi) {
+                //set gridApi on scope
+                $scope.dropdownGridApi = gridApi;
+                gridApi.selection.on.rowSelectionChanged($scope, function (row) {
+                    $scope.selectedDropdownValue = row.entity;
+                });
+            };
         });
 
         // Handler for when the value of the type dropdown changes
@@ -143,7 +164,12 @@ angular.module('flowableModeler').controller('FlowableFormPropertiesPopupCtrl',
                 for (var i = 0; i < $scope.selectedProperty.enumValues.length; i++) {
                     $scope.enumValues.push($scope.selectedProperty.enumValues[i]);
                 }
-                
+            } else if ($scope.selectedProperty.type === 'dropdown') {
+                $scope.selectedProperty.enumValues = [ {id: 'dropdownValueProvider', name: 'provider'}];
+                $scope.enumValues.length = 0;
+                for (var i = 0; i < $scope.selectedProperty.enumValues.length; i++) {
+                    $scope.enumValues.push($scope.selectedProperty.enumValues[i]);
+                }
             } else {
                 delete $scope.selectedProperty.enumValues;
                 $scope.enumValues.length = 0;
@@ -324,4 +350,4 @@ angular.module('flowableModeler').controller('FlowableFormPropertiesPopupCtrl',
         };
 
     }])
-;
\ No newline at end of file
+;
diff --git a/editor-app/configuration/properties/form-properties-popup.html b/editor-app/configuration/properties/form-properties-popup.html
index 17c5ca8..57a24e5 100644
--- a/editor-app/configuration/properties/form-properties-popup.html
+++ b/editor-app/configuration/properties/form-properties-popup.html
@@ -42,6 +42,7 @@
                                     <option>boolean</option>
                                     <option>date</option>
                                     <option>enum</option>
+                                    <option>dropdown</option>
                                 </select>
             				</div>
                            	<div class="form-group" ng-show="selectedProperty.datePattern">
@@ -80,6 +81,38 @@
                                     </div>
                                 </div>    
             				</div>
+                            <div ng-show="selectedProperty.type == 'dropdown'" style="padding-bottom:10px">
+                                <div class="row row-no-gutter">
+                                    <div class="col-xs-6">
+                                        <div ng-if="translationsRetrieved" class="kis-listener-grid" ui-grid="dropdownGridOptions" ui-grid-selection ui-grid-auto-resize></div>
+                                        <!--<div class="pull-right">
+                                            <div class="btn-group">
+                                                <a class="btn btn-icon btn-lg" rel="tooltip" data-title="{{ACTION.MOVE.UP | translate}}" data-placement="bottom" data-original-title="" title="" ng-click="moveEnumValueUp()"><i class="fa fa-arrow-up"></i></a>
+                                                <a class="btn btn-icon btn-lg" rel="tooltip" data-title="{{ACTION.MOVE.DOWN | translate}}" data-placement="bottom" data-original-title="" title="" ng-click="moveEnumValueDown()"><i class="fa fa-arrow-down"></i></a>
+                                            </div>
+                                            <div class="btn-group">
+                                                <a class="btn btn-icon btn-lg" rel="tooltip" data-title="{{ACTION.ADD | translate}}" data-placement="bottom" data-original-title="" title="" ng-click="addNewEnumValue()"><i class="fa fa-plus"></i></a>
+                                                <a class="btn btn-icon btn-lg" rel="tooltip" data-title="{{ACTION.REMOVE | translate}}" data-placement="bottom" data-original-title="" title="" ng-click="removeEnumValue()"><i class="fa fa-minus"></i></a>
+                                            </div>
+                                        </div>-->
+                                    </div>
+                            
+                                    <div class="col-xs-6">
+                                        <div ng-show="selectedDropdownValue">
+                            
+                                            <div class="form-group">
+                                                <label for="classField">{{'PROPERTY.FORMPROPERTIES.VALUES.ID' | translate}}</label>
+                                                <input type="text" id="classField" class="form-control" ng-model="selectedDropdownValue.id" placeholder="{{'PROPERTY.FORMPROPERTIES.VALUES.ID.PLACEHOLDER' | translate}}" />
+                                            </div>
+                                            <div class="form-group">
+                                                <label for="classField">{{'PROPERTY.FORMPROPERTIES.VALUES.NAME' | translate}}</label>
+                                                <input type="text" id="classField" class="form-control" ng-model="selectedDropdownValue.name" placeholder="{{'PROPERTY.FORMPROPERTIES.VALUES.NAME.PLACEHOLDER' | translate}}" />
+                                            </div>
+                                        </div>
+                                        <div ng-show="!selectedDropdownValue" class="muted no-property-selected" translate>PROPERTY.FORMPROPERTIES.DROPDOWNVALUES.EMPTY</div>
+                                    </div>
+                                </div>    
+            				</div>
                             <div class="form-group">
             			   		<label for="expressionField">{{'PROPERTY.FORMPROPERTIES.EXPRESSION' | translate}}</label>
             			   		<input id="expressionField" class="form-control" type="text" ng-model="selectedProperty.expression" placeholder="{{'PROPERTY.FORMPROPERTIES.EXPRESSION.PLACEHOLDER' | translate }}" />
diff --git a/i18n/en.json b/i18n/en.json
index 7d0e40a..1067dad 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -824,6 +824,7 @@
     "PROPERTY.FORMPROPERTIES.DATEPATTERN.PLACEHOLDER" : "Enter date pattern",
     "PROPERTY.FORMPROPERTIES.VALUES" : "Values",
     "PROPERTY.FORMPROPERTIES.ENUMVALUES.EMPTY" : "No enum value selected",
+    "PROPERTY.FORMPROPERTIES.DROPDOWNVALUES.EMPTY" : "No dropdown value selected",
     "PROPERTY.FORMPROPERTIES.VALUES.ID" : "Id",
     "PROPERTY.FORMPROPERTIES.VALUES.NAME" : "Name",
     "PROPERTY.FORMPROPERTIES.VALUES.ID.PLACEHOLDER" : "Enter id of a value",
