From 8e806aae327b3179a26e6627fd42c80f6ec615f4 Mon Sep 17 00:00:00 2001
From: sameer79 <findsameershaikh@yahoo.co.in>
Date: Wed, 9 Oct 2019 17:35:12 +0530
Subject: [PATCH] ATLAS-3439: Add User-defined properties in entity details
 page.

---
 dashboardv2/public/css/scss/common.scss            |  47 +++++-
 dashboardv2/public/css/scss/override.scss          |   3 +-
 dashboardv2/public/css/scss/panel.scss             |  35 +++-
 .../detail_page/DetailPageLayoutView_tmpl.html     |  15 +-
 .../entity/EntityDetailTableLayoutView_tmpl.html   |  44 +++--
 .../entity/EntityUserDefineItemView_tmpl.html      |  45 +++++
 .../entity/EntityUserDefineView_tmpl.html          |  65 ++++++++
 .../templates/search/AdvancedSearchInfo_tmpl.html  |   2 +-
 .../js/views/detail_page/DetailPageLayoutView.js   |  12 +-
 .../js/views/entity/EntityDetailTableLayoutView.js |   2 +-
 .../js/views/entity/EntityUserDefineItemView.js    |  98 +++++++++++
 .../public/js/views/entity/EntityUserDefineView.js | 184 +++++++++++++++++++++
 dashboardv3/public/css/scss/common.scss            |  43 +++++
 dashboardv3/public/css/scss/panel.scss             |  35 +++-
 dashboardv3/public/css/scss/table.scss             |   1 +
 .../detail_page/DetailPageLayoutView_tmpl.html     |  15 +-
 .../entity/EntityDetailTableLayoutView_tmpl.html   |  44 +++--
 .../entity/EntityUserDefineItemView_tmpl.html      |  45 +++++
 .../entity/EntityUserDefineView_tmpl.html          |  65 ++++++++
 .../js/views/detail_page/DetailPageLayoutView.js   |  12 +-
 .../js/views/entity/EntityDetailTableLayoutView.js |   2 +-
 .../js/views/entity/EntityUserDefineItemView.js    |  98 +++++++++++
 .../public/js/views/entity/EntityUserDefineView.js | 184 +++++++++++++++++++++
 23 files changed, 1042 insertions(+), 54 deletions(-)
 create mode 100644 dashboardv2/public/js/templates/entity/EntityUserDefineItemView_tmpl.html
 create mode 100644 dashboardv2/public/js/templates/entity/EntityUserDefineView_tmpl.html
 create mode 100644 dashboardv2/public/js/views/entity/EntityUserDefineItemView.js
 create mode 100644 dashboardv2/public/js/views/entity/EntityUserDefineView.js
 create mode 100644 dashboardv3/public/js/templates/entity/EntityUserDefineItemView_tmpl.html
 create mode 100644 dashboardv3/public/js/templates/entity/EntityUserDefineView_tmpl.html
 create mode 100644 dashboardv3/public/js/views/entity/EntityUserDefineItemView.js
 create mode 100644 dashboardv3/public/js/views/entity/EntityUserDefineView.js

diff --git a/dashboardv2/public/css/scss/common.scss b/dashboardv2/public/css/scss/common.scss
index d42e5a9..b24c3c3 100644
--- a/dashboardv2/public/css/scss/common.scss
+++ b/dashboardv2/public/css/scss/common.scss
@@ -15,7 +15,7 @@
 // limitations under the License.
 
 
-/* common.scss */ 
+/* common.scss */
 
 .readOnly {
 
@@ -201,4 +201,47 @@ pre {
     .panel-default>.panel-heading {
         cursor: pointer;
     }
-}
\ No newline at end of file
+}
+
+.custom-table {
+    width: 100%;
+
+    .custom-tr {
+        margin-left: 15px;
+        margin-right: 15px;
+
+        .custom-col-0,
+        .custom-col-1,
+        .custom-col-2 {
+            vertical-align: top;
+            display: inline-block;
+
+            textarea {
+                resize: vertical;
+                height: 34px;
+                min-height: 34px;
+                max-height: 70px;
+            }
+        }
+
+
+        .custom-col-0{
+            text-align: center;
+            vertical-align: middle;
+            width: 2%;
+        }
+
+        .custom-col-1{
+            width: 43%;
+        }
+
+        .custom-col-2{
+            text-align: center;
+            width: 10%;
+        }
+    }
+}
+
+.errorMsg {
+    color: $red;
+}
diff --git a/dashboardv2/public/css/scss/override.scss b/dashboardv2/public/css/scss/override.scss
index c8a1d89..c95ee58 100644
--- a/dashboardv2/public/css/scss/override.scss
+++ b/dashboardv2/public/css/scss/override.scss
@@ -128,6 +128,7 @@ td {
     pre.scroll-y {
         max-height: 200px;
         overflow-y: auto;
+        word-break: break-word;
     }
 }
 
@@ -469,4 +470,4 @@ div.columnmanager-dropdown-container {
 
 .w30 {
     width: 30% !important;
-}
\ No newline at end of file
+}
diff --git a/dashboardv2/public/css/scss/panel.scss b/dashboardv2/public/css/scss/panel.scss
index c1ac042..52b3dbe 100644
--- a/dashboardv2/public/css/scss/panel.scss
+++ b/dashboardv2/public/css/scss/panel.scss
@@ -118,4 +118,37 @@
             }
         }
     }
-}
\ No newline at end of file
+}
+
+.panel-default.custom-panel>.panel-heading {
+    color: $black;
+    cursor: pointer;
+    border-bottom: none;
+    display: inline-block;
+
+    .panel-title {
+        font-weight: normal;
+        a:hover {
+            color: $black;
+            opacity: 0.7;
+        }
+    }
+    .btn-group {
+        margin-top: 3px;
+    }
+}
+
+.panel-default.custom-panel>.panel-actions {
+    float: right;
+    margin-top: 15px;
+    button {
+        margin-right: 10px;
+    }
+}
+
+.panel-default.custom-panel>.panel-collapse>.panel-body {
+    border-top: none;
+}
+.panel-default.custom-panel>.panel-heading > .btn-group > button {
+    color: $black;
+}
diff --git a/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html b/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
index c395799..d35debc 100644
--- a/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
@@ -65,9 +65,16 @@
 <div>
     <div class="tab-content">
         <div id="tab-details" role="properties" class="tab-pane active animated fadeIn">
-            <div id="r_entityDetailTableLayoutView">
-                <div class="fontLoader-relative">
-                    <i class="fa fa-refresh fa-spin-custom"></i>
+            <div class="row">
+                <div class="col-md-6">
+                    <div id="r_entityDetailTableLayoutView">
+                        <div class="fontLoader-relative">
+                            <i class="fa fa-refresh fa-spin-custom"></i>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div id="r_entityUserDefineView"></div>
                 </div>
             </div>
         </div>
@@ -122,4 +129,4 @@
         </div>
     </div>
 </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/dashboardv2/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html b/dashboardv2/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html
index 1c01077..18a9435 100644
--- a/dashboardv2/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html
@@ -14,23 +14,33 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<div class="entity-detail-table">
-    <div class="entity-detail-table-toggle">
-        <div class="pretty p-switch p-fill">
-            <input type="checkbox" data-id="noValueToggle" />
-            <div class="state p-primary">
-                <label>Show Empty Values</label>
+<div class="panel-group" id="accordion">
+    <div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="entity">
+        <div class="panel-heading" data-toggle="collapse" href="#collapse1" aria-expanded="true" style="width: 58%">
+            <h4 class="panel-title">
+                <a>Technical properties </a>
+            </h4>
+            <div class="btn-group pull-left">
+                <button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
+            </div>
+        </div>
+        <div class="panel-actions">
+            <div class="pretty p-switch p-fill">
+                <input type="checkbox" data-id="noValueToggle" />
+                <div class="state p-primary">
+                    <label>Show Empty Values</label>
+                </div>
+            </div>
+        </div>
+        <div id="collapse1" class="panel-collapse collapse in">
+            <div class="panel-body">
+                    <div class="entity-detail-table">
+                        <table class="table">
+                            <tbody data-id="detailValue" class="hide-empty-value">
+                            </tbody>
+                        </table>
+                    </div>
             </div>
         </div>
     </div>
-    <table class="table table-quickMenu">
-        <thead>
-            <tr>
-                <th>Key</th>
-                <th>Value</th>
-            </tr>
-        </thead>
-        <tbody data-id="detailValue" class="hide-empty-value">
-        </tbody>
-    </table>
-</div>
\ No newline at end of file
+</div>
diff --git a/dashboardv2/public/js/templates/entity/EntityUserDefineItemView_tmpl.html b/dashboardv2/public/js/templates/entity/EntityUserDefineItemView_tmpl.html
new file mode 100644
index 0000000..a06039f
--- /dev/null
+++ b/dashboardv2/public/js/templates/entity/EntityUserDefineItemView_tmpl.html
@@ -0,0 +1,45 @@
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+
+<div data-id="userDefineItems">
+    <table class="custom-table">
+        {{#each items}}
+            <tr class="custom-tr">
+                <td class="custom-col-1">
+                    <input placeholder="key" type="text"  data-type="key" data-index={{@index}} class="form-control" value={{key}}></input>
+                    <p class="errorMsg"></p>
+                </td >
+                <td  class="custom-col-0"> : </td >
+                <td  class="custom-col-1">
+                    <textarea placeholder="value"  data-type="value" data-index={{@index}} class="form-control" class="form-control">{{value}}</textarea>
+                    <p class="errorMsg"></p>
+                </td >
+                <td  class="custom-col-2">
+                    <button class="btn btn-default btn-sm" title=""  data-index={{@index}} data-id="deleteItem">
+                        <i class="fa fa-minus"> </i>
+                    </button>
+                    <button class="btn btn-default btn-sm" title="" data-index={{@index}} data-id="addItem">
+                        <i class="fa fa-plus"> </i>
+                    </button>
+                </td >
+            </tr>
+        {{/each}}
+        {{#ifCond items.length "===" 0}}
+            No properties have been created yet. To add a property, click <a href="javascript:void(0)" data-id="addItem">here</a>
+        {{/ifCond}}
+    </table>
+</div>
diff --git a/dashboardv2/public/js/templates/entity/EntityUserDefineView_tmpl.html b/dashboardv2/public/js/templates/entity/EntityUserDefineView_tmpl.html
new file mode 100644
index 0000000..e3f4791
--- /dev/null
+++ b/dashboardv2/public/js/templates/entity/EntityUserDefineView_tmpl.html
@@ -0,0 +1,65 @@
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+<div class="panel-group" id="accordion">
+    <div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="userDefine">
+        <div class="panel-heading" data-toggle="collapse" href="#collapse2" aria-expanded="true" {{#ifCond customAttibutes.length ">" 0}} style="width: 60%" {{else}} style="width: 100%" {{/ifCond}}>
+            <h4 class="panel-title">
+                <a>User-defined properties </a>
+            </h4>
+            <div class="btn-group pull-left">
+                <button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
+            </div>
+        </div>
+        {{#ifCond customAttibutes.length ">" 0}}
+            <div class="panel-actions">
+                {{#ifCond readOnlyEntity "===" false}}
+                    <button class="btn btn-action btn-sm"  data-id="editAttr" data-original-title="Edit User-Defined Attributes">Edit</button>
+                {{/ifCond}}
+            </div>
+        {{/ifCond}}
+        <div id="collapse2" class="panel-collapse collapse in">
+            <div class="panel-body">
+                    <div class="row">
+                        <div class="col-md-12">
+                            <div class="entity-detail-table">
+                                <table class="table">
+                                    {{#ifCond customAttibutes.length "===" 0}}
+                                        <span>No properties have been created yet.
+                                            {{#ifCond readOnlyEntity "==" false}}
+                                                <span>To add a property, click <a href="javascript:void(0)" data-id="editAttr">here</a></span>
+                                            {{/ifCond}}
+                                        </span>
+                                    {{/ifCond}}
+                                    <tbody>
+                                        {{#each customAttibutes}}
+                                            <tr>
+                                                <td>
+                                                    <div class="scroll-y">{{key}}</div>                                              </div></td>
+                                                <td>
+                                                    <div class="scroll-y">{{value}}</div>
+                                                </td>
+                                            </tr>
+                                        {{/each}}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/dashboardv2/public/js/templates/search/AdvancedSearchInfo_tmpl.html b/dashboardv2/public/js/templates/search/AdvancedSearchInfo_tmpl.html
index 64f1a31..7746974 100644
--- a/dashboardv2/public/js/templates/search/AdvancedSearchInfo_tmpl.html
+++ b/dashboardv2/public/js/templates/search/AdvancedSearchInfo_tmpl.html
@@ -31,6 +31,6 @@
         </li>
     </ul>
     <h5 style="padding-left: 22.5px;">
-        <a href="http://atlas.apache.org/#/SearchAdvance" target="_blank"><i class="fa fa-info-circle" aria-hidden="true"></i> &nbsp; More sample queries and use-cases</a>
+        <a href="http://atlas.apache.org/Search-Advanced.html" target="_blank"><i class="fa fa-info-circle" aria-hidden="true"></i> &nbsp; More sample queries and use-cases</a>
     </h5>
 </div>
\ No newline at end of file
diff --git a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
index 5fe5a9e..4f48693 100644
--- a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
+++ b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
@@ -45,7 +45,8 @@ define(['require',
                 RAuditTableLayoutView: "#r_auditTableLayoutView",
                 RReplicationAuditTableLayoutView: "#r_replicationAuditTableLayoutView",
                 RProfileLayoutView: "#r_profileLayoutView",
-                RRelationshipLayoutView: "#r_relationshipLayoutView"
+                RRelationshipLayoutView: "#r_relationshipLayoutView",
+                REntityUserDefineView: "#r_entityUserDefineView",
             },
             /** ui selector cache */
             ui: {
@@ -243,6 +244,7 @@ define(['require',
                         })()
                     }
                     this.renderEntityDetailTableLayoutView(obj);
+                    this.renderEntityUserDefineView(obj);
                     this.renderRelationshipLayoutView(obj);
                     this.renderAuditTableLayoutView(obj);
                     this.renderTagTableLayoutView(obj);
@@ -484,6 +486,12 @@ define(['require',
                     that.REntityDetailTableLayoutView.show(new EntityDetailTableLayoutView(obj));
                 });
             },
+            renderEntityUserDefineView: function(obj) {
+                var that = this;
+                require(['views/entity/EntityUserDefineView'], function(EntityUserDefineView) {
+                    that.REntityUserDefineView.show(new EntityUserDefineView(obj));
+                });
+            },
             renderTagTableLayoutView: function(obj) {
                 var that = this;
                 require(['views/tag/TagDetailTableLayoutView'], function(TagDetailTableLayoutView) {
@@ -545,4 +553,4 @@ define(['require',
             }
         });
     return DetailPageLayoutView;
-});
\ No newline at end of file
+});
diff --git a/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js b/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js
index 381d99e..6572292 100644
--- a/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js
+++ b/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js
@@ -83,4 +83,4 @@ define(['require',
             }
         });
     return EntityDetailTableLayoutView;
-});
\ No newline at end of file
+});
diff --git a/dashboardv2/public/js/views/entity/EntityUserDefineItemView.js b/dashboardv2/public/js/views/entity/EntityUserDefineItemView.js
new file mode 100644
index 0000000..a649ca8
--- /dev/null
+++ b/dashboardv2/public/js/views/entity/EntityUserDefineItemView.js
@@ -0,0 +1,98 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+define(['require',
+    'backbone',
+    'hbs!tmpl/entity/EntityUserDefineItemView_tmpl'
+
+], function(require, Backbone, EntityUserDefineItemView_tmpl) {
+    'use strict';
+
+    return Backbone.Marionette.ItemView.extend({
+        _viewName: 'EntityUserDefineItemView',
+
+        template: EntityUserDefineItemView_tmpl,
+
+        templateHelpers: function() {
+            return {
+                items: this.items
+            };
+        },
+
+        /** Layout sub regions */
+        regions: {},
+
+        /** ui selector cache */
+        ui: {
+            itemKey: "[data-type='key']",
+            itemValue: "[data-type='value']",
+            addItem: "[data-id='addItem']",
+            deleteItem: "[data-id='deleteItem']"
+        },
+        /** ui events hash */
+        events: function() {
+            var events = {};
+            events['input ' + this.ui.itemKey] = 'onItemKeyChange';
+            events['input ' + this.ui.itemValue] = 'onItemValueChange';
+            events['click ' + this.ui.addItem] = 'onAddItemClick';
+            events['click ' + this.ui.deleteItem] = 'onDeleteItemClick';
+            return events;
+        },
+
+        /**
+         * intialize a new GlobalExclusionComponentView Layout
+         * @constructs
+         */
+        initialize: function(options) {
+            var that = this;
+            this.editMode = options.mode;
+            if (options.items.length === 0) {
+                this.items = [{ key: "", value: "", mode: this.editMode}];
+
+            } else {
+                this.items = options.items.map(function(m) {
+                    m.mode = that.editMode;
+                    return m;
+                });
+            }
+        },
+        onRender: function() {
+
+        },
+        onAddItemClick: function(e) {
+            var el = e.currentTarget;
+            this.items.splice(parseInt(el.dataset.index) + 1, 0, { key: "", value: "", mode: this.editMode});
+            this.render();
+        },
+        onDeleteItemClick: function(e) {
+            var el = e.currentTarget;
+            this.items.splice(el.dataset.index, 1);
+            this.render();
+        },
+        onItemKeyChange: function (e) {
+            var el = e.currentTarget;
+            var val = el.value;
+            this.items[ el.dataset.index].key = val;
+        },
+        onItemValueChange: function (e) {
+            var el = e.currentTarget;
+            var val = el.value;
+            this.items[ el.dataset.index].value = el.value;
+        }
+    });
+
+});
diff --git a/dashboardv2/public/js/views/entity/EntityUserDefineView.js b/dashboardv2/public/js/views/entity/EntityUserDefineView.js
new file mode 100644
index 0000000..4fc2f02
--- /dev/null
+++ b/dashboardv2/public/js/views/entity/EntityUserDefineView.js
@@ -0,0 +1,184 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+define(['require',
+'backbone',
+'hbs!tmpl/entity/EntityUserDefineView_tmpl',
+'views/entity/EntityUserDefineItemView',
+'utils/CommonViewFunction',
+'modules/Modal',
+'models/VEntity',
+'utils/Utils',
+'utils/Enums'
+], function(require, Backbone, EntityUserDefineView_tmpl, EntityUserDefineItemView, CommonViewFunction, Modal, VEntity, Utils, Enums) {
+'use strict';
+
+    return Backbone.Marionette.LayoutView.extend({
+        _viewName: 'EntityUserDefineView',
+        template: EntityUserDefineView_tmpl,
+        templateHelpers: function() {
+            return {
+                customAttibutes: this.customAttibutes,
+                readOnlyEntity : this.readOnlyEntity
+            };
+        },
+        ui: {
+            addAttr: "[data-id='addAttr']",
+            editAttr: "[data-id='editAttr']",
+            deleteAttr: "[data-id='deleteAttr']"
+        },
+        events: function() {
+            var events = {};
+            events["click " + this.ui.editAttr] = 'onEditAttrClick';
+            return events;
+        },
+        initialize: function(options) {
+            _.extend(this, _.pick(options, 'entity'));
+            this.userDefineAttr = this.entity.customAttributes || [];
+            this.editMode = false;
+            this.readOnlyEntity = Enums.entityStateReadOnly[this.entity.status];
+            this.entityModel = new VEntity(this.entity);
+            this.generateTableFields();
+        },
+        onRender: function() {
+        },
+        bindEvents: {},
+        customAtributesFunc: function() {
+
+        },
+        generateTableFields: function() {
+            var that = this;
+            this.customAttibutes = [];
+            _.each(Object.keys(that.userDefineAttr), function(key, i) {
+                that.customAttibutes.push({
+                    key: key,
+                    value: that.userDefineAttr[key]
+                });
+            });
+        },
+        onEditAttrClick: function (e) {
+            this.editMode = true;
+            var options = {items: this.customAttibutes, mode: true};
+            var view = new EntityUserDefineItemView(options);
+            var modalObj = {
+                title: 'User-Defined Attributes',
+                content: view,
+                okText: 'Save',
+                okCloses: false,
+                cancelText: "Cancel",
+                mainClass: 'modal-lg',
+                allowCancel: true,
+            };
+           this.setAttributeModal(modalObj);
+        },
+        structureAttributes: function (list) {
+            var obj={}
+            list.map(function (o) {
+                obj[o.key] = o.value;
+            });
+            return obj;
+        },
+        saveAttributes: function (list) {
+            var that = this;
+            var entityJson = that.entityModel.toJSON();
+            var properties = that.structureAttributes(list);
+            entityJson.customAttributes = properties;
+            var payload = {entity: entityJson};
+            that.entityModel.createOreditEntity({
+                data: JSON.stringify(payload),
+                type: 'POST',
+                success: function() {
+                    var msg = "User-defined attribute(s) updated successfully";
+                    that.customAttibutes = list;
+                    Utils.notifySuccess({
+                        content: msg
+                    });
+                    that.modal && that.modal.trigger('cancel');
+                    that.render();
+                },
+                error: function (e) {
+                    that.editMode = false;
+                    Utils.notifySuccess({
+                        content: e.message
+                    });
+                    that.modal && that.modal.$el.find('button.ok').attr("disabled", false);
+                },
+                complete: function () {
+                    that.modal && that.modal.$el.find('button.ok').attr("disabled", false);
+                    that.editMode = false;
+                }
+            });
+        },
+        setAttributeModal: function(modalObj) {
+            var self = this;
+            this.modal = new Modal(modalObj);
+            this.modal.open();
+            this. modal.on('ok', function() {
+                self.modal.$el.find('button.ok').attr("disabled", true);
+                var list = self.modal.$el.find("[data-type]"),
+                    keyMap = new Map(),
+                    validation = true,
+                    hasDup = [],
+                    dataList = [];
+                Array.prototype.push.apply(dataList, self.modal.options.content.items);
+                for(var i = 0; i < list.length ; i++) {
+                    var input = list[i],
+                        type = input.dataset.type,
+                        pEl = self.modal.$el.find(input.parentElement).find('p'),
+                        classes = 'form-control',
+                        val = input.value.trim();
+                        pEl[0].innerText = "";
+
+                    if (val === '') {
+                        classes = 'form-control errorClass';
+                        validation = false;
+                        pEl[0].innerText = 'Required!';
+                    } else {
+                        if (input.tagName === 'INPUT') {
+                            var duplicates = dataList.filter(function(c) {
+                                return c.key === val;
+                            });
+                            if (keyMap.has(val) || duplicates.length > 1 ) {
+                                classes = 'form-control errorClass';
+                                hasDup.push('duplicate');
+                                pEl[0].innerText = 'Duplicate key';
+                            } else {
+                                keyMap.set(val, val);
+                            }
+                        }
+                    }
+                    input.setAttribute('class', classes);
+                }
+
+                if (validation && hasDup.length === 0) {
+                    self.saveAttributes(self.modal.options.content.items);
+                } else {
+                    self.modal.$el.find('button.ok').attr("disabled", false);
+                }
+            });
+            this.modal.on('closeModal', function() {
+                self.editMode = false;
+                self.modal.trigger('cancel');
+            });
+        },
+        enableModalButton: function () {
+            var self = this;
+            self.modal.$el.find('button.ok').attr("disabled", false);
+        }
+    });
+});
diff --git a/dashboardv3/public/css/scss/common.scss b/dashboardv3/public/css/scss/common.scss
index 26bf82a..dfe0e4f 100644
--- a/dashboardv3/public/css/scss/common.scss
+++ b/dashboardv3/public/css/scss/common.scss
@@ -201,3 +201,46 @@ pre {
     bottom: 0;
     background: white;
 }
+
+.custom-table {
+    width: 100%;
+
+    .custom-tr {
+        margin-left: 15px;
+        margin-right: 15px;
+
+        .custom-col-0,
+        .custom-col-1,
+        .custom-col-2 {
+            vertical-align: top;
+            display: inline-block;
+
+            textarea {
+                resize: vertical;
+                height: 34px;
+                min-height: 34px;
+                max-height: 70px;
+            }
+        }
+
+
+        .custom-col-0{
+            text-align: center;
+            vertical-align: middle;
+            width: 2%;
+        }
+
+        .custom-col-1{
+            width: 43%;
+        }
+
+        .custom-col-2{
+            text-align: center;
+            width: 10%;
+        }
+    }
+}
+
+.errorMsg {
+    color: $red;
+}
diff --git a/dashboardv3/public/css/scss/panel.scss b/dashboardv3/public/css/scss/panel.scss
index dfa0872..b06e63c 100644
--- a/dashboardv3/public/css/scss/panel.scss
+++ b/dashboardv3/public/css/scss/panel.scss
@@ -134,4 +134,37 @@
             }
         }
     }
-}
\ No newline at end of file
+}
+
+.panel-default.custom-panel>.panel-heading {
+    color: $black;
+    cursor: pointer;
+    border-bottom: none;
+    display: inline-block;
+
+    .panel-title {
+        font-weight: normal;
+        a:hover {
+            color: $black;
+            opacity: 0.7;
+        }
+    }
+    .btn-group {
+        margin-top: 3px;
+    }
+}
+
+.panel-default.custom-panel>.panel-actions {
+    float: right;
+    margin-top: 15px;
+    button {
+        margin-right: 10px;
+    }
+}
+
+.panel-default.custom-panel>.panel-collapse>.panel-body {
+    border-top: none;
+}
+.panel-default.custom-panel>.panel-heading > .btn-group > button {
+    color: $black;
+}
diff --git a/dashboardv3/public/css/scss/table.scss b/dashboardv3/public/css/scss/table.scss
index 0f8ca75..06fb29b 100644
--- a/dashboardv3/public/css/scss/table.scss
+++ b/dashboardv3/public/css/scss/table.scss
@@ -212,6 +212,7 @@ td {
     pre.scroll-y {
         max-height: 200px;
         overflow-y: auto;
+        word-break: break-word;
     }
 
     &.searchTableName {
diff --git a/dashboardv3/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html b/dashboardv3/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
index 6519863..9c7cb81 100644
--- a/dashboardv3/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
+++ b/dashboardv3/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
@@ -68,9 +68,16 @@
 <div>
     <div class="tab-content">
         <div id="tab-details" role="properties" class="tab-pane active animated fadeIn">
-            <div id="r_entityDetailTableLayoutView">
-                <div class="fontLoader-relative">
-                    <i class="fa fa-refresh fa-spin-custom"></i>
+            <div class="row">
+                <div class="col-md-6">
+                    <div id="r_entityDetailTableLayoutView">
+                        <div class="fontLoader-relative">
+                            <i class="fa fa-refresh fa-spin-custom"></i>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div id="r_entityUserDefineView"></div>
                 </div>
             </div>
         </div>
@@ -125,4 +132,4 @@
         </div>
     </div>
 </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/dashboardv3/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html b/dashboardv3/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html
index 1c01077..18a9435 100644
--- a/dashboardv3/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html
+++ b/dashboardv3/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html
@@ -14,23 +14,33 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
-<div class="entity-detail-table">
-    <div class="entity-detail-table-toggle">
-        <div class="pretty p-switch p-fill">
-            <input type="checkbox" data-id="noValueToggle" />
-            <div class="state p-primary">
-                <label>Show Empty Values</label>
+<div class="panel-group" id="accordion">
+    <div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="entity">
+        <div class="panel-heading" data-toggle="collapse" href="#collapse1" aria-expanded="true" style="width: 58%">
+            <h4 class="panel-title">
+                <a>Technical properties </a>
+            </h4>
+            <div class="btn-group pull-left">
+                <button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
+            </div>
+        </div>
+        <div class="panel-actions">
+            <div class="pretty p-switch p-fill">
+                <input type="checkbox" data-id="noValueToggle" />
+                <div class="state p-primary">
+                    <label>Show Empty Values</label>
+                </div>
+            </div>
+        </div>
+        <div id="collapse1" class="panel-collapse collapse in">
+            <div class="panel-body">
+                    <div class="entity-detail-table">
+                        <table class="table">
+                            <tbody data-id="detailValue" class="hide-empty-value">
+                            </tbody>
+                        </table>
+                    </div>
             </div>
         </div>
     </div>
-    <table class="table table-quickMenu">
-        <thead>
-            <tr>
-                <th>Key</th>
-                <th>Value</th>
-            </tr>
-        </thead>
-        <tbody data-id="detailValue" class="hide-empty-value">
-        </tbody>
-    </table>
-</div>
\ No newline at end of file
+</div>
diff --git a/dashboardv3/public/js/templates/entity/EntityUserDefineItemView_tmpl.html b/dashboardv3/public/js/templates/entity/EntityUserDefineItemView_tmpl.html
new file mode 100644
index 0000000..a06039f
--- /dev/null
+++ b/dashboardv3/public/js/templates/entity/EntityUserDefineItemView_tmpl.html
@@ -0,0 +1,45 @@
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+
+<div data-id="userDefineItems">
+    <table class="custom-table">
+        {{#each items}}
+            <tr class="custom-tr">
+                <td class="custom-col-1">
+                    <input placeholder="key" type="text"  data-type="key" data-index={{@index}} class="form-control" value={{key}}></input>
+                    <p class="errorMsg"></p>
+                </td >
+                <td  class="custom-col-0"> : </td >
+                <td  class="custom-col-1">
+                    <textarea placeholder="value"  data-type="value" data-index={{@index}} class="form-control" class="form-control">{{value}}</textarea>
+                    <p class="errorMsg"></p>
+                </td >
+                <td  class="custom-col-2">
+                    <button class="btn btn-default btn-sm" title=""  data-index={{@index}} data-id="deleteItem">
+                        <i class="fa fa-minus"> </i>
+                    </button>
+                    <button class="btn btn-default btn-sm" title="" data-index={{@index}} data-id="addItem">
+                        <i class="fa fa-plus"> </i>
+                    </button>
+                </td >
+            </tr>
+        {{/each}}
+        {{#ifCond items.length "===" 0}}
+            No properties have been created yet. To add a property, click <a href="javascript:void(0)" data-id="addItem">here</a>
+        {{/ifCond}}
+    </table>
+</div>
diff --git a/dashboardv3/public/js/templates/entity/EntityUserDefineView_tmpl.html b/dashboardv3/public/js/templates/entity/EntityUserDefineView_tmpl.html
new file mode 100644
index 0000000..e3f4791
--- /dev/null
+++ b/dashboardv3/public/js/templates/entity/EntityUserDefineView_tmpl.html
@@ -0,0 +1,65 @@
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+<div class="panel-group" id="accordion">
+    <div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="userDefine">
+        <div class="panel-heading" data-toggle="collapse" href="#collapse2" aria-expanded="true" {{#ifCond customAttibutes.length ">" 0}} style="width: 60%" {{else}} style="width: 100%" {{/ifCond}}>
+            <h4 class="panel-title">
+                <a>User-defined properties </a>
+            </h4>
+            <div class="btn-group pull-left">
+                <button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
+            </div>
+        </div>
+        {{#ifCond customAttibutes.length ">" 0}}
+            <div class="panel-actions">
+                {{#ifCond readOnlyEntity "===" false}}
+                    <button class="btn btn-action btn-sm"  data-id="editAttr" data-original-title="Edit User-Defined Attributes">Edit</button>
+                {{/ifCond}}
+            </div>
+        {{/ifCond}}
+        <div id="collapse2" class="panel-collapse collapse in">
+            <div class="panel-body">
+                    <div class="row">
+                        <div class="col-md-12">
+                            <div class="entity-detail-table">
+                                <table class="table">
+                                    {{#ifCond customAttibutes.length "===" 0}}
+                                        <span>No properties have been created yet.
+                                            {{#ifCond readOnlyEntity "==" false}}
+                                                <span>To add a property, click <a href="javascript:void(0)" data-id="editAttr">here</a></span>
+                                            {{/ifCond}}
+                                        </span>
+                                    {{/ifCond}}
+                                    <tbody>
+                                        {{#each customAttibutes}}
+                                            <tr>
+                                                <td>
+                                                    <div class="scroll-y">{{key}}</div>                                              </div></td>
+                                                <td>
+                                                    <div class="scroll-y">{{value}}</div>
+                                                </td>
+                                            </tr>
+                                        {{/each}}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/dashboardv3/public/js/views/detail_page/DetailPageLayoutView.js b/dashboardv3/public/js/views/detail_page/DetailPageLayoutView.js
index 682feb3..e1ab970 100644
--- a/dashboardv3/public/js/views/detail_page/DetailPageLayoutView.js
+++ b/dashboardv3/public/js/views/detail_page/DetailPageLayoutView.js
@@ -45,7 +45,8 @@ define(['require',
                 RAuditTableLayoutView: "#r_auditTableLayoutView",
                 RReplicationAuditTableLayoutView: "#r_replicationAuditTableLayoutView",
                 RProfileLayoutView: "#r_profileLayoutView",
-                RRelationshipLayoutView: "#r_relationshipLayoutView"
+                RRelationshipLayoutView: "#r_relationshipLayoutView",
+                REntityUserDefineView: "#r_entityUserDefineView",
             },
             /** ui selector cache */
             ui: {
@@ -249,6 +250,7 @@ define(['require',
                         })()
                     }
                     this.renderEntityDetailTableLayoutView(obj);
+                    this.renderEntityUserDefineView(obj);
                     this.renderRelationshipLayoutView(obj);
                     this.renderAuditTableLayoutView(obj);
                     this.renderTagTableLayoutView(obj);
@@ -496,6 +498,12 @@ define(['require',
                     that.REntityDetailTableLayoutView.show(new EntityDetailTableLayoutView(obj));
                 });
             },
+            renderEntityUserDefineView: function(obj) {
+                var that = this;
+                require(['views/entity/EntityUserDefineView'], function(EntityUserDefineView) {
+                    that.REntityUserDefineView.show(new EntityUserDefineView(obj));
+                });
+            },
             renderTagTableLayoutView: function(obj) {
                 var that = this;
                 require(['views/tag/TagDetailTableLayoutView'], function(TagDetailTableLayoutView) {
@@ -558,4 +566,4 @@ define(['require',
             }
         });
     return DetailPageLayoutView;
-});
\ No newline at end of file
+});
diff --git a/dashboardv3/public/js/views/entity/EntityDetailTableLayoutView.js b/dashboardv3/public/js/views/entity/EntityDetailTableLayoutView.js
index 381d99e..6572292 100644
--- a/dashboardv3/public/js/views/entity/EntityDetailTableLayoutView.js
+++ b/dashboardv3/public/js/views/entity/EntityDetailTableLayoutView.js
@@ -83,4 +83,4 @@ define(['require',
             }
         });
     return EntityDetailTableLayoutView;
-});
\ No newline at end of file
+});
diff --git a/dashboardv3/public/js/views/entity/EntityUserDefineItemView.js b/dashboardv3/public/js/views/entity/EntityUserDefineItemView.js
new file mode 100644
index 0000000..a649ca8
--- /dev/null
+++ b/dashboardv3/public/js/views/entity/EntityUserDefineItemView.js
@@ -0,0 +1,98 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+define(['require',
+    'backbone',
+    'hbs!tmpl/entity/EntityUserDefineItemView_tmpl'
+
+], function(require, Backbone, EntityUserDefineItemView_tmpl) {
+    'use strict';
+
+    return Backbone.Marionette.ItemView.extend({
+        _viewName: 'EntityUserDefineItemView',
+
+        template: EntityUserDefineItemView_tmpl,
+
+        templateHelpers: function() {
+            return {
+                items: this.items
+            };
+        },
+
+        /** Layout sub regions */
+        regions: {},
+
+        /** ui selector cache */
+        ui: {
+            itemKey: "[data-type='key']",
+            itemValue: "[data-type='value']",
+            addItem: "[data-id='addItem']",
+            deleteItem: "[data-id='deleteItem']"
+        },
+        /** ui events hash */
+        events: function() {
+            var events = {};
+            events['input ' + this.ui.itemKey] = 'onItemKeyChange';
+            events['input ' + this.ui.itemValue] = 'onItemValueChange';
+            events['click ' + this.ui.addItem] = 'onAddItemClick';
+            events['click ' + this.ui.deleteItem] = 'onDeleteItemClick';
+            return events;
+        },
+
+        /**
+         * intialize a new GlobalExclusionComponentView Layout
+         * @constructs
+         */
+        initialize: function(options) {
+            var that = this;
+            this.editMode = options.mode;
+            if (options.items.length === 0) {
+                this.items = [{ key: "", value: "", mode: this.editMode}];
+
+            } else {
+                this.items = options.items.map(function(m) {
+                    m.mode = that.editMode;
+                    return m;
+                });
+            }
+        },
+        onRender: function() {
+
+        },
+        onAddItemClick: function(e) {
+            var el = e.currentTarget;
+            this.items.splice(parseInt(el.dataset.index) + 1, 0, { key: "", value: "", mode: this.editMode});
+            this.render();
+        },
+        onDeleteItemClick: function(e) {
+            var el = e.currentTarget;
+            this.items.splice(el.dataset.index, 1);
+            this.render();
+        },
+        onItemKeyChange: function (e) {
+            var el = e.currentTarget;
+            var val = el.value;
+            this.items[ el.dataset.index].key = val;
+        },
+        onItemValueChange: function (e) {
+            var el = e.currentTarget;
+            var val = el.value;
+            this.items[ el.dataset.index].value = el.value;
+        }
+    });
+
+});
diff --git a/dashboardv3/public/js/views/entity/EntityUserDefineView.js b/dashboardv3/public/js/views/entity/EntityUserDefineView.js
new file mode 100644
index 0000000..4fc2f02
--- /dev/null
+++ b/dashboardv3/public/js/views/entity/EntityUserDefineView.js
@@ -0,0 +1,184 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+define(['require',
+'backbone',
+'hbs!tmpl/entity/EntityUserDefineView_tmpl',
+'views/entity/EntityUserDefineItemView',
+'utils/CommonViewFunction',
+'modules/Modal',
+'models/VEntity',
+'utils/Utils',
+'utils/Enums'
+], function(require, Backbone, EntityUserDefineView_tmpl, EntityUserDefineItemView, CommonViewFunction, Modal, VEntity, Utils, Enums) {
+'use strict';
+
+    return Backbone.Marionette.LayoutView.extend({
+        _viewName: 'EntityUserDefineView',
+        template: EntityUserDefineView_tmpl,
+        templateHelpers: function() {
+            return {
+                customAttibutes: this.customAttibutes,
+                readOnlyEntity : this.readOnlyEntity
+            };
+        },
+        ui: {
+            addAttr: "[data-id='addAttr']",
+            editAttr: "[data-id='editAttr']",
+            deleteAttr: "[data-id='deleteAttr']"
+        },
+        events: function() {
+            var events = {};
+            events["click " + this.ui.editAttr] = 'onEditAttrClick';
+            return events;
+        },
+        initialize: function(options) {
+            _.extend(this, _.pick(options, 'entity'));
+            this.userDefineAttr = this.entity.customAttributes || [];
+            this.editMode = false;
+            this.readOnlyEntity = Enums.entityStateReadOnly[this.entity.status];
+            this.entityModel = new VEntity(this.entity);
+            this.generateTableFields();
+        },
+        onRender: function() {
+        },
+        bindEvents: {},
+        customAtributesFunc: function() {
+
+        },
+        generateTableFields: function() {
+            var that = this;
+            this.customAttibutes = [];
+            _.each(Object.keys(that.userDefineAttr), function(key, i) {
+                that.customAttibutes.push({
+                    key: key,
+                    value: that.userDefineAttr[key]
+                });
+            });
+        },
+        onEditAttrClick: function (e) {
+            this.editMode = true;
+            var options = {items: this.customAttibutes, mode: true};
+            var view = new EntityUserDefineItemView(options);
+            var modalObj = {
+                title: 'User-Defined Attributes',
+                content: view,
+                okText: 'Save',
+                okCloses: false,
+                cancelText: "Cancel",
+                mainClass: 'modal-lg',
+                allowCancel: true,
+            };
+           this.setAttributeModal(modalObj);
+        },
+        structureAttributes: function (list) {
+            var obj={}
+            list.map(function (o) {
+                obj[o.key] = o.value;
+            });
+            return obj;
+        },
+        saveAttributes: function (list) {
+            var that = this;
+            var entityJson = that.entityModel.toJSON();
+            var properties = that.structureAttributes(list);
+            entityJson.customAttributes = properties;
+            var payload = {entity: entityJson};
+            that.entityModel.createOreditEntity({
+                data: JSON.stringify(payload),
+                type: 'POST',
+                success: function() {
+                    var msg = "User-defined attribute(s) updated successfully";
+                    that.customAttibutes = list;
+                    Utils.notifySuccess({
+                        content: msg
+                    });
+                    that.modal && that.modal.trigger('cancel');
+                    that.render();
+                },
+                error: function (e) {
+                    that.editMode = false;
+                    Utils.notifySuccess({
+                        content: e.message
+                    });
+                    that.modal && that.modal.$el.find('button.ok').attr("disabled", false);
+                },
+                complete: function () {
+                    that.modal && that.modal.$el.find('button.ok').attr("disabled", false);
+                    that.editMode = false;
+                }
+            });
+        },
+        setAttributeModal: function(modalObj) {
+            var self = this;
+            this.modal = new Modal(modalObj);
+            this.modal.open();
+            this. modal.on('ok', function() {
+                self.modal.$el.find('button.ok').attr("disabled", true);
+                var list = self.modal.$el.find("[data-type]"),
+                    keyMap = new Map(),
+                    validation = true,
+                    hasDup = [],
+                    dataList = [];
+                Array.prototype.push.apply(dataList, self.modal.options.content.items);
+                for(var i = 0; i < list.length ; i++) {
+                    var input = list[i],
+                        type = input.dataset.type,
+                        pEl = self.modal.$el.find(input.parentElement).find('p'),
+                        classes = 'form-control',
+                        val = input.value.trim();
+                        pEl[0].innerText = "";
+
+                    if (val === '') {
+                        classes = 'form-control errorClass';
+                        validation = false;
+                        pEl[0].innerText = 'Required!';
+                    } else {
+                        if (input.tagName === 'INPUT') {
+                            var duplicates = dataList.filter(function(c) {
+                                return c.key === val;
+                            });
+                            if (keyMap.has(val) || duplicates.length > 1 ) {
+                                classes = 'form-control errorClass';
+                                hasDup.push('duplicate');
+                                pEl[0].innerText = 'Duplicate key';
+                            } else {
+                                keyMap.set(val, val);
+                            }
+                        }
+                    }
+                    input.setAttribute('class', classes);
+                }
+
+                if (validation && hasDup.length === 0) {
+                    self.saveAttributes(self.modal.options.content.items);
+                } else {
+                    self.modal.$el.find('button.ok').attr("disabled", false);
+                }
+            });
+            this.modal.on('closeModal', function() {
+                self.editMode = false;
+                self.modal.trigger('cancel');
+            });
+        },
+        enableModalButton: function () {
+            var self = this;
+            self.modal.$el.find('button.ok').attr("disabled", false);
+        }
+    });
+});
-- 
2.7.4