Removing sections as special type of object

Sections are changed into pure widget objects. Introduced IPA.composite_widget, basic widget for widget nesting (it's using IPA.widget_container). It's base class for section widgets.

TODO: change old custom sections into custom fields and widgets.

Note: usage of section in HBAC and SUDO is kept - whole logic will be removed in #1515 patch.

https://fedorahosted.org/freeipa/ticket/2040

13 files changed, 402 insertions, 625 deletions

diff --git a/install/ui/add.js b/install/ui/add.js
index c9d5e46bb..032302e30 100644
--- a/install/ui/add.js
+++ b/install/ui/add.js
@@ -127,31 +127,24 @@ IPA.entity_adder_dialog = function(spec) {
         var record = {};
         that.save(record);
 
-        var sections = that.sections.values;
-        for (var i=0; i<sections.length; i++) {
-            var section = sections[i];
-
-            var section_fields = section.fields.values;
-            for (var j=0; j<section_fields.length; j++) {
-                var field = section_fields[j];
-
-                var values = record[field.name];
-                if (!values) continue;
-
-                // TODO: Handle multi-valued attributes like in detail facet's update()
-                var value = values.join(',');
-                if (!value) continue;
-
-                if (field.name == pkey_name) {
-                    command.add_arg(value);
-                } else {
-                    command.set_option(field.name, value);
-                }
+        var fields = that.fields.get_fields();
+        for (var j=0; j<fields.length; j++) {
+            var field = fields[j];
+
+            var values = record[field.name];
+            if (!values) continue;
+
+            // TODO: Handle multi-valued attributes like in detail facet's update()
+            var value = values.join(',');
+            if (!value) continue;
+
+            if (field.name == pkey_name) {
+                command.add_arg(value);
+            } else {
+                command.set_option(field.name, value);
             }
         }
 
-        //alert(JSON.stringify(command.to_json()));
-
         if (that.pre_execute_hook) {
             that.pre_execute_hook(command);
         }
diff --git a/install/ui/automount.js b/install/ui/automount.js
index 9c0152ae9..5a92a52ea 100644
--- a/install/ui/automount.js
+++ b/install/ui/automount.js
@@ -241,9 +241,9 @@ IPA.automountmap_adder_dialog = function(spec) {
     that.create = function() {
         that.entity_adder_dialog_create();
 
-        var method_field = that.get_field('method');
+        var method_field = that.fields.get_field('method');
         var indirect_section = that.get_section('indirect');
-        var key_field = that.get_field('key');
+        var key_field = that.fields.get_field('key');
 
         var direct_input = $('input[value="add"]', method_field.container);
         direct_input.change(function() {
@@ -267,7 +267,7 @@ IPA.automountmap_adder_dialog = function(spec) {
     that.reset = function() {
         that.dialog_reset();
 
-        var method_field = that.get_field('method');
+        var method_field = that.fields.get_field('method');
 
         var direct_input = $('input[value="add"]', method_field.container);
         direct_input.click();
diff --git a/install/ui/details.js b/install/ui/details.js
index df14fd363..b84f7f468 100644
--- a/install/ui/details.js
+++ b/install/ui/details.js
@@ -4,6 +4,7 @@
  *    Pavel Zuna <pzuna@redhat.com>
  *    Adam Young <ayoung@redhat.com>
  *    Endi S. Dewata <edewata@redhat.com>
+ *    Petr Vobornik <pvoborni@redhat.com>
  *
  * Copyright (C) 2010 Red Hat
  * see file 'COPYING' for use and warranty information
@@ -162,295 +163,13 @@ IPA.section_builder = function(spec) {
     return that;
 };
 
-IPA.details_section = function(spec) {
-
-    spec = spec || {};
-
-    var that = {};
-
-    that.name = spec.name || '';
-    that.label = spec.label || '';
-    that.entity = spec.entity;
-    that.fields = $.ordered_map();
-
-    that.dirty = false;
-    that.dirty_changed = IPA.observer();
-
-    that.undo = typeof spec.undo == 'undefined' ? true : spec.undo;
-
-    var init = function() {
-        var fields = spec.fields || [];
-        that.add_fields(fields);
-    };
-
-    that.get_field = function(name) {
-        return that.fields.get(name);
-    };
-
-    that.add_field = function(field) {
-        field.entity = that.entity;
-        field.undo = that.undo;
-        that.fields.put(field.name, field);
-        field.dirty_changed.attach(that.field_dirty_changed);
-        return field;
-    };
-
-    that.add_fields = function(fields) {
-        for (var i=0; i<fields.length; i++) {
-            var field_spec = fields[i];
-            var field;
-
-            if (field_spec instanceof Object) {
-                var factory = field_spec.factory || IPA.text_widget;
-                field_spec.entity = that.entity;
-                field = factory(field_spec);
-                that.add_field(field);
-
-            } else {
-                that.text({ name: field_spec });
-            }
-        }
-    };
-
-    that.field = function(field) {
-        that.add_field(field);
-        return that;
-    };
-
-    that.text = function(spec) {
-        spec.entity = that.entity;
-        var field = IPA.text_widget(spec);
-        that.add_field(field);
-        return that;
-    };
-
-    that.multivalued_text = function(spec) {
-        spec.entity = that.entity;
-        var field = IPA.multivalued_text_widget(spec);
-        that.add_field(field);
-        return that;
-    };
-
-    that.textarea = function(spec) {
-        spec.entity = that.entity;
-        var field = IPA.textarea_widget(spec);
-        that.add_field(field);
-        return that;
-    };
-
-    that.radio = function(spec) {
-        spec.entity = that.entity;
-        var field = IPA.radio_widget(spec);
-        that.add_field(field);
-        return that;
-    };
-
-    that.create = function(container) {
-        that.container = container;
-
-        var fields = that.fields.values;
-        for (var i=0; i<fields.length; i++) {
-            var field = fields[i];
-
-            var field_container = $('<div/>', {
-                name: field.name,
-                title: field.label,
-                'class': 'field'
-            });
-
-            if (field.hidden) {
-                field_container.css('display', 'none');
-            }
-
-            field_container.appendTo(container);
-
-            field.create(field_container);
-        }
-    };
-
-    that.load = function(record) {
-
-        that.record = record;
-
-        var fields = that.fields.values;
-        for (var j=0; j<fields.length; j++) {
-            var field = fields[j];
-            field.load(record);
-        }
-    };
-
-    that.save = function(record) {
-        var fields = that.fields.values;
-        for (var i=0; i<fields.length; i++) {
-            var field = fields[i];
-            record[field.name] = field.save();
-        }
-    };
-
-    that.reset = function() {
-        var fields = that.fields.values;
-        for (var i=0; i<fields.length; i++) {
-            var field = fields[i];
-            field.reset();
-        }
-    };
-
-    that.field_dirty_changed = function(dirty) {
-        var old = that.dirty;
-
-        if(dirty) {
-            that.dirty = true;
-        } else {
-            that.dirty = that.is_dirty();
-        }
-
-        if(old !== that.dirty) {
-            that.dirty_changed.notify([that.dirty], that);
-        }
-    };
-
-    that.is_dirty = function() {
-        var fields = that.fields.values;
-        for (var i=0; i<fields.length; i++) {
-            var field = fields[i];
-            if (field.is_dirty()) {
-                return true;
-            }
-        }
-        return false;
-    };
-
-    that.validate = function() {
-        var valid = true;
-        var fields = that.fields.values;
-        for (var i=0; i<fields.length; i++) {
-            var field = fields[i];
-            valid &= field.validate() && field.validate_required();
-        }
-        return valid;
-    };
-
-    that.set_visible = function(visible) {
-        if (visible) {
-            that.container.show();
-        } else {
-            that.container.hide();
-        }
-    };
-
-    that.clear = function() {
-        var fields = that.fields.values;
-
-        for (var i=0; i< fields.length; i++) {
-            fields[i].clear();
-        }
-    };
-
-    that.get_update_info = function() {
-
-        var update_info = IPA.update_info_builder.new_update_info();
-
-        var fields = that.fields.values;
-        for(var i=0; i < fields.length; i++) {
-            update_info = IPA.update_info_builder.merge(
-                update_info,
-                fields[i].get_update_info());
-        }
-
-        return update_info;
-    };
-
-    init();
-
-    // methods that should be invoked by subclasses
-    that.section_create = that.create;
-    that.section_load = that.load;
-    that.section_reset = that.reset;
-
-    return that;
-};
-
-IPA.details_table_section = function(spec) {
-
-    spec = spec || {};
-
-    var that = IPA.details_section(spec);
-
-    that.rows = $.ordered_map();
-
-    that.create = function(container) {
-        that.container = container;
-
-        // do not call section_create() here
-
-        var table = $('<table/>', {
-            'class': 'section-table'
-        }).appendTo(that.container);
-
-        var fields = that.fields.values;
-        for (var i=0; i<fields.length; i++) {
-            var field = fields[i];
-
-            var tr = $('<tr/>');
-            that.add_row(field.name, tr);
-
-            if (field.hidden) {
-                tr.css('display', 'none');
-            }
-
-            tr.appendTo(table);
-
-            var td = $('<td/>', {
-                'class': 'section-cell-label',
-                title: field.label
-            }).appendTo(tr);
-
-            $('<label/>', {
-                name: field.name,
-                'class': 'field-label',
-                text: field.label+':'
-            }).appendTo(td);
-
-            field.create_required(td);
-
-            td = $('<td/>', {
-                'class': 'section-cell-field',
-                title: field.label
-            }).appendTo(tr);
-
-            var field_container = $('<div/>', {
-                name: field.name,
-                'class': 'field'
-            }).appendTo(td);
-
-            field.create(field_container);
-        }
-    };
-
-    that.add_row = function(name, row) {
-        that.rows.put(name, row);
-    };
-
-    that.get_row = function(name) {
-        return that.rows.get(name);
-    };
-
-    that.set_row_visible = function(name, visible) {
-        var row = that.get_row(name);
-        row.css('display', visible ? '' : 'none');
-    };
-
-    that.table_section_create = that.create;
-
-    return that;
-};
-
 IPA.details_facet = function(spec) {
 
     spec = spec || {};
     spec.name = spec.name || 'details';
 
     var that = IPA.facet(spec);
+
     that.entity = spec.entity;
     that.pre_execute_hook = spec.pre_execute_hook;
     that.post_update_hook = spec.post_update_hook;
@@ -460,58 +179,19 @@ IPA.details_facet = function(spec) {
     that.label = spec.label || IPA.messages && IPA.messages.facets && IPA.messages.facets.details;
     that.facet_group = spec.facet_group || 'settings';
 
-    that.sections = $.ordered_map();
-
-    that.add_sections = function(sections) {
-
-        if(sections) {
-            for(var i=0; i < sections.length; i++) {
-
-                    var section_spec = sections[i];
-                    section_spec.entity = that.entity;
-
-                    if (!section_spec.label) {
-                        var obj_messages = IPA.messages.objects[that.entity.name];
-                        section_spec.label = obj_messages[section_spec.name];
-                    }
+    that.widgets = IPA.widget_container();
+    that.fields = IPA.field_container({ container: that });
 
-                    section_spec.factory = section_spec.factory || IPA.details_table_section;
-                    var section = section_spec.factory(section_spec);
+    that.fields.add_field = function(field) {
 
-                    that.add_section(section);
-            }
+        if (field.dirty_changed) {
+            field.dirty_changed.attach(that.field_dirty_changed);
         }
+        that.fields.container_add_field(field);
     };
 
     that.dirty = false;
 
-    that.add_section = function(section) {
-        section.entity = that.entity;
-        that.sections.put(section.name, section);
-        section.dirty_changed.attach(that.section_dirty_changed);
-        return section;
-    };
-
-    that.get_section = function(name) {
-        return that.sections.get(name);
-    };
-
-    that.create_section = function(spec) {
-        spec.entity = that.entity;
-        var section = IPA.details_section(spec);
-        that.add_section(section);
-        return section;
-    };
-
-    that.get_fields = function() {
-        var fields = [];
-        for (var i=0; i<that.sections.length; i++) {
-            var section = that.sections.values[i];
-            $.merge(fields, section.fields.values);
-        }
-        return fields;
-    };
-
     /* the primary key used for show and update is built as an array.
        for most entities, this will be a single element long, but for some
        it requires the containing entities primary keys as well.*/
@@ -601,10 +281,12 @@ IPA.details_facet = function(spec) {
                 that.expand_button.css('display', 'none');
                 that.collapse_button.css('display', 'inline');
 
-                var sections = that.sections.values;
-                for (var i=0; i<sections.length; i++) {
-                    var section = sections[i];
-                    that.toggle(section, true);
+                var widgets = that.widgets.get_widgets();
+                for (var i=0; i<widgets.length; i++) {
+                    var widget = widgets[i];
+                    if(widget.toggle) {
+                        widget.toggle(true);
+                    }
                 }
                 return false;
             }
@@ -619,58 +301,29 @@ IPA.details_facet = function(spec) {
                 that.expand_button.css('display', 'inline');
                 that.collapse_button.css('display', 'none');
 
-                var sections = that.sections.values;
-                for (var i=0; i<sections.length; i++) {
-                    var section = sections[i];
-                    that.toggle(section, false);
+                var widgets = that.widgets.get_widgets();
+                for (var i=0; i<widgets.length; i++) {
+                    var widget = widgets[i];
+                    if(widget.toggle) {
+                        widget.toggle(false);
+                    }
                 }
                 return false;
             }
         }).appendTo(that.controls);
     };
 
+    that.widgets.create_widget_delimiter = function(container) {
+        container.append('<hr/>');
+    };
+
     that.create_content = function(container) {
 
         that.content = $('<div/>', {
             'class': 'details-content'
         }).appendTo(container);
 
-        var sections = that.sections.values;
-        for (var i=0; i<sections.length; i++) {
-            var section = sections[i];
-
-            var header = $('<h2/>', {
-                name: section.name,
-                title: section.label
-            }).appendTo(that.content);
-
-            var icon = $('<span/>', {
-                name: 'icon',
-                'class': 'icon section-expand '+IPA.expanded_icon
-            }).appendTo(header);
-
-            header.append(' ');
-
-            header.append(section.label);
-
-            var div = $('<div/>', {
-                name: section.name,
-                'class': 'details-section'
-            }).appendTo(that.content);
-
-            header.click(function(section, div) {
-                return function() {
-                    var visible = div.is(":visible");
-                    that.toggle(section, !visible);
-                };
-            }(section, div));
-
-            section.create(div);
-
-            if (i < sections.length-1) {
-                that.content.append('<hr/>');
-            }
-        }
+        that.widgets.create(that.content);
 
         $('<span/>', {
             name: 'summary',
@@ -685,27 +338,13 @@ IPA.details_facet = function(spec) {
         that.header.set_pkey(that.pkey);
     };
 
-    that.toggle = function(section, visible) {
-        var header = $('h2[name='+section.name+']', that.container);
-
-        var icon = $('span[name=icon]', header);
-        icon.toggleClass(IPA.expanded_icon, visible);
-        icon.toggleClass(IPA.collapsed_icon, !visible);
-
-        var div = section.container;
-
-        if (visible != div.is(":visible")) {
-            div.slideToggle('slow');
-        }
-    };
-
     that.needs_update = function() {
         if (that._needs_update !== undefined) return that._needs_update;
         var pkey = IPA.nav.get_state(that.entity.name+'-pkey');
         return pkey !== that.pkey;
     };
 
-    that.section_dirty_changed = function(dirty) {
+    that.field_dirty_changed = function(dirty) {
         if(dirty) {
             that.dirty = true;
         } else {
@@ -716,9 +355,9 @@ IPA.details_facet = function(spec) {
     };
 
     that.is_dirty = function() {
-        var sections = that.sections.values;
-        for (var i=0; i<sections.length; i++) {
-            if (sections[i].is_dirty()) {
+        var fields = that.fields.get_fields();
+        for (var i=0; i<fields.length; i++) {
+            if (fields[i].is_dirty()) {
                 return true;
             }
         }
@@ -746,19 +385,19 @@ IPA.details_facet = function(spec) {
     that.load = function(data) {
         that.facet_load(data);
 
-        var sections = that.sections.values;
-        for (var i=0; i<sections.length; i++) {
-            var section = sections[i];
-            section.load(data);
+        var fields = that.fields.get_fields();
+        for (var i=0; i<fields.length; i++) {
+            var field = fields[i];
+            field.load(data);
         }
         that.enable_update(false);
     };
 
     that.save = function(record) {
-        var sections = that.sections.values;
-        for (var i=0; i<sections.length; i++) {
-            var section = sections[i];
-            section.save(record);
+        var fields = that.fields.get_fields();
+        for (var i=0; i<fields.length; i++) {
+            var field = fields[i];
+            field.save(record);
         }
     };
 
@@ -766,33 +405,29 @@ IPA.details_facet = function(spec) {
 
         var record = {};
         var update_info = IPA.update_info_builder.new_update_info();
-        var sections = that.sections.values;
+        var fields = that.fields.get_fields();
 
         that.save(record);
 
-        for (var i=0; i<sections.length; i++) {
-            var section = sections[i];
+        for (var i=0; i<fields.length; i++) {
+            var field = fields[i];
 
-            var section_fields = section.fields.values;
-            for (var j=0; j<section_fields.length; j++) {
-                var field = section_fields[j];
-                if (only_dirty && !field.is_dirty()) continue;
+            if (only_dirty && !field.is_dirty()) continue;
 
-                var values = record[field.name];
-                if (require_value && !values) continue;
+            var values = record[field.name];
+            if (require_value && !values) continue;
 
-                update_info.append_field(field, values);
-            }
+            update_info.append_field(field, values);
         }
 
         return update_info;
     };
 
     that.reset = function() {
-        var sections = that.sections.values;
-        for (var i=0; i<sections.length; i++) {
-            var section = sections[i];
-            section.reset();
+        var fields = that.fields.get_fields();
+        for (var i=0; i<fields.length; i++) {
+            var field = fields[i];
+            field.reset();
         }
         that.enable_update(false);
     };
@@ -800,10 +435,10 @@ IPA.details_facet = function(spec) {
 
     that.validate = function() {
         var valid = true;
-        var sections = that.sections.values;
-        for (var i=0; i<sections.length; i++) {
-            var section = sections[i];
-            valid &= section.validate();
+        var fields = that.fields.get_fields();
+        for (var i=0; i<fields.length; i++) {
+            var field = fields[i];
+            valid &= field.validate() && field.validate_required();
         }
         return valid;
     };
@@ -971,30 +606,61 @@ IPA.details_facet = function(spec) {
 
     that.clear = function() {
         that.header.clear();
-        var sections = that.sections.values;
 
-        for (var i=0; i< sections.length; i++) {
-            sections[i].clear();
-        }
+        that.widgets.clear();
     };
 
     that.get_update_info = function() {
 
         var update_info = IPA.update_info_builder.new_update_info();
 
-        for (var i = 0; i < that.sections.length; i++) {
-            var section = that.sections.values[i];
-            if(section.get_update_info) {
+        var fields = that.fields.get_fields();
+        for (var i = 0; i < fields.length; i++) {
+            var field = fields[i];
+            if(field.get_update_info) {
                 update_info = IPA.update_info_builder.merge(
                     update_info,
-                    section.get_update_info());
+                    field.get_update_info());
             }
         }
 
         return update_info;
     };
 
-    that.add_sections(spec.sections);
+    that.create_builder = function() {
+
+        var widget_builder = IPA.widget_builder({
+            widget_options: {
+                entity: that.entity
+            }
+        });
+        var field_builder = IPA.field_builder({
+            field_options: {
+                entity: that.entity
+            }
+        });
+        var section_builder = IPA.section_builder({
+            container: that,
+            widget_builder: widget_builder,
+            field_builder: field_builder
+        });
+
+        that.builder = IPA.details_builder({
+            container: that,
+            widget_builder: widget_builder,
+            field_builder: field_builder,
+            section_builder: section_builder
+        });
+    };
+
+    that.init = function() {
+
+        that.create_builder();
+        that.builder.build(spec);
+        that.fields.widgets_created();
+    };
+
+    that.init();
 
     that.details_facet_create_content = that.create_content;
     that.details_facet_load = that.load;
diff --git a/install/ui/dialog.js b/install/ui/dialog.js
index 73c9b6cc3..c03bf801f 100644
--- a/install/ui/dialog.js
+++ b/install/ui/dialog.js
@@ -65,24 +65,9 @@ IPA.dialog = function(spec) {
     that.width = spec.width || 500;
     that.height = spec.height;
 
+    that.widgets = IPA.widget_container();
+    that.fields = IPA.field_container({ container: that });
     that.buttons = $.ordered_map();
-    that.sections = $.ordered_map();
-
-    var init = function() {
-
-        var sections = spec.sections || [];
-
-        for (var i=0; i<sections.length; i++) {
-            var section_spec = sections[i];
-            that.create_section(section_spec);
-        }
-
-        var fields = spec.fields || [];
-
-        // add fields to the default section
-        var section = that.get_section();
-        section.add_fields(fields);
-    };
 
     that.create_button = function(spec) {
         var factory = spec.factory || IPA.dialog_button;
@@ -99,83 +84,21 @@ IPA.dialog = function(spec) {
         return that.buttons.get(name);
     };
 
-    that.get_field = function(name) {
-        for (var i=0; i<that.sections.length; i++) {
-            var section = that.sections.values[i];
-            var field = section.fields.get(name);
-            if (field) return field;
-        }
-        return null;
-    };
-
-    that.get_fields = function() {
-        var fields = [];
-        for (var i=0; i<that.sections.length; i++) {
-            var section = that.sections.values[i];
-            $.merge(fields, section.fields.values);
-        }
-        return fields;
-    };
-
-    that.add_field = function(field) {
-        var section = that.get_section();
-        section.add_field(field);
-        return field;
-    };
-
     that.field = function(field) {
-        that.add_field(field);
+        that.fields.add_field(field);
         return that;
     };
 
     that.validate = function() {
         var valid = true;
-        var sections = that.sections.values;
-        for (var i=0; i<sections.length; i++) {
-            var section = sections[i];
-            valid &= section.validate();
+        var fields = that.fields.get_fields();
+        for (var i=0; i<fields.length; i++) {
+            var field = fields[i];
+            valid &= field.validate() && field.validate_required();
         }
         return valid;
     };
 
-    that.add_section = function(section) {
-        that.sections.put(section.name, section);
-        return that;
-    };
-
-    that.section = function(section) {
-        that.add_section(section);
-        return that;
-    };
-
-    that.create_section = function(spec) {
-
-        var factory = spec.factory || IPA.details_table_section;
-        spec.entity = that.entity;
-        spec.undo = false;
-
-        var section = factory(spec);
-        that.add_section(section);
-
-        return section;
-    };
-
-    that.get_section = function(name) {
-
-        if (name) {
-            return that.sections.get(name);
-
-        } else {
-            var length = that.sections.length;
-            if (length) {
-                // get the last section
-                return that.sections.values[length-1];
-            } else {
-                // create a default section
-                return that.create_section({ name: 'general' });
-            }
-        }
-    };
 
     /**
      * Create content layout
@@ -187,16 +110,16 @@ IPA.dialog = function(spec) {
             'class': 'dialog-message ui-state-highlight ui-corner-all'
         }).appendTo(that.container);
 
-        var sections = that.sections.values;
-        for (var i=0; i<sections.length; i++) {
-            var section = sections[i];
+        var widgets = that.widgets.get_widgets();
+        for (var i=0; i<widgets.length; i++) {
+            var widget = widgets[i];
 
             var div = $('<div/>', {
-                name: section.name,
+                name: widget.name,
                 'class': 'dialog-section'
             }).appendTo(that.container);
 
-            section.create(div);
+            widget.create(div);
         }
 
     };
@@ -258,10 +181,10 @@ IPA.dialog = function(spec) {
     };
 
     that.save = function(record) {
-        var sections = that.sections.values;
-        for (var i=0; i<sections.length; i++) {
-            var section = sections[i];
-            section.save(record);
+        var fields = that.fields.get_fields();
+        for (var i=0; i<fields.length; i++) {
+            var field = fields[i];
+            field.save(record);
         }
     };
 
@@ -271,13 +194,48 @@ IPA.dialog = function(spec) {
     };
 
     that.reset = function() {
-        var sections = that.sections.values;
-        for (var i=0; i<sections.length; i++) {
-            sections[i].reset();
+        var fields = that.fields.get_fields();
+        for (var i=0; i<fields.length; i++) {
+            fields[i].reset();
         }
     };
 
-    init();
+    that.create_builder = function() {
+
+        var widget_builder = IPA.widget_builder({
+            widget_options: {
+                entity: that.entity
+            }
+        });
+        var field_builder = IPA.field_builder({
+            field_options: {
+                undo: false,
+                entity: that.entity
+            }
+        });
+        var section_builder = IPA.section_builder({
+            container: that,
+            section_factory: IPA.details_table_section_nc,
+            widget_builder: widget_builder,
+            field_builder: field_builder
+        });
+
+        that.builder = IPA.details_builder({
+            container: that,
+            widget_builder: widget_builder,
+            field_builder: field_builder,
+            section_builder: section_builder
+        });
+    };
+
+    that.init = function() {
+
+        that.create_builder();
+        that.builder.build(spec);
+        that.fields.widgets_created();
+    };
+
+    that.init();
 
     that.dialog_create = that.create;
     that.dialog_open = that.open;
diff --git a/install/ui/dns.js b/install/ui/dns.js
index 933366c05..af6d50908 100644
--- a/install/ui/dns.js
+++ b/install/ui/dns.js
@@ -183,52 +183,47 @@ IPA.dnszone_details_facet = function(spec) {
         var record = {};
         that.save(record);
 
-        var sections = that.sections.values;
-        for (var i=0; i<sections.length; i++) {
-            var section = sections[i];
+        var fields = that.fields.get_fields();
+        for (var i=0; i<fields.length; i++) {
+            var field = fields[i];
+            if (!field.is_dirty()) continue;
 
-            var section_fields = section.fields.values;
-            for (var j=0; j<section_fields.length; j++) {
-                var field = section_fields[j];
-                if (!field.is_dirty()) continue;
+            var values = record[field.name];
+            if (!values) continue;
 
-                var values = record[field.name];
-                if (!values) continue;
+            var metadata = field.metadata;
 
-                var metadata = field.metadata;
+            // skip primary key
+            if (metadata && metadata.primary_key) continue;
 
-                // skip primary key
-                if (metadata && metadata.primary_key) continue;
+            // check enable/disable
+            if (field.name == 'idnszoneactive') {
+                if (values[0] == 'FALSE') enable_operation.command.method = 'disable';
+                enable_operation.execute = true;
+                continue;
+            }
 
-                // check enable/disable
-                if (field.name == 'idnszoneactive') {
-                    if (values[0] == 'FALSE') enable_operation.command.method = 'disable';
-                    enable_operation.execute = true;
-                    continue;
+            if (metadata) {
+                if (values.length == 1) {
+                    modify_operation.command.set_option(field.name, values[0]);
+                } else if (field.join) {
+                    modify_operation.command.set_option(field.name, values.join(','));
+                } else {
+                    modify_operation.command.set_option(field.name, values);
                 }
 
-                if (metadata) {
-                    if (values.length == 1) {
-                        modify_operation.command.set_option(field.name, values[0]);
-                    } else if (field.join) {
-                        modify_operation.command.set_option(field.name, values.join(','));
-                    } else {
-                        modify_operation.command.set_option(field.name, values);
-                    }
-
+            } else {
+                if (values.length) {
+                    modify_operation.command.set_option('setattr', field.name+'='+values[0]);
                 } else {
-                    if (values.length) {
-                        modify_operation.command.set_option('setattr', field.name+'='+values[0]);
-                    } else {
-                        modify_operation.command.set_option('setattr', field.name+'=');
-                    }
-                    for (var l=1; l<values.length; l++) {
-                        modify_operation.command.set_option('addattr', field.name+'='+values[l]);
-                    }
+                    modify_operation.command.set_option('setattr', field.name+'=');
+                }
+                for (var l=1; l<values.length; l++) {
+                    modify_operation.command.set_option('addattr', field.name+'='+values[l]);
                 }
-
-                modify_operation.execute = true;
             }
+
+            modify_operation.execute = true;
         }
 
         var batch = IPA.batch_command({
@@ -275,7 +270,7 @@ IPA.dnszone_name_section = function(spec) {
             'class': 'section-table'
         }).appendTo(that.container);
 
-        var idnsname = that.get_field('idnsname');
+        var idnsname = that.fields.get_field('idnsname');
 
         var tr = $('<tr/>').appendTo(table);
 
@@ -315,7 +310,7 @@ IPA.dnszone_name_section = function(spec) {
 
         var idnsname_input = $('input', span);
 
-        var name_from_ip = that.get_field('name_from_ip');
+        var name_from_ip = that.fields.get_field('name_from_ip');
 
         tr = $('<tr/>').appendTo(table);
 
@@ -380,8 +375,8 @@ IPA.dnszone_name_section = function(spec) {
 
     that.save = function(record) {
 
-        var idnsname = that.get_field('idnsname');
-        var name_from_ip = that.get_field('name_from_ip');
+        var idnsname = that.fields.get_field('idnsname');
+        var name_from_ip = that.fields.get_field('name_from_ip');
 
         if (idnsname.radio.is(':checked')) {
             record.idnsname = idnsname.save();
diff --git a/install/ui/group.js b/install/ui/group.js
index 305fb4007..c137a3d28 100644
--- a/install/ui/group.js
+++ b/install/ui/group.js
@@ -150,13 +150,13 @@ IPA.group_adder_dialog = function(spec) {
 
     var init = function() {
 
-        var posix_field = that.get_field('nonposix');
+        var posix_field = that.fields.get_field('nonposix');
         posix_field.value_changed.attach(that.on_posix_change);
     };
 
     that.on_posix_change = function (value) {
 
-        var gid_field = that.get_field('gidnumber');
+        var gid_field = that.fields.get_field('gidnumber');
         if(value) {
             gid_field.reset();
         }
diff --git a/install/ui/host.js b/install/ui/host.js
index 345051ec8..ed8571798 100644
--- a/install/ui/host.js
+++ b/install/ui/host.js
@@ -197,8 +197,8 @@ IPA.host_fqdn_section = function(spec) {
     that.create = function(container) {
         that.container = container;
 
-        var hostname = that.get_field('hostname');
-        var dnszone = that.get_field('dnszone');
+        var hostname = that.fields.get_field('hostname');
+        var dnszone = that.fields.get_field('dnszone');
 
         var table = $('<table/>', {
             'class': 'fqdn'
@@ -268,10 +268,10 @@ IPA.host_fqdn_section = function(spec) {
     };
 
     that.save = function(record) {
-        var field = that.get_field('hostname');
+        var field = that.fields.get_field('hostname');
         var hostname = field.save()[0];
 
-        field = that.get_field('dnszone');
+        field = that.fields.get_field('dnszone');
         var dnszone = field.save()[0];
 
         record.fqdn = hostname && dnszone ? [ hostname+'.'+dnszone ] : [];
@@ -444,8 +444,8 @@ IPA.host_enrollment_section = function(spec) {
     that.create = function(container) {
         that.table_section_create(container);
 
-        var keytab_field = that.get_field('has_keytab');
-        var password_field = that.get_field('has_password');
+        var keytab_field = that.fields.get_field('has_keytab');
+        var password_field = that.fields.get_field('has_password');
 
         /**
          * The set_password() in the password field is being customized to
diff --git a/install/ui/rule.js b/install/ui/rule.js
index 2ccdecd40..9f8e23187 100644
--- a/install/ui/rule.js
+++ b/install/ui/rule.js
@@ -37,7 +37,7 @@ IPA.rule_details_section = function(spec) {
 
         that.container = container;
 
-        var field = that.get_field(that.field_name);
+        var field = that.fields.get_field(that.field_name);
         var metadata = IPA.get_entity_param(that.entity.name, that.field_name);
 
         container.append(metadata.doc+':');
@@ -55,13 +55,13 @@ IPA.rule_details_section = function(spec) {
             for (var i=0; i<that.tables.length; i++) {
                 var table = that.tables[i];
 
-                var field = that.get_field(table.field_name);
+                var field = that.fields.get_field(table.field_name);
                 field.set_enabled(enabled);
             }
         }
 
         if (that.options.length) {
-            var category = that.get_field(that.field_name);
+            var category = that.fields.get_field(that.field_name);
             category.options=that.options;
             category.reset = function() {
                 category.widget_reset();
@@ -95,7 +95,7 @@ IPA.rule_details_section = function(spec) {
                 'class': 'field'
             }).appendTo(span);
 
-            field = that.get_field(table.field_name);
+            field = that.fields.get_field(table.field_name);
             field.create(table_span);
         }
 
diff --git a/install/ui/service.js b/install/ui/service.js
index 742beef61..806c9395f 100644
--- a/install/ui/service.js
+++ b/install/ui/service.js
@@ -139,15 +139,15 @@ IPA.service_adder_dialog = function(spec) {
 
     that.save = function(record) {
 
-        var field = that.get_field('service');
+        var field = that.fields.get_field('service');
         var service = field.save()[0];
 
-        field = that.get_field('host');
+        field = that.fields.get_field('host');
         var host = field.save()[0];
 
         record['krbprincipalname'] = [ service+'/'+host ];
 
-        field = that.get_field('force');
+        field = that.fields.get_field('force');
         record['force'] = field.save();
     };
 
diff --git a/install/ui/sudo.js b/install/ui/sudo.js
index 862478c60..01bb3eed1 100644
--- a/install/ui/sudo.js
+++ b/install/ui/sudo.js
@@ -830,7 +830,7 @@ IPA.sudo.rule_details_command_section = function(spec) {
 
         that.container = container;
 
-        var field = that.get_field('cmdcategory');
+        var field = that.fields.get_field('cmdcategory');
         var metadata = IPA.get_entity_param(that.entity.name, 'cmdcategory');
 
         var span = $('<span/>', {
@@ -857,7 +857,7 @@ IPA.sudo.rule_details_command_section = function(spec) {
             'class': 'field'
         }).appendTo(span);
 
-        field = that.get_field('memberallowcmd_sudocmd');
+        field = that.fields.get_field('memberallowcmd_sudocmd');
         field.create(table_span);
 
         metadata = IPA.get_entity_param(
@@ -869,7 +869,7 @@ IPA.sudo.rule_details_command_section = function(spec) {
             'class': 'field'
         }).appendTo(span);
 
-        field = that.get_field('memberallowcmd_sudocmdgroup');
+        field = that.fields.get_field('memberallowcmd_sudocmdgroup');
         field.create(table_span);
 
         $('<h3/>', {
@@ -886,7 +886,7 @@ IPA.sudo.rule_details_command_section = function(spec) {
             'class': 'field'
         }).appendTo(span);
 
-        field = that.get_field('memberdenycmd_sudocmd');
+        field = that.fields.get_field('memberdenycmd_sudocmd');
         field.create(table_span);
 
         metadata = IPA.get_entity_param(
@@ -898,21 +898,21 @@ IPA.sudo.rule_details_command_section = function(spec) {
             'class': 'field'
         }).appendTo(span);
 
-        field = that.get_field('memberdenycmd_sudocmdgroup');
+        field = that.fields.get_field('memberdenycmd_sudocmdgroup');
         field.create(table_span);
 
         function update_tables(value) {
 
             var enabled = ('' === value);
 
-            var field = that.get_field('memberallowcmd_sudocmd');
+            var field = that.fields.get_field('memberallowcmd_sudocmd');
             field.set_enabled(enabled);
 
-            field = that.get_field('memberallowcmd_sudocmdgroup');
+            field = that.fields.get_field('memberallowcmd_sudocmdgroup');
             field.set_enabled(enabled);
         }
 
-        var cmdcategory = that.get_field('cmdcategory');
+        var cmdcategory = that.fields.get_field('cmdcategory');
         cmdcategory.reset = function() {
             cmdcategory.widget_reset();
             var values = cmdcategory.save();
@@ -1007,7 +1007,7 @@ IPA.sudo.rule_details_runas_section = function(spec) {
     that.create = function(container) {
         that.container = container;
 
-        var field = that.get_field('ipasudorunasusercategory');
+        var field = that.fields.get_field('ipasudorunasusercategory');
         var metadata = IPA.get_entity_param(
             that.entity.name, 'ipasudorunasusercategory');
 
@@ -1028,7 +1028,7 @@ IPA.sudo.rule_details_runas_section = function(spec) {
             'class': 'field'
         }).appendTo(span);
 
-        field = that.get_field('ipasudorunas_user');
+        field = that.fields.get_field('ipasudorunas_user');
         field.create(table_span);
 
         metadata = IPA.get_entity_param(that.entity.name, 'ipasudorunas_group');
@@ -1039,10 +1039,10 @@ IPA.sudo.rule_details_runas_section = function(spec) {
             'class': 'field'
         }).appendTo(span);
 
-        field = that.get_field('ipasudorunas_group');
+        field = that.fields.get_field('ipasudorunas_group');
         field.create(table_span);
 
-        field = that.get_field('ipasudorunasgroupcategory');
+        field = that.fields.get_field('ipasudorunasgroupcategory');
         metadata = IPA.get_entity_param(
             that.entity.name, 'ipasudorunasgroupcategory');
 
@@ -1065,21 +1065,21 @@ IPA.sudo.rule_details_runas_section = function(spec) {
             'class': 'field'
         }).appendTo(span);
 
-        field = that.get_field('ipasudorunasgroup_group');
+        field = that.fields.get_field('ipasudorunasgroup_group');
         field.create(table_span);
 
         function user_update_tables(value) {
 
             var enabled = ('' === value);
 
-            var field = that.get_field('ipasudorunas_user');
+            var field = that.fields.get_field('ipasudorunas_user');
             field.set_enabled(enabled);
 
-            field = that.get_field('ipasudorunas_group');
+            field = that.fields.get_field('ipasudorunas_group');
             field.set_enabled(enabled);
         }
 
-        var user_category = that.get_field('ipasudorunasusercategory');
+        var user_category = that.fields.get_field('ipasudorunasusercategory');
         user_category.reset = function() {
             user_category.widget_reset();
             var values = user_category.save();
@@ -1099,11 +1099,11 @@ IPA.sudo.rule_details_runas_section = function(spec) {
 
             var enabled = ('' === value);
 
-            var field = that.get_field('ipasudorunasgroup_group');
+            var field = that.fields.get_field('ipasudorunasgroup_group');
             field.set_enabled(enabled);
         }
 
-        var group_category = that.get_field('ipasudorunasgroupcategory');
+        var group_category = that.fields.get_field('ipasudorunasgroupcategory');
         group_category.reset = function() {
             group_category.widget_reset();
             var values = group_category.save();
diff --git a/install/ui/test/details_tests.js b/install/ui/test/details_tests.js
index 333464232..bea863e2b 100644
--- a/install/ui/test/details_tests.js
+++ b/install/ui/test/details_tests.js
@@ -64,7 +64,7 @@ test("Testing IPA.details_section.create().", function() {
 
     section.entity_name = 'user';
 
-    var fields = section.fields.values;
+    var fields = section.fields.get_fields();
     var container = $("<div/>");
     section.create(container);
 
@@ -276,7 +276,7 @@ test("Testing IPA.details_section_create again()",function(){
         text({name:'cn', label:'Entity Name'}).
         text({name:'description', label:'Description'}).
         text({name:'number', label:'Entity ID'});
-    var fields = section.fields.values;
+    var fields = section.fields.get_fields();
     var container = $("<div title='entity'/>");
     var details = $("<div/>");
     container.append(details);
diff --git a/install/ui/user.js b/install/ui/user.js
index a0949d794..99b8a507c 100644
--- a/install/ui/user.js
+++ b/install/ui/user.js
@@ -181,8 +181,8 @@ IPA.user_adder_dialog = function(spec) {
     that.validate = function() {
         var valid = that.dialog_validate();
 
-        var field1 = that.get_field('userpassword');
-        var field2 = that.get_field('userpassword2');
+        var field1 = that.fields.get_field('userpassword');
+        var field2 = that.fields.get_field('userpassword2');
 
         var password1 = field1.save()[0];
         var password2 = field2.save()[0];
diff --git a/install/ui/widget.js b/install/ui/widget.js
index 1a5696b99..e62139510 100644
--- a/install/ui/widget.js
+++ b/install/ui/widget.js
@@ -1786,6 +1786,171 @@ IPA.button = function(spec) {
     return button;
 };
 
+IPA.composite_widget = function(spec) {
+
+    spec = spec || {};
+
+    var that = IPA.widget(spec);
+
+    that.widgets = IPA.widget_container();
+
+    that.create = function(container) {
+
+        that.widget_create(container);
+        that.widgets.create(container);
+    };
+
+    that.clear = function() {
+
+        var widgets = that.widgets.get_widgets();
+
+        for (var i=0; i< widgets.length; i++) {
+            widgets[i].clear();
+        }
+    };
+
+    that.composite_widget_create = that.create;
+    that.composite_widget_clear = that.clear;
+
+    return that;
+};
+
+IPA.collapsible_section = function(spec) {
+
+    spec = spec || {};
+
+    var that = IPA.composite_widget(spec);
+
+    that.create = function(container) {
+
+        that.header = $('<h2/>', {
+            name: that.name,
+            title: that.label
+        }).appendTo(container);
+
+        that.icon = $('<span/>', {
+            name: 'icon',
+            'class': 'icon section-expand '+IPA.expanded_icon
+        }).appendTo(that.header);
+
+        that.header.append(' ');
+
+        that.header.append(that.label);
+
+        that.content_container = $('<div/>', {
+            name: that.name,
+            'class': 'details-section'
+        }).appendTo(container);
+
+        that.header.click(function() {
+            var visible = that.content_container.is(":visible");
+            that.toggle(!visible);
+        });
+
+        that.composite_widget_create(that.content_container);
+    };
+
+    that.toggle = function(visible) {
+
+        that.icon.toggleClass(IPA.expanded_icon, visible);
+        that.icon.toggleClass(IPA.collapsed_icon, !visible);
+
+        if (visible != that.content_container.is(":visible")) {
+            that.content_container.slideToggle('slow');
+        }
+    };
+
+    return that;
+};
+
+IPA.details_section = IPA.collapsible_section;
+
+IPA.details_table_section = function(spec) {
+
+    spec = spec || {};
+
+    var that = IPA.details_section(spec);
+
+    that.rows = $.ordered_map();
+
+    that.composite_widget_create = function(container) {
+
+        var table = $('<table/>', {
+            'class': 'section-table'
+        }).appendTo(container);
+
+        var widgets = that.widgets.get_widgets();
+        for (var i=0; i<widgets.length; i++) {
+            var widget = widgets[i];
+            var tr = $('<tr/>');
+            that.add_row(widget.name, tr);
+
+            if (widget.hidden) {
+                tr.css('display', 'none');
+            }
+
+            tr.appendTo(table);
+
+            var td = $('<td/>', {
+                'class': 'section-cell-label',
+                title: widget.label
+            }).appendTo(tr);
+
+            $('<label/>', {
+                name: widget.name,
+                'class': 'field-label',
+                text: widget.label+':'
+            }).appendTo(td);
+
+            if(widget.create_required) {
+                widget.create_required(td);
+            }
+
+            td = $('<td/>', {
+                'class': 'section-cell-field',
+                title: widget.label
+            }).appendTo(tr);
+
+            var widget_container = $('<div/>', {
+                name: widget.name,
+                'class': 'field'
+            }).appendTo(td);
+
+            widget.create(widget_container);
+        }
+    };
+
+
+    that.add_row = function(name, row) {
+        that.rows.put(name, row);
+    };
+
+    that.get_row = function(name) {
+        return that.rows.get(name);
+    };
+
+    that.set_row_visible = function(name, visible) {
+        var row = that.get_row(name);
+        row.css('display', visible ? '' : 'none');
+    };
+
+    that.table_section_create = that.composite_widget_create;
+
+    return that;
+};
+
+//non-collabsible section
+IPA.details_table_section_nc = function(spec) {
+
+    spec = spec || {};
+
+    var that = IPA.details_table_section(spec);
+
+    that.create = that.table_section_create;
+
+    return that;
+};
+
 IPA.observer = function(spec) {
 
     var that = {};