diff --git a/bricks/bricks.js b/bricks/bricks.js
index b010bd8..0157ffe 100755
--- a/bricks/bricks.js
+++ b/bricks/bricks.js
@@ -69,7 +69,13 @@ dispatch_event:
 params:
 */
 
-bricks.widgetBuild = async function(desc, widget){
+bricks.apply_data = function(desc, data){
+	var tmpl = JSON.stringify(desc);
+	var s = bricks.obj_fmtstr(data, tmpl);
+	return JSON.parse(s);
+}
+
+bricks.widgetBuild = async function(desc, widget, data){
 	if (! widget){
 		widget = bricks.Body;
 	}
@@ -85,6 +91,9 @@ bricks.widgetBuild = async function(desc, widget){
 		desc = desc1;
 		klassname = desc.widgettype;
 	}
+	if (data){
+		desc = bricks.apply_data(desc, data);
+	}
 	let klass = bricks.Factory.get(desc.widgettype);
 	if (! klass){
 		bricks.debug('widgetBuild():',desc.widgettype, 'not registered', bricks.Factory.widgets_kw);
@@ -99,7 +108,7 @@ bricks.widgetBuild = async function(desc, widget){
 	if (w.is_container() && desc.subwidgets){
 		for (let i=0; i<desc.subwidgets.length; i++){
 			let sdesc = desc.subwidgets[i];
-			let sw = await (bricks.widgetBuild(sdesc, w));
+			let sw = await (bricks.widgetBuild(sdesc, w, data));
 			if ( sw ){
 				w.add_widget(sw);
 			} else {
diff --git a/bricks/css/bricks.css b/bricks/css/bricks.css
index c0f9c2f..4ff6675 100755
--- a/bricks/css/bricks.css
+++ b/bricks/css/bricks.css
@@ -261,6 +261,10 @@ div[tooltip] {
 	margin-bottom: 5px;
 }
 .accordion-item-header {
+	padding: 10px;
+	background-color: #eeeeee;
+}
+.accordion-item-info {
 	padding: 10px;
 	background-color: #f0f0f0;
 	cursor: pointer;
diff --git a/bricks/dynamicaccordion.js b/bricks/dynamicaccordion.js
index 0a01f1e..3804e45 100644
--- a/bricks/dynamicaccordion.js
+++ b/bricks/dynamicaccordion.js
@@ -12,32 +12,33 @@ bricks.AccordionItem = class extends bricks.Layout {
 	}
 }
 
-bricks.AccordionHeader = class extends bricks.Layout {
+bricks.AccordionInfo = class extends bricks.Layout {
 	constructor(opts){
 		super(opts);
-		this.set_css('accordion-item-header');
+		this.set_css('accordion-item-info');
 	}
 }
 
 bricks.DynamicAccordion = class extends bricks.VScrollPanel {
 	/*
 		{
-			"title":
-			"description",
 			"data_url",
 			"data_method",
-			"content_url"
-			"content_view"
 			"cache_limit",
 			"page_rows",
-			"header":
 			"record_view"
-			"record_show_field":
+			"content_rely_on"
+			"content_rely_value"
+			"editable"
+			"fields":
+			"record_toolbar",
+			"record_toolbar_collapsable"
+			"header"
+			"content_view"
 		}
 	*/
 	constructor(opts){
 		super(opts);
-		this.set_css("accordion");
 		this.element = this.dom_element;
 		this.loader = new bricks.PageDataLoader({
 			url:this.opts.data_url,
@@ -46,26 +47,105 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
 			method:this.opts.data_method,
 			cache_pages:this.opts.cache_limit
 		});
-		this.contentUrl = this.opts.content_url;
+		this.old_params = null;
+		this.active_item = null;
 		this.active_content = null;
 		this.loading = false;
-		if (this.opts.content_view){
-			this.content_view_tmpl = JSON.stringify(this.opts.content_view);
+		schedule_once(this.build_all.bind(this), 0.1);
+	}
+	async build_all(){
+		if (this.title){
+			this.build_title();
 		}
-		if (this.opts.record_view){
-			this.record_view_tmpl = JSON.stringify(this.opts.record_view);
+		if (this.description){
+			this.build_description();
 		}
-		this.bind('min_threshold', this.load_previous_page.bind(this));
-		this.bind('max_threshold', this.load_next_page.bind(this));
-		schedule_once(this.render.bind(this), 0.1);
+		if (this.toolbar){
+			await this.build_toolbar();
+		}
+		if (this.editable && this.fields){
+			await this.build_new_form();
+		}
+		if (! this.noheader){
+			await this.build_header();
+		}
+		var filler = new bricks.Filler();
+		this.container = new bricks.VScrollPanel({ });
+		filler.add_widget(this.container);
+		this.add_widget(filler);
+		this.container.bind('min_threshold', this.load_previous_page.bind(this));
+		this.container.bind('max_threshold', this.load_next_page.bind(this));
+		await this.render();
+	}
+	async build_header(){
+		return await this.build_info();
 	}
 
+	async build_info(record){
+		if (! this.fields && !record){
+			return;
+		}
+		var w;
+		const info = new bricks.AccordionInfo({});
+		if (! record){
+			record = {};
+			for (var i=0;i<this.fields.length;i++){
+				var f = this.fields[i];
+				record[f.name] = f.label || f.name;
+			}
+		}
+
+		w = await bricks.widgetBuild(this.record_view, info, record);
+		if (w){
+			info.add_widget(w);
+		} else {
+			bricks.debug('bricks.widgetBuild(), tmpl=', this.record_view, 'record=', record);
+		}       
+		this.add_widget(info);
+		return info;
+	}
+
+	async build_new_form(){
+		var desc = {
+			"widgettype":"VBox",
+			"options":{
+				"height":"auto",
+			},
+			"subwidgets":[
+				{
+					"id":"new",
+					"widgettype":"Icon",
+					"options":{
+						"url":this.editable.add_icon || bricks_resource('imgs/add.png')
+					}
+				},
+				{
+					"widgettype":"Form",
+					"options":{
+						"cheight":this.editable.form_cheight||7,
+						"submit_url":this.editable.new_data_url,
+						"fields":this.fields
+					}
+				}
+			]
+		};
+		var w = await bricks.widgetBuild(desc, this);
+		w.children[1].hide();
+		w.children[0].bind('click',function(){ w.children[1].toggle_hide()})
+		this.new_form = w.children[1];
+		this.new_form.bind('submited', this.render.bind(this));
+		this.add_widget(w);
+	}
 	async render(params) {
 		params = params || {};
+		if (params == this.old_params){
+			return;
+		}
+		this.old_params = params;
 		bricks.debug('params=', params, 'render() called');
 		var d = await this.loader.loadData(params);
 		if (d){
-			this.clear_widgets();
+			this.container.clear_widgets();
 			await this.dataHandle(d);
 		} else {
 			bricks.debug(params, 'load data return null');
@@ -89,39 +169,44 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
 			}
 			const record = data[i];
 			const item = new bricks.AccordionItem({});
-			const header = new bricks.AccordionHeader({});
-			if (this.opts.record_view){
-				var w;
-				w = await bricks.widgetBuildWithData(this.record_view_tmpl,
-						header, record);
-				if (w){
-					header.add_widget(w);
-				} else {
-					bricks.debug('bricks.widgetBuildWithData(), tmpl=', this.record_view_tmpl, 'record=', record);
+			var info = await this.build_info(record);
+			var build_content = true;
+			if (this.content_rely_on){
+				var v = this.content_rely_value || true;
+				if(record[this.content_rely_on] != v){
+					build_content = false;
 				}
 			}
-			var content = new bricks.VBox({
-				height:'auto',
-				display:'none'
-			});
-			content.set_css('accordion-item-content');
-			content.hide();
-			header.bind('click', this.toggle_content.bind(this, header, content, record));
-			item.add_widget(header);
-			item.add_widget(content);
+			content = null;
+			if (build_content){
+				var content = new bricks.VBox({
+					height:'auto',
+					display:'none'
+				});
+				content.set_css('accordion-item-content');
+				content.hide();
+				info.bind('click', this.toggle_content.bind(this, info, content, record));
+			}
+			item.add_widget(info);
+			if(content){
+				item.add_widget(content);
+			}
 			item.set_attribute('data-page', page);
-			this.add_widget(item, pos);
+			this.container.add_widget(item, pos);
 		};
 	}
 	delete_page(page){
 		var items = this.dom_element.querySelectorAll('[data-page="' + page + '"]');
 		for (var i=0;i<items.length;i++) {
 			var w = items[i].bricks_widget;
-			this.remove_widget(w);
+			this.container.remove_widget(w);
 		}
 	}
-	async toggle_content(header, content, record, event){
-		var h = this.dom_element.offsetHeight  - 3 * header.dom_element.offsetHeight;
+	async toggle_content(info, content, record, event){
+		if (!this.content_view){
+			return;
+		}
+		var h = this.container.dom_element.offsetHeight  - 3 * info.dom_element.offsetHeight;
 		content.set_style('height', h + 'px');
 		if (this.active_content){
 			if (this.active_content != content){
@@ -140,17 +225,7 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
 		
 		var jc = new bricks.HttpJson();
 		var w;
-		if (this.content_view_tmpl){
-			w = await bricks.widgetBuildWithData(this.content_view_tmpl,
-					content, record);
-		} else if (this.contentUrl){
-			var url = this.contentUrl;
-			var params = {
-				'id':record.id
-			}
-			var desc = await jc.get(url, {params:params});
-			w = await bricks.widgetBuild(desc, content);
-		}
+		w = await bricks.widgetBuild(this.content_view, content, record);
 		if (w){
 			content.add_widget(w);
 			this.active_content = content;
@@ -169,8 +244,8 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
 			var d = await this.loader.loadPreviousPage();
 			if (d){
 				this.dataHandle(d);
-				var total = this.dom_element.scrollHeight - this.dom_element.clientHeight;
-				this.dom_element.scrollTop = d.pos_rate * total;
+				var total = this.container.dom_element.scrollHeight - this.container.dom_element.clientHeight;
+				this.container.dom_element.scrollTop = d.pos_rate * total;
 			} else {
 				bricks.debug(this.loader, 'load previous page error');
 			}
@@ -189,8 +264,8 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
 			var d = await this.loader.loadNextPage();
 			if (d){
 				this.dataHandle(d);
-				var total = this.dom_element.scrollHeight - this.dom_element.clientHeight;
-				this.dom_element.scrollTop = d.pos_rate * total;
+				var total = this.container.dom_element.scrollHeight - this.container.dom_element.clientHeight;
+				this.container.dom_element.scrollTop = d.pos_rate * total;
 			} else {
 				bricks.debug(this.loader, 'load next page error');
 			}