Merge pull request #8863 from scmmishra/null-state

feat: added a null state to list view

frappe/core/doctype/doctype/doctype.json

@@ -29,6 +29,7 @@
   "name_case",
   "column_break_15",
   "description",
+  "documentation",
   "form_settings_section",
   "image_field",
   "timeline_field",
@@ -460,6 +461,12 @@
    "fieldtype": "Data",
    "label": "Parent Field (Tree)"
   },
+  {
+   "description": "URL for documentation or help",
+   "fieldname": "documentation",
+   "fieldtype": "Data",
+   "label": "Documentation Link"
+  },
   {
    "fieldname": "actions_section",
    "fieldtype": "Section Break",
@@ -485,7 +492,7 @@
  ],
  "icon": "fa fa-bolt",
  "idx": 6,
- "modified": "2019-09-24 11:42:18.081499",
+ "modified": "2019-11-25 17:24:03.690192",
  "modified_by": "Administrator",
  "module": "Core",
  "name": "DocType",

frappe/public/js/frappe/list/list_view.js

@@ -301,15 +301,32 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 		this.columns = this.columns.slice(0, column_count);
 	}
 
+	get_documentation_link() {
+		if (this.meta.documentation) {
+			return `<a href="${this.meta.documentation}" target="blank" class="meta-description small text-muted">Need Help?</a>`;
+		}
+		return '';
+	}
+
 	get_no_result_message() {
+		let help_link = this.get_documentation_link();
+		let filters = this.filter_area.get();
+		let no_result_message = filters.length ? __('No {0} found', [__(this.doctype)]) : __('You haven\'t created a {0} yet', [__(this.doctype)]);
+		let new_button_label = filters.length ? __('Create a new {0}', [__(this.doctype)]) : __('Create your first {0}', [__(this.doctype)]);
+		let empty_state_image = this.settings.empty_state_image || '/assets/frappe/images/ui-states/empty.png';
+
 		const new_button = this.can_create ?
 			`<p><button class="btn btn-primary btn-sm btn-new-doc">
-				${__('Create a new {0}', [__(this.doctype)])}
+				${new_button_label}
 			</button></p>` : '';
 
 		return `<div class="msg-box no-border">
-			<p>${__('No {0} found', [__(this.doctype)])}</p>
+			<div>
+				<img src="${empty_state_image}" alt="Generic Empty State" class="null-state">
+			</div>
+			<p>${no_result_message}</p>
 			${new_button}
+			${help_link}
 		</div>`;
 	}
 
@@ -391,6 +408,12 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 	}
 
 	after_render() {
+		this.$no_result.html(`
+			<div class="no-result text-muted flex justify-center align-center">
+				${this.get_no_result_message()}
+			</div>
+		`);
+		this.setup_new_doc_event();
 		this.list_sidebar.reload_stats();
 	}
 

frappe/public/less/list.less

@@ -4,6 +4,22 @@
 	.result, .no-result, .freeze {
 		min-height: ~"calc(100vh - 284px)";
 	}
+
+	.msg-box {
+		margin-bottom: 8em;
+		// To compensate for percieved centering
+
+		.null-state {
+			height: 12em !important;
+			width: auto;
+		}
+
+		.meta-description {
+			width: 45%;
+			margin-right: auto;
+			margin-left: auto;
+		}
+	}
 }
 
 .freeze-row {