Entity select widget improvements

The IPA.entity_select_widget has been modified into a searchable and
editable drop down list. The base functionality has been extracted
into IPA.combobox_widget.

Ticket #1361

install/ui/aci.js

@@ -50,7 +50,8 @@ IPA.entity_factories.permission = function() {
             }]}).
         standard_association_facets().
         adder_dialog({
-            height: '400',
+            width: 500,
+            height: 400,
             fields:[
                 'cn',
                 {
@@ -165,12 +166,16 @@ IPA.entity_factories.delegation = function() {
                 fields:[
                     'aciname',
                     {
-                        factory:IPA.entity_select_widget,
+                        factory: IPA.entity_select_widget,
-                        name: 'group', entity: 'group'
+                        name: 'group',
+                        other_entity: 'group',
+                        other_field: 'cn'
                     },
                     {
-                        factory:IPA.entity_select_widget,
+                        factory: IPA.entity_select_widget,
-                        name: 'memberof', entity: 'group',
+                        name: 'memberof',
+                        other_entity: 'group',
+                        other_field: 'cn',
                         join: true
                     },
                     {
@@ -183,13 +188,19 @@ IPA.entity_factories.delegation = function() {
             fields:[
                 'aciname',
                 {
-                    factory:IPA.entity_select_widget,
+                    factory: IPA.entity_select_widget,
-                    name: 'group', entity: 'group', undo: false
+                    name: 'group',
+                    other_entity: 'group',
+                    other_field: 'cn',
+                    undo: false
                 },
                 {
-                    factory:IPA.entity_select_widget,
+                    factory: IPA.entity_select_widget,
-                    name: 'memberof', entity: 'group',
+                    name: 'memberof',
-                    join: true, undo: false
+                    other_entity: 'group',
+                    other_field: 'cn',
+                    join: true,
+                    undo: false
                 },
                 {
                     factory:IPA.attributes_widget,
@@ -402,8 +413,12 @@ IPA.target_section = function(spec) {
         cols: 30, rows: 1,
         undo: that.undo
     });
-    that.group_select = IPA.entity_select_widget(
+    that.group_select = IPA.entity_select_widget({
-        {name: 'targetgroup', entity:'group', undo: that.undo});
+        name: 'targetgroup',
+        other_entity: 'group',
+        other_field: 'cn',
+        undo: that.undo
+    });
     that.type_select = IPA.select_widget({name: 'type', undo: that.undo});
     that.attribute_table = IPA.attributes_widget({
         name: 'attrs', undo: that.undo});
@@ -506,7 +521,7 @@ IPA.target_section = function(spec) {
                 that.group_select.create(span);
             },
             load: function(record){
-                that.group_select.entity_select.val(record.targetgroup);
+                that.group_select.list.val(record.targetgroup);
             },
             save: function(record){
                 record.targetgroup = that.group_select.save()[0];

install/ui/details.js

@@ -26,8 +26,8 @@
 
 /* REQUIRES: ipa.js */
 
-IPA.expanded_icon = 'ui-icon-expanded';
+IPA.expanded_icon = 'expanded-icon';
-IPA.collapsed_icon = 'ui-icon-collapsed';
+IPA.collapsed_icon = 'collapsed-icon';
 
 IPA.details_section = function(spec) {
 
@@ -111,8 +111,11 @@ IPA.details_section = function(spec) {
         for (var i=0; i<fields.length; i++) {
             var field = fields[i];
 
-            var span = $('<span/>', { 'name': field.name }).appendTo(container);
+            var field_container = $('<div/>', {
-            field.create(span);
+                name: field.name,
+                'class': 'details-field'
+            }).appendTo(container);
+            field.create(field_container);
         }
     };
 
@@ -126,8 +129,8 @@ IPA.details_section = function(spec) {
         for (var i=0; i<fields.length; i++) {
             var field = fields[i];
 
-            var span = $('span[name='+field.name+']', this.container).first();
+            var field_container = $('.details-field[name='+field.name+']', this.container).first();
-            field.setup(span);
+            field.setup(field_container);
         }
     };
 
@@ -245,12 +248,13 @@ IPA.details_list_section = function(spec) {
                 title: label
             }).appendTo(dl);
 
-            var dd = $('<dd/>', {
+            var dd = $('<dd/>').appendTo(dl);
-                'class': 'first'
-            }).appendTo(dl);
 
-            var span = $('<span/>', { 'name': field.name }).appendTo(dd);
+            var field_container = $('<div/>', {
-            field.create(span);
+                name: field.name,
+                'class': 'details-field'
+            }).appendTo(dd);
+            field.create(field_container);
         }
     };
 
@@ -437,7 +441,7 @@ IPA.details_facet = function(spec) {
 
             var icon = $('<span/>', {
                 name: 'icon',
-                'class': 'ui-icon section-expand '+IPA.expanded_icon
+                'class': 'icon section-expand '+IPA.expanded_icon
             }).appendTo(header);
 
             header.append(' ');
@@ -680,23 +684,26 @@ IPA.button = function(spec) {
         id: spec.id,
         name: spec.name,
         href: spec.href || '#' + (spec.name || 'button'),
-        html: spec.label,
         title: spec.title || spec.label,
-        'class': 'ui-state-default ui-corner-all',
+        'class': 'ui-state-default ui-corner-all input_link',
-        style: spec.style
+        style: spec.style,
+        click: spec.click,
+        blur: spec.blur
     });
 
-    if (spec.click) {
-        button.click(spec.click);
-    }
-
     if (spec['class']) button.addClass(spec['class']);
-    button.addClass('input_link');
 
     if (spec.icon) {
-        button.prepend('<span class="ui-icon '+spec.icon+'" ></span> ');
+        $('<span/>', {
-    } else {
+            'class': 'icon '+spec.icon
-        button.addClass('button-without-icon');
+        }).appendTo(button);
+    }
+
+    if (spec.label) {
+        $('<span/>', {
+            'class': 'button-label',
+            html: spec.label
+        }).appendTo(button);
     }
 
     return button;

install/ui/dialog.js

@@ -35,7 +35,7 @@ IPA.dialog = function(spec) {
     that.template = spec.template;
     that._entity_name = spec.entity_name;
 
-    that.width = spec.width || '400px';
+    that.width = spec.width || 400;
     that.height = spec.height;
 
     that.buttons = {};
@@ -375,7 +375,8 @@ IPA.adder_dialog = function (spec) {
 
     var that = IPA.dialog(spec);
 
-    that.width = spec.width || '600px';
+    that.width = spec.width || 600;
+    that.height = spec.height || 360;
 
     that.columns = $.ordered_map();
 
@@ -534,7 +535,6 @@ IPA.adder_dialog = function (spec) {
         that.find_button = IPA.button({
             name: 'find',
             'label': button.val(),
-            'icon': 'ui-icon-search',
             'click': function() { that.search(); }
         });
         button.replaceWith(that.find_button);

install/ui/entitle.js

@@ -337,7 +337,7 @@ IPA.entitle.details_facet = function(spec) {
         that.register_online_button = IPA.action_button({
             name: 'register',
             label: IPA.messages.objects.entitle.register,
-            icon: 'ui-icon-plus',
+            icon: 'add-icon',
             click: function() {
                 var dialog = that.entity.get_dialog('online_registration');
                 dialog.open(that.container);
@@ -350,7 +350,7 @@ IPA.entitle.details_facet = function(spec) {
         that.register_offline_button = IPA.action_button({
             name: 'import',
             label: IPA.messages.objects.entitle.import,
-            icon: 'ui-icon-plus',
+            icon: 'add-icon',
             click: function() {
                 var dialog = that.entity.get_dialog('offline_registration');
                 dialog.open(that.container);
@@ -426,7 +426,7 @@ IPA.entitle.search_facet = function(spec) {
         that.consume_button = IPA.action_button({
             name: 'consume',
             label: IPA.messages.objects.entitle.consume,
-            icon: 'ui-icon-plus',
+            icon: 'add-icon',
             click: function() {
                 var dialog = that.entity.get_dialog('consume');
                 dialog.open(that.container);
@@ -439,7 +439,7 @@ IPA.entitle.search_facet = function(spec) {
         that.import_button = IPA.action_button({
             name: 'import',
             label: IPA.messages.objects.entitle.import_button,
-            icon: 'ui-icon-plus',
+            icon: 'add-icon',
             click: function() {
                 var dialog = that.entity.get_dialog('import');
                 dialog.open(that.container);

install/ui/hbac.js

@@ -787,7 +787,7 @@ IPA.hbacrule_accesstime_widget = function(spec) {
         button.replaceWith(IPA.button({
             name: 'remove',
             'label': button.val(),
-            'icon': 'ui-icon-trash',
+            'icon': 'remove-icon',
             'click': function() { that.remove(that.container); }
         }));
 
@@ -795,7 +795,7 @@ IPA.hbacrule_accesstime_widget = function(spec) {
         button.replaceWith(IPA.button({
             name: 'add',
             'label': button.val(),
-            'icon': 'ui-icon-plus',
+            'icon': 'add-icon',
             'click': function() { that.add(that.container); }
         }));
 

install/ui/host.js

@@ -102,13 +102,14 @@ IPA.entity_factories.host = function () {
         }).
         standard_association_facets().
         adder_dialog({
-            width:500,
+            width: 400,
+            height: 250,
             fields:[
                 {
-                    factory:IPA.entity_select_widget,
+                    factory: IPA.entity_select_widget,
                     name: 'fqdn',
-                    field_name:'idnsname',
+                    other_entity: 'dnszone',
-                    entity: 'dnszone',
+                    other_field: 'idnsname',
                     label: IPA.messages.objects.service.host,
                     editable: true,
                     undo: false

install/ui/ipa.css

@@ -121,11 +121,10 @@ body {
 }
 
 .ui-widget {
-    font-size: 1em;
+    font-size: 11px;
 }
 
 .input_link {
-    padding: .4em 1em .4em 0em;
     text-decoration: none;
     position: relative;
     cursor: pointer;
@@ -136,54 +135,56 @@ body {
     color:black;
 }
 
-.input_link span.ui-icon {
+.input_link_label {
-    -moz-border-radius: 0.3em;
+
-        -webkit-border-radius: 0.3em;
+}
-    border: 1px solid #B8B8B8;
+
+.icon {
+    display: inline-block;
+    height: 16px;
+    width: 16px;
     vertical-align: middle;
 }
 
-.input_link span.search-icon {
+.combobox-icon {
-	background: url(search-icon.png);
+    background: url(combobox_open.png);
-	border: none;
-	margin: -1px 0 0 !important;
-	float: right;
-	position: relative;
 }
 
-.input_link span.add-icon {
+.expanded-icon {
+    background: url(arrow_expanded.png);
+}
+
+.collapsed-icon {
+    background: url(arrow_collapsed.png);
+}
+
+.search-icon {
+	background: url(search-icon.png) no-repeat;
+}
+
+.add-icon {
 	background: url(add-icon.png);
-	border: none;
 	margin: -4px 0 0 1px;
 }
 
-.input_link span.remove-icon {
+.remove-icon {
 	background: url(remove-icon.png);
-	border: none;
 	margin: -4px 0 0 1px;
 }
 
-.input_link span.update-icon {
+.update-icon {
 	background: url(update-icon.png);
-	border: none;
 	margin: -4px 0 0 1px;
 }
 
-.input_link span.reset-icon {
+.reset-icon {
 	background: url(reset-icon.png);
-	border: none;
-	margin: -4px 0 0 1px;
-}
-
-.input_link span.enroll-icon {
-	background: url(enroll-icon.png);
-	border: none;
 	margin: -4px 0 0 1px;
 }
 
 .ipa-icon {
-        font-size: 0.7em;
+    font-size: 0.7em;
-        padding-right: 0.3em;
+    padding-right: 0.3em;
 }
 
 /*  ----  Header  ----  */
@@ -557,7 +558,7 @@ div.tabs {
 
 .facet-controls a {
 	font-size: 1.3em !important;
-	padding: 0 6px 0 0;
+	margin: 0 6px 0 0;
 }
 
 /* ---- Facet Content ---- */
@@ -605,11 +606,23 @@ div.tabs {
     border-radius: 15px !important;
 	border: 1px solid #9f9e9e;
 	background: url("search-bg.png");
-	height: 18px;
+	height: 20px;
-	padding-left: 8px;
+    line-height: 20px;
+	padding: 0 8px 0;
     margin: 5px 0 5px;
 }
 
+.search-filter input {
+	width: 193px;
+	border: none;
+	background: transparent;
+	height: 18px;
+}
+
+.search-filter a {
+    padding: 3px;
+}
+
 .search-controls {
     -moz-border-radius: .7em .7em 0 0;
         -webkit-border-radius: .7em .7em 0 0;
@@ -632,7 +645,7 @@ div.tabs {
 }
 
 .search-table thead tr th {
-    padding-left: 0.5em;
+    padding: 0 0.5em;
     background-color:#f6f6f6;
     color:#333333;
     text-align: left;
@@ -640,6 +653,10 @@ div.tabs {
     height: 25px;
 }
 
+.search-table thead tr th .action-button {
+    margin: 0 0 0 0.5em;
+}
+
 .search-table tbody td {
     padding-left: 0.5em;
 }
@@ -793,26 +810,12 @@ dl.entryattrs dt {
 
 dl.entryattrs dd {
     float: left;
-    padding-bottom: 0.8em;
+    margin-bottom: 1em;
-        margin-left: 0;
-}
-
-dl.entryattrs dd.first {
     margin-left: 0;
     margin-top: 0.5em;
     font-weight: bold;
 }
 
-dl.entryattrs dd.other {
-    clear: both;
-    margin-left: 10.7em;
-}
-
-dl.entryattrs input {
-    margin-right: 0.5em;
-    margin-bottom: 1em;
-}
-
 dl.entryattrs input.otp {
     min-width: 15em;
     width: 15em;
@@ -883,14 +886,6 @@ dl.aci-target input {
         width: 46em;
 }
 
-#memberof-entity-select {
-        margin-right: 1em;
-}
-
-#group-entity-select {
-        margin-right: 1em;
-}
-
 span.attrhint {
     font-size: 8pt;
     left: 5em;
@@ -904,32 +899,6 @@ span.attrhint {
     padding:0;
 }
 
-/*
- the positions for these are in the large icon image,
- and need to be specified in pixels.
-*/
-.ui-icon {
-    /* background-image: url("ui-icons_222222_256x240.png"); */
-    background-color: #e2e2e2;
-    display: inline-block;
-}
-
-.ui-icon-expanded {
-    background: url(arrow_expanded.png);
-}
-
-.ui-icon-collapsed {
-    background: url(arrow_collapsed.png);
-}
-
-.ui-icon-plus {
-    background-position: -16px -129px;
-}
-
-.ui-icon-trash {
-    background-position: -176px -97px;
-}
-
 .ui-widget-content {
 }
 
@@ -976,14 +945,16 @@ a {
     text-align: left;
 }
 
-//.ui-dialog .ui-dialog-content {
+/*
+.ui-dialog .ui-dialog-content {
         min-height: 26em !important;
-}//
+}
+*/
 
 .ui-widget input, .ui-widget select,
 .ui-widget textarea, .ui-widget button {
     font-family: "Liberation Sans", Arial, sans-serif;
-    font-size: 1.3em;
+    font-size: 11px;
     margin-right: .1em;
 }
 
@@ -998,20 +969,6 @@ a {
          padding: 0.4em 1em;
 }
 
-span.ui-icon-search {
-        background-color: transparent !important;
-    border: medium none !important;
-    color: #FFFFFF !important;
-        margin-left: 0 !important;
-}
-
-a[name=find] {
-    margin: 6px;
-    padding: 3px 3px 2px;
-    position: absolute;
-    right: 0;
-}
-
 [title=">>"] {
     margin-top: 1em !important;
 }
@@ -1036,6 +993,10 @@ span.main-separator{
     font-size: 0.9em;
 }
 
+.action-button .button-label {
+    padding: 0 0.2em;
+}
+
 a.action-button-disabled {
     color: gray;
     cursor: default;
@@ -1055,9 +1016,7 @@ a.action-button-disabled {
 }
 
 .aci-attribute-table th.aci-attribute-column{
-    float: left;
     width: 20.5em;
-    padding: 0.8em 0.5em;
 }
 
 .entity-views{
@@ -1211,3 +1170,60 @@ table.scrollable tbody {
     width: 23em;
     height: 4em;
 }
+
+/* ---- Widgets ---- */
+
+.text-widget input {
+    width: 250px;
+}
+
+.multivalued-text-widget [name=value] {
+    margin-bottom: 1em;
+}
+
+.multivalued-text-widget input {
+    width: 250px;
+}
+
+.combobox-widget-input {
+    display: inline-block;
+    position: relative;
+}
+
+.combobox-widget-input input {
+    width: 250px;
+}
+
+.combobox-widget-input .combobox-icon {
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin-top: -2px;
+    margin-right: 4px;
+}
+
+.combobox-widget-list {
+    visibility: hidden;
+    border: 1px solid #A0A0A0;
+    background: #EEEEEE;
+    padding: 5px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 1010; /* need to be above dialog box */
+}
+
+.combobox-widget-list input {
+    width: 238px;
+}
+
+.combobox-widget-list .search-icon {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin-top: -2px;
+    margin-right: 3px;
+}

install/ui/jsl.conf

@@ -113,7 +113,7 @@
 #
 # Common uses for webpages might be:
 +define window
-#+define document
++define document
 +define alert
 +define $ 
 +define JSON

install/ui/policy.js

@@ -46,12 +46,15 @@ IPA.entity_factories.pwpolicy = function() {
         adder_dialog({
             fields:[
                 {
-                    factory:IPA.entity_select_widget,
+                    factory: IPA.entity_select_widget,
                     name: 'cn',
-                    entity: 'group',
+                    other_entity: 'group',
+                    other_field: 'cn',
                     undo: false
                 },
-                'cospriority']
+                'cospriority'],
+            width: 400,
+            height: 250
         }).
         build();
 };

install/ui/search.js

@@ -96,15 +96,18 @@ IPA.search_facet = function(spec) {
 
         that.facet_create_header(container);
 
-        var span = $('<span/>', {
+        var span = $('<div/>', {
             'class': 'right-aligned-facet-controls'
         }).appendTo(that.controls);
 
+        var filter_container = $('<div/>', {
+            'class': 'search-filter'
+        }).appendTo(span);
+
         that.filter = $('<input/>', {
             type: 'text',
-                        'class': 'search-filter',
             name: 'filter'
-        }).appendTo(span);
+        }).appendTo(filter_container);
 
         that.filter.keypress(function(e) {
             /* if the key pressed is the enter key */
@@ -120,7 +123,7 @@ IPA.search_facet = function(spec) {
                 that.find();
                 return false;
             }
-        }).appendTo(span);
+        }).appendTo(filter_container);
 
         span.append(IPA.create_network_spinner());
 

install/ui/serverconfig.js

@@ -49,9 +49,10 @@ IPA.entity_factories.config = function(){
                         'ipausersearchfields',
                         'ipadefaultemaildomain',
                         {
-                            factory:IPA.entity_select_widget,
+                            factory: IPA.entity_select_widget,
                             name: 'ipadefaultprimarygroup',
-                            entity: 'group'
+                            other_entity: 'group',
+                            other_field: 'cn'
                         },
                         'ipahomesrootdir',
                         'ipamaxusernamelength',

install/ui/service.js

@@ -72,7 +72,8 @@ IPA.entity_factories.service = function() {
         standard_association_facets().
         adder_dialog({
             factory: IPA.service_add_dialog,
-            width: '450px'
+            width: 450,
+            height: 300
         }).
         build();
 };
@@ -121,8 +122,8 @@ IPA.service_add_dialog = function(spec) {
         })).
         field(IPA.entity_select_widget({
             name: 'host',
-            field_name: 'fqdn',
+            other_entity: 'host',
-            entity: 'host',
+            other_field: 'fqdn',
             label: IPA.messages.objects.service.host,
             undo: false
         })).

install/ui/test/aci_tests.js

@@ -134,7 +134,7 @@ test("Testing aci grouptarget.", function() {
     var selected = $(target_section.type_select+":selected");
 
     same(selected.val(), 'targetgroup' , 'group control selected');
-    ok ($('#targetgroup-entity-select option').length > 2,
+    ok ($('option', selected.group_select).length > 2,
         'group select populated');
 
 });

install/ui/test/details_tests.js

@@ -98,14 +98,14 @@ test("Testing IPA.details_section.create().", function() {
             'Checking field '+field.name+'\'s label'
         );
 
-        var span = $('span[name='+field.name+']', dl);
+        var field_container = $('.details-field[name='+field.name+']', dl);
 
         ok(
-            span.length,
+            field_container.length,
-            'Checking span tag for field '+field.name
+            'Checking container tag for field '+field.name
         );
 
-        var dd = $('dd', span);
+        var dd = $('dd', field_container);
 
         ok(
             dd.length == 0,
@@ -316,9 +316,9 @@ test("Testing IPA.details_section_setup again()",function(){
         '3 dd'
     );
 
-    var span = $('span[name="cn"]', dd[0]);
+    var field_container = $('.details-field[name="cn"]', dd[0]);
     same(
-        span.length, 1,
+        field_container.length, 1,
-        '1 span'
+        '1 field container'
     );
 });

install/ui/test/widget_tests.js

@@ -265,10 +265,15 @@ test("IPA.select_widget" ,function(){
 
 
 test("IPA.entity_select_widget" ,function(){
+
     var widget = IPA.entity_select_widget({
-        name: 'uid', entity:'user',field_name:'uid'});
+        name: 'uid',
+        other_entity: 'user',
+        other_field: 'uid'
+    });
+
     base_widget_test(widget,'user','test_value');
-    ok( $('#uid-entity-select option').length > 1,"options populatedfrom AJAX");
+    ok( $('option', widget.container).length > 1,"options populated from AJAX");
     mock_record = {'uid':'kfrog'};
     widget.load(mock_record);
     same(widget.values[0],'kfrog','select set from values');
@@ -278,7 +283,7 @@ test("IPA.entity_select_widget" ,function(){
 test("IPA.entity_link_widget" ,function(){
     var widget = IPA.entity_link_widget({
         name: 'gidnumber',
-        other_entity:'group',
+        other_entity:'group'
     });
     base_widget_test(widget,'user','test_value');
 

install/ui/user.js

@@ -96,7 +96,9 @@ IPA.entity_factories.user = function() {
                 ['ou',
                  {
                      factory:IPA.entity_select_widget,
-                     name: 'manager', entity: 'user', field_name: 'uid'
+                     name: 'manager',
+                     other_entity: 'user',
+                     other_field: 'uid'
                  }
                 ]
             },
@@ -325,9 +327,7 @@ IPA.user_password_widget = function(spec) {
                 html: IPA.messages.objects.user.new_password
             }).appendTo(dl);
 
-            var dd = $('<dd/>', {
+            var dd = $('<dd/>').appendTo(dl);
-                'class': 'first'
-            }).appendTo(dl);
 
             dialog.password1 = $('<input/>', {
                 type: 'password'
@@ -337,9 +337,7 @@ IPA.user_password_widget = function(spec) {
                 html: IPA.messages.objects.user.repeat_password
             }).appendTo(dl);
 
-            dd = $('<dd/>', {
+            dd = $('<dd/>').appendTo(dl);
-                'class': 'first'
-            }).appendTo(dl);
 
             dialog.password2 = $('<input/>', {
                 type: 'password'

install/ui/widget.js

@@ -227,6 +227,7 @@ IPA.widget = function(spec) {
     };
 
     that.create = function(container) {
+        container.addClass('widget');
         that.container = container;
     };
 
@@ -395,6 +396,10 @@ IPA.text_widget = function(spec) {
 
     that.create = function(container) {
 
+        that.widget_create(container);
+
+        container.addClass('text-widget');
+
         $('<label/>', {
             name: that.name,
             style: 'display: none;'
@@ -535,6 +540,10 @@ IPA.multivalued_text_widget = function(spec) {
 
     that.create = function(container) {
 
+        that.widget_create(container);
+
+        container.addClass('multivalued-text-widget');
+
         var div = $('<div/>', {
             name: 'value'
         }).appendTo(container);
@@ -766,6 +775,10 @@ IPA.checkbox_widget = function (spec) {
 
     that.create = function(container) {
 
+        that.widget_create(container);
+
+        container.addClass('checkbox-widget');
+
         $('<input/>', {
             type: 'checkbox',
             name: that.name,
@@ -833,6 +846,10 @@ IPA.checkboxes_widget = function (spec) {
 
     that.create = function(container) {
 
+        that.widget_create(container);
+
+        container.addClass('checkboxes-widget');
+
         var vertical = that.direction === 'vertical';
 
         for (var i=0; i<that.options.length; i++) {
@@ -920,6 +937,10 @@ IPA.radio_widget = function(spec) {
 
     that.create = function(container) {
 
+        that.widget_create(container);
+
+        container.addClass('radio-widget');
+
         for (var i=0; i<that.options.length; i++) {
             var option = that.options[i];
 
@@ -996,6 +1017,10 @@ IPA.select_widget = function(spec) {
 
     that.create = function(container) {
 
+        that.widget_create(container);
+
+        container.addClass('select-widget');
+
         var select = $('<select/>', {
             name: that.name
         }).appendTo(container);
@@ -1074,6 +1099,10 @@ IPA.textarea_widget = function (spec) {
 
     that.create = function(container) {
 
+        that.widget_create(container);
+
+        container.addClass('textarea-widget');
+
         $('<textarea/>', {
             name: that.name,
             rows: that.rows,
@@ -1252,6 +1281,8 @@ IPA.table_widget = function (spec) {
 
         that.widget_create(container);
 
+        container.addClass('table-widget');
+
         that.table = $('<table/>', {
             'class': 'search-table'
         }).appendTo(container);
@@ -1602,149 +1633,227 @@ IPA.table_widget = function (spec) {
     return that;
 };
 
-IPA.entity_select_widget = function(spec) {
+IPA.combobox_widget = function(spec) {
+
+    spec = spec || {};
 
     var that = IPA.widget(spec);
-    var entity = spec.entity || 'group';
-    var field_name = spec.field_name || 'cn';
-    var editable = spec.editable || false;
 
-    function populate_select(value) {
+    that.editable = spec.editable;
-        function find_success(result) {
+    that.searchable = spec.searchable;
-            $('option', that.entity_select).remove();
+    that.list_size = spec.list_size || 5;
-
-            // add default empty value
-            $('<option/>', {
-                text: '',
-                value: ''
-            }).
-            appendTo(that.entity_select);
-
-            var entities = result.result.result;
-            for (var i =0; i < result.result.count; i +=1){
-                var entity = entities[i];
-                var field_array = entity[field_name];
-                var field_value = field_array[0];
-                var option =
-                    $('<option/>',{
-                        text:field_value,
-                        value:field_value
-                    }).
-                    appendTo(that.entity_select);
-                if (value === field_value){
-                    option.attr('selected','selected');
-                }
-            }
-            that.set_dirty(that.test_dirty());
-        }
-        function find_error(err){
-        }
-        IPA.command({
-            entity: entity,
-            method: 'find',
-            args:[that.entity_filter.val()],
-            options:{},
-            on_success:find_success,
-            on_error:find_error
-        }).execute();
-    }
 
     that.create = function(container) {
 
-        if (editable){
+        that.widget_create(container);
-            that.edit_box = $('<input />',{
-                type: 'text',
-                title: that.tooltip,
-                name: that.name,
-                keyup:function(){
-                    that.validate();
-                }
-            });
 
-            $('<div style:"display=block;" />').
+        container.addClass('combobox-widget');
-                append(that.edit_box).
+
-                appendTo(container);
+        $(document).keyup(function(e) {
+            if (e.which == 27) { // Escape
+                that.close();
+            }
+        });
+
+        that.input_container = $('<div/>', {
+            'class': 'combobox-widget-input'
+        }).appendTo(container);
+
+        that.text = $('<label/>', {
+            name: that.name,
+            style: 'display: none;'
+        }).appendTo(that.input_container);
+
+        that.input = $('<input/>', {
+            type: 'text',
+            name: that.name,
+            title: that.tooltip,
+            readonly: !that.editable,
+            keyup: function() {
+                that.validate();
+            },
+            click: function() {
+                if (that.editable) return false;
+                if (that.is_open()) {
+                    that.close();
+                } else {
+                    that.open();
+                }
+                return false;
+            }
+        }).appendTo(that.input_container);
+
+        that.open_button = IPA.action_button({
+            name: 'open',
+            icon: 'combobox-icon',
+            click: function() {
+                if (that.is_open()) {
+                    that.close();
+                } else {
+                    that.open();
+                }
+                return false;
+            }
+        }).appendTo(that.input_container);
+
+        that.list_container = $('<div/>', {
+            'class': 'combobox-widget-list'
+        }).appendTo(that.input_container);
+
+        var div = $('<div/>', {
+            style: 'position: relative; width: 100%;'
+        }).appendTo(that.list_container);
+
+        if (that.searchable) {
+            that.filter = $('<input/>', {
+                type: 'text',
+                name: 'filter',
+                keypress: function(e) {
+                    if (e.which == 13) { // Enter
+                        that.search();
+                    }
+                }
+            }).appendTo(div);
+
+            that.search_button = IPA.action_button({
+                name: 'search',
+                icon: 'search-icon',
+                click: function() {
+                    that.search();
+                    return false;
+                }
+            }).appendTo(div);
+
+            div.append('<br/>');
+        }
+
+        that.list = $('<select/>', {
+            name: 'list',
+            size: that.list_size,
+            style: 'width: 100%',
+            click: function(){
+                that.close();
+                var value = $('option:selected', that.list).val();
+                that.input.val(value);
+                IPA.select_range(that.input, 0, 0);
+
+                that.validate();
+                that.set_dirty(that.test_dirty());
+            }
+        }).appendTo(div);
+
+        if (that.undo) {
+            container.append(' ');
+            that.create_undo(container);
+
+            var undo = that.get_undo();
+            undo.click(function() {
+                that.reset();
+            });
         }
 
         that.create_error_link(container);
 
-        that.entity_select = $('<select/>', {
+        that.search();
-            id: that.name + '-entity-select',
-            change: function(){
-                that.validate();
-                if (editable){
-                    that.edit_box.val(
-                        $('option:selected', that.entity_select).val());
-                    IPA.select_range(that.edit_box,0,0);
-                }
-                that.set_dirty(that.test_dirty());
-            }
-        }).appendTo(container);
-
-        that.entity_filter = $('<input/>', {
-            size:10,
-            type: 'text',
-            id: 'entity_filter',
-            style: 'display: none;',
-            keyup: function(){
-                populate_select(current_value());
-            }
-        }).appendTo(container);
-
-        $('<a/>', {
-            href: '',
-            text: 'add ' +entity + ' filter: ',
-            click: function() {
-                that.entity_filter.css('display','inline');
-                $(this).css('display','none');
-                return false;
-            }
-        }).appendTo(container);
-
-        if (that.undo) {
-            that.create_undo(container);
-        }
-        var undo = that.get_undo();
-        undo.click(function() {
-            that.reset();
-        });
-
-        populate_select();
     };
 
-    that.reset = function() {
+    that.open = function() {
-        that.entity_filter.val(that.values[0]);
+        that.list_container.css('visibility', 'visible');
-        populate_select(that.values[0]);
-        if (editable){
-            that.edit_box.val(that.values[0]);
-        }
-        that.validate();
-        that.set_dirty(false);
     };
 
-    that.load = function(record) {
+    that.close = function() {
-        var value = record[that.name];
+        that.list_container.css('visibility', 'hidden');
-        if (value instanceof Array) {
+    };
-            that.values = value;
+
+    that.is_open = function() {
+        return that.list_container.css('visibility') == 'visible';
+    };
+
+    that.search = function() {
+    };
+
+    that.update = function() {
+        that.close();
+        if (that.writable) {
+            that.text.css('display', 'none');
+            that.input.css('display', 'inline');
+            that.input.val(that.values[0]);
+            that.open_button.css('display', 'inline');
         } else {
-            that.values = value ? [value] : [''];
+            that.text.css('display', 'inline');
+            that.text.html(that.values[0]);
+            that.input.css('display', 'none');
+            that.open_button.css('display', 'none');
+            that.input.val(that.values[0]);
+        }
+        if (that.searchable) {
+            that.filter.empty();
+            that.search();
         }
-        that.reset();
     };
 
-    function current_value(){
-        var value;
-        if (editable){
-            value = that.edit_box.val();
-        }else{
-            value = $('option:selected', that.entity_select).val();
-        }
-        return value;
-    }
-
     that.save = function() {
-        var value = current_value();
+        var value = that.input.val();
-        return [value];
+        return value === '' ? [] : [value];
+    };
+
+    that.create_option = function(text, value) {
+        return $('<option/>', {
+            text: text,
+            value: value
+        }).appendTo(that.list);
+    };
+
+    that.remove_options = function() {
+        that.list.empty();
+    };
+
+    return that;
+};
+
+IPA.entity_select_widget = function(spec) {
+
+    spec = spec || {};
+    spec.searchable = spec.searchable === undefined ? true : spec.searchable;
+
+    var that = IPA.combobox_widget(spec);
+
+    that.other_entity = spec.other_entity;
+    that.other_field = spec.other_field;
+
+    that.search = function() {
+
+        var filter = that.filter.val();
+
+        var command = IPA.command({
+            entity: that.other_entity,
+            method: 'find',
+            args: [filter]
+        });
+
+        command.on_success = function(data, text_status, xhr) {
+
+            that.remove_options();
+
+            that.create_option();
+
+            var entries = data.result.result;
+            for (var i=0; i<data.result.count; i++) {
+                var entry = entries[i];
+                var values = entry[that.other_field];
+                var value = values[0];
+
+                var option = that.create_option(value, value);
+
+                if (filter === value) {
+                    option.attr('selected', 'selected');
+                }
+            }
+
+            that.set_dirty(that.test_dirty());
+        };
+
+        command.execute();
     };
 
     return that;
@@ -1759,9 +1868,8 @@ IPA.entity_link_widget = function(spec) {
     }
     that.other_pkeys = spec.other_pkeys || other_pkeys;
 
-    that.super_create = that.create;
     that.create = function(container) {
-        that.super_create(container);
+        that.widget_create(container);
         that.link =
         $('<a/>', {
             href: 'jslink',
@@ -1780,10 +1888,8 @@ IPA.entity_link_widget = function(spec) {
             appendTo(container);
     };
 
-    that.super_load = that.load;
-
     that.load = function (record){
-        that.super_load(record);
+        that.widget_load(record);
         if (that.values || that.values.length > 0){
             that.nonlink.html(that.values[0]);
             that.link.html(that.values[0]);