You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@atlas.apache.org by sa...@apache.org on 2019/10/11 15:23:14 UTC

[atlas] branch master updated: ATLAS-3460: Remove modal of 'User-defined properties' in entity details page.

This is an automated email from the ASF dual-hosted git repository.

sarath pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/atlas.git


The following commit(s) were added to refs/heads/master by this push:
     new 7585894  ATLAS-3460: Remove modal of 'User-defined properties' in entity details page.
7585894 is described below

commit 75858947f5a26f8760872dc7449724c12f750671
Author: sameer79 <fi...@yahoo.co.in>
AuthorDate: Fri Oct 11 19:17:10 2019 +0530

    ATLAS-3460: Remove modal of 'User-defined properties' in entity details page.
    
    Signed-off-by: Sarath Subramanian <sa...@apache.org>
---
 dashboardv2/public/css/scss/common.scss            |  11 +-
 dashboardv2/public/css/scss/override.scss          |   2 +-
 .../detail_page/DetailPageLayoutView_tmpl.html     |   2 +-
 .../entity/EntityDetailTableLayoutView_tmpl.html   |   9 +-
 .../entity/EntityLabelDefineView_tmpl.html         |   4 +-
 .../entity/EntityUserDefineItemView_tmpl.html      |  55 ++++---
 .../entity/EntityUserDefineView_tmpl.html          | 136 +++++++++++------
 .../js/views/detail_page/DetailPageLayoutView.js   |  30 +---
 .../js/views/entity/EntityDetailTableLayoutView.js |  32 +++-
 .../js/views/entity/EntityLabelDefineView.js       |  58 ++++----
 .../public/js/views/entity/EntityUserDefineView.js | 161 +++++++++++----------
 dashboardv3/public/css/scss/common.scss            |  11 +-
 dashboardv3/public/css/scss/override.scss          |   4 +-
 .../detail_page/DetailPageLayoutView_tmpl.html     |   2 +-
 .../entity/EntityDetailTableLayoutView_tmpl.html   |   9 +-
 .../entity/EntityLabelDefineView_tmpl.html         |   4 +-
 .../entity/EntityUserDefineItemView_tmpl.html      |  55 ++++---
 .../entity/EntityUserDefineView_tmpl.html          | 141 +++++++++++-------
 .../js/views/detail_page/DetailPageLayoutView.js   |  31 +---
 .../js/views/entity/EntityDetailTableLayoutView.js |  32 +++-
 .../js/views/entity/EntityLabelDefineView.js       |  58 ++++----
 .../public/js/views/entity/EntityUserDefineView.js | 161 +++++++++++----------
 22 files changed, 556 insertions(+), 452 deletions(-)

diff --git a/dashboardv2/public/css/scss/common.scss b/dashboardv2/public/css/scss/common.scss
index 6fbef88..70fa5b8 100644
--- a/dashboardv2/public/css/scss/common.scss
+++ b/dashboardv2/public/css/scss/common.scss
@@ -229,17 +229,17 @@ pre {
             text-align: center;
             vertical-align: middle;
             line-height: 31px;
-            width: 2%;
+            width: 3%;
         }
 
         .custom-col-1{
-            width: 40%;
+            width: 38%;
         }
 
         .custom-col-2{
             text-align: center;
-            width: 12%;
-            margin-left: 2%;
+            width: 17%;
+            margin-left: 1%;
         }
     }
 }
@@ -253,4 +253,7 @@ pre {
     color: $white;
     font-size: 12px;
     font-weight: normal;
+    margin-bottom: 5px;
+    margin-left: 5px;
+    float: left;
 }
diff --git a/dashboardv2/public/css/scss/override.scss b/dashboardv2/public/css/scss/override.scss
index c95ee58..6f4a8f1 100644
--- a/dashboardv2/public/css/scss/override.scss
+++ b/dashboardv2/public/css/scss/override.scss
@@ -215,7 +215,7 @@ td {
 
 .select2-container--default .select2-search--inline .select2-search__field {
     color: #555;
-    width: 300px !important;
+    // width: 300px !important;
 }
 
 .typeLOV {
diff --git a/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html b/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
index cbd222c..688fb5f 100644
--- a/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
@@ -23,7 +23,7 @@
             <div data-id="entityIcon" class="entity-icon-box position-relative"></div>
             <span data-id="title"></span>
         </h1> {{#if entityUpdate}}
-        <div data-id="editButtonContainer" class="pull-right"></div>
+        <!-- <div data-id="editButtonContainer" class="pull-right"></div> -->
         {{/if}}
         <div class="form-group">
             <span class="control-label-sm-pr pull-left">Classifications:</span>
diff --git a/dashboardv2/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html b/dashboardv2/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html
index 18a9435..6e84ef9 100644
--- a/dashboardv2/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html
+++ b/dashboardv2/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html
@@ -25,12 +25,15 @@
             </div>
         </div>
         <div class="panel-actions">
-            <div class="pretty p-switch p-fill">
-                <input type="checkbox" data-id="noValueToggle" />
+            <div class="pretty p-switch p-fill" style="margin-right: 20px">
+                <input type="checkbox" data-id="noValueToggle" title="Show Empty Values"/>
                 <div class="state p-primary">
-                    <label>Show Empty Values</label>
+                    <label></label>
                 </div>
             </div>
+            {{#ifCond editEntity "===" true}}
+                <button data-id="editButton" title="Edit Entity" class="btn btn-action btn-sm pull-right">Edit</button>
+            {{/ifCond}}
         </div>
         <div id="collapse1" class="panel-collapse collapse in">
             <div class="panel-body">
diff --git a/dashboardv2/public/js/templates/entity/EntityLabelDefineView_tmpl.html b/dashboardv2/public/js/templates/entity/EntityLabelDefineView_tmpl.html
index 06d7e0e..9914299 100644
--- a/dashboardv2/public/js/templates/entity/EntityLabelDefineView_tmpl.html
+++ b/dashboardv2/public/js/templates/entity/EntityLabelDefineView_tmpl.html
@@ -28,7 +28,7 @@
                 </div>
             </div>
         {{else}}
-            <div class="panel-heading" data-toggle="collapse" href="#collapse3" aria-expanded="true" style="width: 70%">
+            <div class="panel-heading" data-toggle="collapse" href="#collapse4" aria-expanded="true" style="width: 70%">
                 <h4 class="panel-title">
                     <a>Labels </a>
                 </h4>
@@ -73,7 +73,7 @@
         </div>
 
         {{#ifCond labels.length ">" 0}}
-            <div id="collapse3" class="panel-collapse collapse in" >
+            <div id="collapse4" class="panel-collapse collapse in" >
                 <div class="panel-body">
                         <div class="row">
                             <div class="col-md-12">
diff --git a/dashboardv2/public/js/templates/entity/EntityUserDefineItemView_tmpl.html b/dashboardv2/public/js/templates/entity/EntityUserDefineItemView_tmpl.html
index a06039f..2bd366a 100644
--- a/dashboardv2/public/js/templates/entity/EntityUserDefineItemView_tmpl.html
+++ b/dashboardv2/public/js/templates/entity/EntityUserDefineItemView_tmpl.html
@@ -15,31 +15,30 @@
  * 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>
+
+<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}}
+        All properties have been removed. To add a new property, click <a href="javascript:void(0)" data-id="addItem">here</a>
+    {{/ifCond}}
+</table>
diff --git a/dashboardv2/public/js/templates/entity/EntityUserDefineView_tmpl.html b/dashboardv2/public/js/templates/entity/EntityUserDefineView_tmpl.html
index 4f704a5..e3a2598 100644
--- a/dashboardv2/public/js/templates/entity/EntityUserDefineView_tmpl.html
+++ b/dashboardv2/public/js/templates/entity/EntityUserDefineView_tmpl.html
@@ -15,59 +15,101 @@
  * limitations under the License.
 -->
 <div class="panel-group" id="accordion">
-    <div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="userDefine">
-        {{#ifCond customAttibutes.length "===" 0}}
-            <div class="panel-heading collapsed" data-toggle="collapse" href="#collapse2" aria-expanded="false" style="width: 70%">
-                <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 class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="userDefine">
+            {{#ifCond customAttibutes.length "===" 0}}
+                <div class="panel-heading collapsed" data-toggle="collapse" href="#collapse22" aria-expanded="false" style="width: 70%">
+                    <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>
-            </div>
-            <div class="panel-actions">
-                {{#ifCond readOnlyEntity "===" false}}
-                    <button class="btn btn-action btn-sm"  data-id="editAttr" data-original-title="Add User-Defined"> Add</button>
-                {{/ifCond}}
-            </div>
-        {{else}}
-            <div class="panel-heading" data-toggle="collapse" href="#collapse2" aria-expanded="true" style="width: 60%">
-                <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>
+            {{else}}
+                <div class="panel-heading" data-toggle="collapse" href="#collapse44" aria-expanded="true" style="width: 70%">
+                    <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>
-            </div>
-            <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}}
+
+            {{#ifCond readOnlyEntity "===" false}}
+                <div class="panel-actions">
+                        {{#ifCond  swapItem "!==" true}}
+                            <button class="btn btn-action btn-sm"  data-id="addAttr" {{#ifCond customAttibutes.length "===" 0}} data-original-title="Add User-defined properties" {{else}} data-original-title="Edit User-defined properties"  {{/ifCond}}>
+                                {{#ifCond customAttibutes.length "===" 0}} Add {{else}} Edit {{/ifCond}}
+                            </button>
+                        {{/ifCond}}
+                        {{#ifCond saveAttrItems "===" true}}
+                            <button class="btn btn-action btn-sm"  data-id="saveAttrItems"  data-original-title="Save User-defined properties">Save</button>
+                        {{/ifCond}}
+                </div>
+            {{/ifCond}}
+
+            <div id="collapse22" {{#ifCond swapItem "===" false}} class="panel-collapse collapse" {{else}} class="panel-collapse collapse in" {{/ifCond}}>
+                {{#ifCond customAttibutes.length "===" 0}}
+                    <div class="panel-body">
+                            <div class="row">
+                                <div class="col-md-12">
+                                    {{#ifCond swapItem "===" true}}
+                                        <div id="r_entityUserDefinedItemView"></div>
+                                    {{else}}
+                                    <div class="entity-detail-table">
+                                        <table class="table">
+                                            <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>
+                                    {{/ifCond}}
+                                </div>
+                            </div>
+                    </div>
                 {{/ifCond}}
             </div>
-        {{/ifCond}}
 
-        <div id="collapse2" {{#ifCond customAttibutes.length "===" 0}} class="panel-collapse collapse" {{else}} class="panel-collapse collapse in" {{/ifCond}} >
-            <div class="panel-body">
-                    <div class="row">
-                        <div class="col-md-12">
-                            <div class="entity-detail-table">
-                                <table class="table">
-                                    <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>
+            {{#ifCond customAttibutes.length ">" 0}}
+                <div id="collapse44" class="panel-collapse collapse in" >
+                    <div class="panel-body">
+                            <div class="row">
+                                <div class="col-md-12">
+                                    {{#ifCond swapItem "===" true}}
+                                        <div id="r_entityUserDefinedItemView"></div>
+                                    {{else}}
+                                    <div class="entity-detail-table">
+                                        <table class="table">
+                                            <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>
+                                    {{/ifCond}}
+                                </div>
                             </div>
-                        </div>
                     </div>
-            </div>
+                </div>
+            {{/ifCond}}
+
         </div>
     </div>
-</div>
diff --git a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
index 771fac3..ef3f115 100644
--- a/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
+++ b/dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js
@@ -19,14 +19,13 @@
 define(['require',
     'backbone',
     'hbs!tmpl/detail_page/DetailPageLayoutView_tmpl',
-    'hbs!tmpl/common/buttons_tmpl',
     'utils/Utils',
     'utils/CommonViewFunction',
     'utils/Globals',
     'utils/Enums',
     'utils/Messages',
     'utils/UrlLinks'
-], function(require, Backbone, DetailPageLayoutViewTmpl, ButtonsTmpl, Utils, CommonViewFunction, Globals, Enums, Messages, UrlLinks) {
+], function(require, Backbone, DetailPageLayoutViewTmpl, Utils, CommonViewFunction, Globals, Enums, Messages, UrlLinks) {
     'use strict';
 
     var DetailPageLayoutView = Backbone.Marionette.LayoutView.extend(
@@ -55,8 +54,6 @@ define(['require',
                 termClick: '[data-id="termClick"]',
                 propagatedTagDiv: '[data-id="propagatedTagDiv"]',
                 title: '[data-id="title"]',
-                editButton: '[data-id="editButton"]',
-                editButtonContainer: '[data-id="editButtonContainer"]',
                 description: '[data-id="description"]',
                 editBox: '[data-id="editBox"]',
                 deleteTag: '[data-id="deleteTag"]',
@@ -77,7 +74,6 @@ define(['require',
             /** ui events hash */
             events: function() {
                 var events = {};
-                events["click " + this.ui.editButton] = 'onClickEditEntity';
                 events["click " + this.ui.tagClick] = function(e) {
                     if (e.target.nodeName.toLocaleLowerCase() != "i") {
                         Utils.setUrl({
@@ -219,10 +215,10 @@ define(['require',
                             this.generateTerm(collectionJSON.relationshipAttributes.meanings);
                         }
                         if (Globals.entityTypeConfList && _.isEmptyArray(Globals.entityTypeConfList)) {
-                            this.ui.editButtonContainer.html(ButtonsTmpl({ btn_edit: true }));
+                            this.editEntity = true;
                         } else {
                             if (_.contains(Globals.entityTypeConfList, collectionJSON.typeName)) {
-                                this.ui.editButtonContainer.html(ButtonsTmpl({ btn_edit: true }));
+                                this.editEntity = true;
                             }
                         }
                         if (collectionJSON.attributes && collectionJSON.attributes.columns) {
@@ -245,7 +241,8 @@ define(['require',
                         glossaryCollection: this.glossaryCollection,
                         attributeDefs: (function() {
                             return that.getEntityDef(collectionJSON);
-                        })()
+                        })(),
+                        editEntity: this.editEntity || false
                     }
                     this.renderEntityDetailTableLayoutView(obj);
                     this.renderEntityUserDefineView(obj);
@@ -544,23 +541,6 @@ define(['require',
                 require(['views/profile/ProfileLayoutView'], function(ProfileLayoutView) {
                     that.RProfileLayoutView.show(new ProfileLayoutView(obj));
                 });
-            },
-            onClickEditEntity: function(e) {
-                var that = this;
-                $(e.currentTarget).blur();
-                require([
-                    'views/entity/CreateEntityLayoutView'
-                ], function(CreateEntityLayoutView) {
-                    var view = new CreateEntityLayoutView({
-                        guid: that.id,
-                        entityDefCollection: that.entityDefCollection,
-                        typeHeaders: that.typeHeaders,
-                        callback: function() {
-                            that.fetchCollection();
-                        }
-                    });
-
-                });
             }
         });
     return DetailPageLayoutView;
diff --git a/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js b/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js
index 381d99e..6c0561c 100644
--- a/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js
+++ b/dashboardv2/public/js/views/entity/EntityDetailTableLayoutView.js
@@ -32,13 +32,20 @@ define(['require',
 
             template: EntityDetailTableLayoutView_tmpl,
 
+            templateHelpers: function() {
+                return {
+                    editEntity: this.editEntity
+                };
+            },
+
             /** Layout sub regions */
             regions: {},
 
             /** ui selector cache */
             ui: {
                 detailValue: "[data-id='detailValue']",
-                noValueToggle: "[data-id='noValueToggle']"
+                noValueToggle: "[data-id='noValueToggle']",
+                editButton: '[data-id="editButton"]',
             },
             /** ui events hash */
             events: function() {
@@ -49,6 +56,7 @@ define(['require',
                         "tableEl": this.ui.detailValue
                     });
                 };
+                events["click " + this.ui.editButton] = 'onClickEditEntity';
                 return events;
             },
             /**
@@ -56,7 +64,7 @@ define(['require',
              * @constructs
              */
             initialize: function(options) {
-                _.extend(this, _.pick(options, 'entity', 'typeHeaders', 'attributeDefs', 'attributes'));
+                _.extend(this, _.pick(options, 'entity', 'typeHeaders', 'attributeDefs', 'attributes', 'editEntity', 'guid', 'entityDefCollection', 'searchVent', 'fetchCollection'));
                 this.entityModel = new VEntity({});
             },
             bindEvents: function() {},
@@ -80,7 +88,25 @@ define(['require',
                 setTimeout(function() {
                     that.$el.find(".searched-term-highlight").addClass("bold");
                 }, 5000)
+            },
+            onClickEditEntity: function(e) {
+                var that = this;
+                $(e.currentTarget).blur();
+                require([
+                    'views/entity/CreateEntityLayoutView'
+                ], function(CreateEntityLayoutView) {
+                    var view = new CreateEntityLayoutView({
+                        guid: that.guid,
+                        searchVent: that.searchVent,
+                        entityDefCollection: that.entityDefCollection,
+                        typeHeaders: that.typeHeaders,
+                        callback: function() {
+                            that.fetchCollection();
+                        }
+                    });
+
+                });
             }
         });
     return EntityDetailTableLayoutView;
-});
\ No newline at end of file
+});
diff --git a/dashboardv2/public/js/views/entity/EntityLabelDefineView.js b/dashboardv2/public/js/views/entity/EntityLabelDefineView.js
index d69b277..e3105e4 100644
--- a/dashboardv2/public/js/views/entity/EntityLabelDefineView.js
+++ b/dashboardv2/public/js/views/entity/EntityLabelDefineView.js
@@ -86,35 +86,37 @@ define(['require',
         saveUserDefinedLabels: function() {
             var that = this;
             var entityJson = that.entityModel.toJSON();
-            var payload = this.labels;
-            that.entityModel.saveEntityLabels(entityJson.guid ,{
-                data: JSON.stringify(payload),
-                type: 'POST',
-                success: function() {
-                    var msg = entityJson.labels === undefined ? 'addSuccessMessage' : 'editSuccessMessage';
-                    if (payload.length === 0) {
-                        that.entityModel.unset('labels');
-                    } else {
-                        that.entityModel.set('labels', payload);
+            if (entityJson.labels !== undefined || this.labels.length !== 0) {
+                var payload = this.labels;
+                that.entityModel.saveEntityLabels(entityJson.guid ,{
+                    data: JSON.stringify(payload),
+                    type: 'POST',
+                    success: function() {
+                        var msg = entityJson.labels === undefined ? 'addSuccessMessage' : 'editSuccessMessage';
+                        if (payload.length === 0) {
+                            that.entityModel.unset('labels');
+                        } else {
+                            that.entityModel.set('labels', payload);
+                        }
+                        Utils.notifySuccess({
+                            content: "Labels " + Messages[msg]
+                        });
+                        that.swapItem = false;
+                        that.saveLabels = false;
+                        that.render();
+                    },
+                    error: function (e) {
+                        that.ui.saveLabels.attr("disabled", false);
+                        Utils.notifySuccess({
+                            content: e.message
+                        });
+                    },
+                    complete: function () {
+                        that.ui.saveLabels.attr("disabled", false);
+                        that.render();
                     }
-                    Utils.notifySuccess({
-                        content: "User-defined labels " + Messages[msg]
-                    });
-                    that.swapItem = false;
-                    that.saveLabels = false;
-                    that.render();
-                },
-                error: function (e) {
-                    that.ui.saveLabels && that.ui.saveLabels.length > 0 &&  that.ui.saveLabels[0].setAttribute("disabled", false);
-                    Utils.notifySuccess({
-                        content: e.message
-                    });
-                },
-                complete: function () {
-                    that.ui.saveLabels && that.ui.saveLabels.length > 0 && that.ui.saveLabels[0].setAttribute("disabled", false);
-                    that.render();
-                }
-            });
+                });
+            }
         }
     });
 });
diff --git a/dashboardv2/public/js/views/entity/EntityUserDefineView.js b/dashboardv2/public/js/views/entity/EntityUserDefineView.js
index a23a8fa..0560f98 100644
--- a/dashboardv2/public/js/views/entity/EntityUserDefineView.js
+++ b/dashboardv2/public/js/views/entity/EntityUserDefineView.js
@@ -19,13 +19,11 @@
 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) {
+'utils/Enums',
+'utils/Messages'
+], function(require, Backbone, EntityUserDefineView_tmpl, VEntity, Utils, Enums, Messages) {
 'use strict';
 
     return Backbone.Marionette.LayoutView.extend({
@@ -34,32 +32,57 @@ define(['require',
         templateHelpers: function() {
             return {
                 customAttibutes: this.customAttibutes,
-                readOnlyEntity : this.readOnlyEntity
+                readOnlyEntity : this.readOnlyEntity,
+                swapItem: this.swapItem,
+                saveAttrItems: this.saveAttrItems
             };
         },
         ui: {
             addAttr: "[data-id='addAttr']",
             editAttr: "[data-id='editAttr']",
-            deleteAttr: "[data-id='deleteAttr']"
+            saveAttrItems: "[data-id='saveAttrItems']"
         },
         events: function() {
             var events = {};
+            events["click " + this.ui.addAttr] = 'onAddAttrClick';
             events["click " + this.ui.editAttr] = 'onEditAttrClick';
+            events["click " + this.ui.saveAttrItems] = 'onEditAttrClick';
             return events;
         },
         initialize: function(options) {
             _.extend(this, _.pick(options, 'entity'));
             this.userDefineAttr = this.entity.customAttributes || [];
-            this.editMode = false;
+            this.initialCall = false;
+            this.swapItem = false, this.saveAttrItems = false;
             this.readOnlyEntity = Enums.entityStateReadOnly[this.entity.status];
             this.entityModel = new VEntity(this.entity);
             this.generateTableFields();
         },
         onRender: function() {
         },
-        bindEvents: {},
-        customAtributesFunc: function() {
+        renderEntityUserDefinedItems: function() {
+            var that = this;
 
+            require(['views/entity/EntityUserDefineItemView'], function(EntityUserDefineItemView) {
+                that.itemView = new EntityUserDefineItemView({items: that.customAttibutes});
+                that.REntityUserDefinedItemView.show(that.itemView);
+            });
+        },
+        bindEvents: {},
+        addChildRegion: function() {
+            this.addRegions({
+                REntityUserDefinedItemView: "#r_entityUserDefinedItemView"
+            });
+            this.renderEntityUserDefinedItems();
+        },
+        onAddAttrClick: function() {
+            this.swapItem = !this.swapItem;
+            this.saveAttrItems = this.swapItem === true ? true : false;
+            this.initialCall = true;
+            this.render();
+            if (this.swapItem === true) {
+                this.addChildRegion();
+            }
         },
         generateTableFields: function() {
             var that = this;
@@ -71,20 +94,9 @@ define(['require',
                 });
             });
         },
-        onEditAttrClick: function (e) {
-            this.editMode = true;
-            var options = {items: this.customAttibutes, mode: true};
-            var view = new EntityUserDefineItemView(options);
-            var modalObj = {
-                title: 'User-defined properties',
-                content: view,
-                okText: 'Save',
-                okCloses: false,
-                cancelText: "Cancel",
-                mainClass: 'modal-md',
-                allowCancel: true,
-            };
-           this.setAttributeModal(modalObj);
+        onEditAttrClick: function () {
+            this.initialCall = false;
+            this.setAttributeModal(this.itemView);
         },
         structureAttributes: function (list) {
             var obj={}
@@ -103,82 +115,71 @@ define(['require',
                 data: JSON.stringify(payload),
                 type: 'POST',
                 success: function() {
-                    var msg = "User-defined properties updated successfully";
+                    var msg = that.initialCall ? 'addSuccessMessage' : 'editSuccessMessage';
                     that.customAttibutes = list;
                     Utils.notifySuccess({
-                        content: msg
+                        content: "User-defined properties " + Messages[msg]
                     });
-                    that.modal && that.modal.trigger('cancel');
+                    that.swapItem = false;
+                    that.saveAttrItems = false;
                     that.render();
                 },
                 error: function (e) {
-                    that.editMode = false;
+                    that.initialCall = false;
                     Utils.notifySuccess({
                         content: e.message
                     });
-                    that.modal && that.modal.$el.find('button.ok').attr("disabled", false);
+                    that.ui.saveAttrItems.attr("disabled", false);
                 },
                 complete: function () {
-                    that.modal && that.modal.$el.find('button.ok').attr("disabled", false);
-                    that.editMode = false;
+                    that.ui.saveAttrItems.attr("disabled", false);
+                    that.initialCall = false;
                 }
             });
         },
-        setAttributeModal: function(modalObj) {
+        setAttributeModal: function(itemView) {
             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 = "";
+            this.ui.saveAttrItems.attr("disabled", true);
+            var list = itemView.$el.find("[data-type]"),
+                keyMap = new Map(),
+                validation = true,
+                hasDup = [],
+                dataList = [];
+            Array.prototype.push.apply(dataList, itemView.items);
+            for(var i = 0; i < list.length ; i++) {
+                var input = list[i],
+                    type = input.dataset.type,
+                    pEl = itemView.$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);
-                            }
+                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);
                 }
+                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);
+            if (validation && hasDup.length === 0) {
+                self.saveAttributes(itemView.items);
+            } else {
+                this.ui.saveAttrItems.attr("disabled", false);
+            }
         }
     });
 });
diff --git a/dashboardv3/public/css/scss/common.scss b/dashboardv3/public/css/scss/common.scss
index 24231d1..32da183 100644
--- a/dashboardv3/public/css/scss/common.scss
+++ b/dashboardv3/public/css/scss/common.scss
@@ -228,17 +228,17 @@ pre {
             text-align: center;
             vertical-align: middle;
             line-height: 31px;
-            width: 2%;
+            width: 3%;
         }
 
         .custom-col-1{
-            width: 40%;
+            width: 38%;
         }
 
         .custom-col-2{
             text-align: center;
-            width: 12%;
-            margin-left: 2%;
+            width: 17%;
+            margin-left: 1%;
         }
     }
 }
@@ -252,4 +252,7 @@ pre {
     color: $white;
     font-size: 12px;
     font-weight: normal;
+    margin-bottom: 5px;
+    margin-left: 5px;
+    float: left;
 }
diff --git a/dashboardv3/public/css/scss/override.scss b/dashboardv3/public/css/scss/override.scss
index c580a48..9061fd6 100644
--- a/dashboardv3/public/css/scss/override.scss
+++ b/dashboardv3/public/css/scss/override.scss
@@ -167,7 +167,7 @@
 
 .select2-container--default .select2-search--inline .select2-search__field {
     color: #555;
-    width: 300px !important;
+    // width: 300px !important;
 }
 
 .typeLOV {
@@ -426,4 +426,4 @@ div.columnmanager-dropdown-container {
 
 .query-builder .error-container {
     cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/dashboardv3/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html b/dashboardv3/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
index 25f04d9..5156630 100644
--- a/dashboardv3/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
+++ b/dashboardv3/public/js/templates/detail_page/DetailPageLayoutView_tmpl.html
@@ -26,7 +26,7 @@
             <div data-id="entityIcon" class="entity-icon-box position-relative"></div>
             <span data-id="title"></span>
         </h1> {{#if entityUpdate}}
-        <div data-id="editButtonContainer" class="pull-right"></div>
+        <!-- <div data-id="editButtonContainer" class="pull-right"></div> -->
         {{/if}}
         <div class="form-group col-md-12">
             <span class="control-label-sm-pr pull-left">Classifications:</span>
diff --git a/dashboardv3/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html b/dashboardv3/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html
index 18a9435..6e84ef9 100644
--- a/dashboardv3/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html
+++ b/dashboardv3/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html
@@ -25,12 +25,15 @@
             </div>
         </div>
         <div class="panel-actions">
-            <div class="pretty p-switch p-fill">
-                <input type="checkbox" data-id="noValueToggle" />
+            <div class="pretty p-switch p-fill" style="margin-right: 20px">
+                <input type="checkbox" data-id="noValueToggle" title="Show Empty Values"/>
                 <div class="state p-primary">
-                    <label>Show Empty Values</label>
+                    <label></label>
                 </div>
             </div>
+            {{#ifCond editEntity "===" true}}
+                <button data-id="editButton" title="Edit Entity" class="btn btn-action btn-sm pull-right">Edit</button>
+            {{/ifCond}}
         </div>
         <div id="collapse1" class="panel-collapse collapse in">
             <div class="panel-body">
diff --git a/dashboardv3/public/js/templates/entity/EntityLabelDefineView_tmpl.html b/dashboardv3/public/js/templates/entity/EntityLabelDefineView_tmpl.html
index 06d7e0e..9914299 100644
--- a/dashboardv3/public/js/templates/entity/EntityLabelDefineView_tmpl.html
+++ b/dashboardv3/public/js/templates/entity/EntityLabelDefineView_tmpl.html
@@ -28,7 +28,7 @@
                 </div>
             </div>
         {{else}}
-            <div class="panel-heading" data-toggle="collapse" href="#collapse3" aria-expanded="true" style="width: 70%">
+            <div class="panel-heading" data-toggle="collapse" href="#collapse4" aria-expanded="true" style="width: 70%">
                 <h4 class="panel-title">
                     <a>Labels </a>
                 </h4>
@@ -73,7 +73,7 @@
         </div>
 
         {{#ifCond labels.length ">" 0}}
-            <div id="collapse3" class="panel-collapse collapse in" >
+            <div id="collapse4" class="panel-collapse collapse in" >
                 <div class="panel-body">
                         <div class="row">
                             <div class="col-md-12">
diff --git a/dashboardv3/public/js/templates/entity/EntityUserDefineItemView_tmpl.html b/dashboardv3/public/js/templates/entity/EntityUserDefineItemView_tmpl.html
index a06039f..2bd366a 100644
--- a/dashboardv3/public/js/templates/entity/EntityUserDefineItemView_tmpl.html
+++ b/dashboardv3/public/js/templates/entity/EntityUserDefineItemView_tmpl.html
@@ -15,31 +15,30 @@
  * 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>
+
+<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}}
+        All properties have been removed. To add a new property, click <a href="javascript:void(0)" data-id="addItem">here</a>
+    {{/ifCond}}
+</table>
diff --git a/dashboardv3/public/js/templates/entity/EntityUserDefineView_tmpl.html b/dashboardv3/public/js/templates/entity/EntityUserDefineView_tmpl.html
index 5dee81d..e3a2598 100644
--- a/dashboardv3/public/js/templates/entity/EntityUserDefineView_tmpl.html
+++ b/dashboardv3/public/js/templates/entity/EntityUserDefineView_tmpl.html
@@ -15,66 +15,101 @@
  * limitations under the License.
 -->
 <div class="panel-group" id="accordion">
-    <div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="userDefine">
-        {{#ifCond customAttibutes.length "===" 0}}
-            <div class="panel-heading collapsed" data-toggle="collapse" href="#collapse2" aria-expanded="false" style="width: 70%">
-                <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 class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="userDefine">
+            {{#ifCond customAttibutes.length "===" 0}}
+                <div class="panel-heading collapsed" data-toggle="collapse" href="#collapse22" aria-expanded="false" style="width: 70%">
+                    <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>
-            </div>
-            <div class="panel-actions">
-                {{#ifCond readOnlyEntity "===" false}}
-                    <button class="btn btn-action btn-sm"  data-id="editAttr" data-original-title="Add User-Defined"> Add</button>
-                {{/ifCond}}
-            </div>
-        {{else}}
-            <div class="panel-heading" data-toggle="collapse" href="#collapse2" aria-expanded="true" style="width: 60%">
-                <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>
+            {{else}}
+                <div class="panel-heading" data-toggle="collapse" href="#collapse44" aria-expanded="true" style="width: 70%">
+                    <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>
-            </div>
-            <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}}
+
+            {{#ifCond readOnlyEntity "===" false}}
+                <div class="panel-actions">
+                        {{#ifCond  swapItem "!==" true}}
+                            <button class="btn btn-action btn-sm"  data-id="addAttr" {{#ifCond customAttibutes.length "===" 0}} data-original-title="Add User-defined properties" {{else}} data-original-title="Edit User-defined properties"  {{/ifCond}}>
+                                {{#ifCond customAttibutes.length "===" 0}} Add {{else}} Edit {{/ifCond}}
+                            </button>
+                        {{/ifCond}}
+                        {{#ifCond saveAttrItems "===" true}}
+                            <button class="btn btn-action btn-sm"  data-id="saveAttrItems"  data-original-title="Save User-defined properties">Save</button>
+                        {{/ifCond}}
+                </div>
+            {{/ifCond}}
+
+            <div id="collapse22" {{#ifCond swapItem "===" false}} class="panel-collapse collapse" {{else}} class="panel-collapse collapse in" {{/ifCond}}>
+                {{#ifCond customAttibutes.length "===" 0}}
+                    <div class="panel-body">
+                            <div class="row">
+                                <div class="col-md-12">
+                                    {{#ifCond swapItem "===" true}}
+                                        <div id="r_entityUserDefinedItemView"></div>
+                                    {{else}}
+                                    <div class="entity-detail-table">
+                                        <table class="table">
+                                            <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>
+                                    {{/ifCond}}
+                                </div>
+                            </div>
+                    </div>
                 {{/ifCond}}
             </div>
-        {{/ifCond}}
 
-        <div id="collapse2" {{#ifCond customAttibutes.length "===" 0}} class="panel-collapse collapse" {{else}} class="panel-collapse collapse in" {{/ifCond}} >
-            <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 customAttibutes.length ">" 0}}
+                <div id="collapse44" class="panel-collapse collapse in" >
+                    <div class="panel-body">
+                            <div class="row">
+                                <div class="col-md-12">
+                                    {{#ifCond swapItem "===" true}}
+                                        <div id="r_entityUserDefinedItemView"></div>
+                                    {{else}}
+                                    <div class="entity-detail-table">
+                                        <table class="table">
+                                            <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>
                                     {{/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>
+            {{/ifCond}}
+
         </div>
     </div>
-</div>
diff --git a/dashboardv3/public/js/views/detail_page/DetailPageLayoutView.js b/dashboardv3/public/js/views/detail_page/DetailPageLayoutView.js
index 18031ec..66d1163 100644
--- a/dashboardv3/public/js/views/detail_page/DetailPageLayoutView.js
+++ b/dashboardv3/public/js/views/detail_page/DetailPageLayoutView.js
@@ -19,14 +19,13 @@
 define(['require',
     'backbone',
     'hbs!tmpl/detail_page/DetailPageLayoutView_tmpl',
-    'hbs!tmpl/common/buttons_tmpl',
     'utils/Utils',
     'utils/CommonViewFunction',
     'utils/Globals',
     'utils/Enums',
     'utils/Messages',
     'utils/UrlLinks'
-], function(require, Backbone, DetailPageLayoutViewTmpl, ButtonsTmpl, Utils, CommonViewFunction, Globals, Enums, Messages, UrlLinks) {
+], function(require, Backbone, DetailPageLayoutViewTmpl, Utils, CommonViewFunction, Globals, Enums, Messages, UrlLinks) {
     'use strict';
 
     var DetailPageLayoutView = Backbone.Marionette.LayoutView.extend(
@@ -55,8 +54,6 @@ define(['require',
                 termClick: '[data-id="termClick"]',
                 propagatedTagDiv: '[data-id="propagatedTagDiv"]',
                 title: '[data-id="title"]',
-                editButton: '[data-id="editButton"]',
-                editButtonContainer: '[data-id="editButtonContainer"]',
                 description: '[data-id="description"]',
                 editBox: '[data-id="editBox"]',
                 deleteTag: '[data-id="deleteTag"]',
@@ -78,7 +75,6 @@ define(['require',
             /** ui events hash */
             events: function() {
                 var events = {};
-                events["click " + this.ui.editButton] = 'onClickEditEntity';
                 events["click " + this.ui.tagClick] = function(e) {
                     if (e.target.nodeName.toLocaleLowerCase() != "i") {
                         Utils.setUrl({
@@ -224,10 +220,10 @@ define(['require',
                             this.generateTerm(collectionJSON.relationshipAttributes.meanings);
                         }
                         if (Globals.entityTypeConfList && _.isEmptyArray(Globals.entityTypeConfList)) {
-                            this.ui.editButtonContainer.html(ButtonsTmpl({ btn_edit: true }));
+                            this.editEntity = true;
                         } else {
                             if (_.contains(Globals.entityTypeConfList, collectionJSON.typeName)) {
-                                this.ui.editButtonContainer.html(ButtonsTmpl({ btn_edit: true }));
+                                this.editEntity = true;
                             }
                         }
                         if (collectionJSON.attributes && collectionJSON.attributes.columns) {
@@ -251,7 +247,8 @@ define(['require',
                         searchVent: this.searchVent,
                         attributeDefs: (function() {
                             return that.getEntityDef(collectionJSON);
-                        })()
+                        })(),
+                        editEntity: this.editEntity || false
                     }
                     this.renderEntityDetailTableLayoutView(obj);
                     this.renderEntityUserDefineView(obj);
@@ -556,24 +553,6 @@ define(['require',
                 require(['views/profile/ProfileLayoutView'], function(ProfileLayoutView) {
                     that.RProfileLayoutView.show(new ProfileLayoutView(obj));
                 });
-            },
-            onClickEditEntity: function(e) {
-                var that = this;
-                $(e.currentTarget).blur();
-                require([
-                    'views/entity/CreateEntityLayoutView'
-                ], function(CreateEntityLayoutView) {
-                    var view = new CreateEntityLayoutView({
-                        guid: that.id,
-                        searchVent: that.searchVent,
-                        entityDefCollection: that.entityDefCollection,
-                        typeHeaders: that.typeHeaders,
-                        callback: function() {
-                            that.fetchCollection();
-                        }
-                    });
-
-                });
             }
         });
     return DetailPageLayoutView;
diff --git a/dashboardv3/public/js/views/entity/EntityDetailTableLayoutView.js b/dashboardv3/public/js/views/entity/EntityDetailTableLayoutView.js
index 381d99e..6c0561c 100644
--- a/dashboardv3/public/js/views/entity/EntityDetailTableLayoutView.js
+++ b/dashboardv3/public/js/views/entity/EntityDetailTableLayoutView.js
@@ -32,13 +32,20 @@ define(['require',
 
             template: EntityDetailTableLayoutView_tmpl,
 
+            templateHelpers: function() {
+                return {
+                    editEntity: this.editEntity
+                };
+            },
+
             /** Layout sub regions */
             regions: {},
 
             /** ui selector cache */
             ui: {
                 detailValue: "[data-id='detailValue']",
-                noValueToggle: "[data-id='noValueToggle']"
+                noValueToggle: "[data-id='noValueToggle']",
+                editButton: '[data-id="editButton"]',
             },
             /** ui events hash */
             events: function() {
@@ -49,6 +56,7 @@ define(['require',
                         "tableEl": this.ui.detailValue
                     });
                 };
+                events["click " + this.ui.editButton] = 'onClickEditEntity';
                 return events;
             },
             /**
@@ -56,7 +64,7 @@ define(['require',
              * @constructs
              */
             initialize: function(options) {
-                _.extend(this, _.pick(options, 'entity', 'typeHeaders', 'attributeDefs', 'attributes'));
+                _.extend(this, _.pick(options, 'entity', 'typeHeaders', 'attributeDefs', 'attributes', 'editEntity', 'guid', 'entityDefCollection', 'searchVent', 'fetchCollection'));
                 this.entityModel = new VEntity({});
             },
             bindEvents: function() {},
@@ -80,7 +88,25 @@ define(['require',
                 setTimeout(function() {
                     that.$el.find(".searched-term-highlight").addClass("bold");
                 }, 5000)
+            },
+            onClickEditEntity: function(e) {
+                var that = this;
+                $(e.currentTarget).blur();
+                require([
+                    'views/entity/CreateEntityLayoutView'
+                ], function(CreateEntityLayoutView) {
+                    var view = new CreateEntityLayoutView({
+                        guid: that.guid,
+                        searchVent: that.searchVent,
+                        entityDefCollection: that.entityDefCollection,
+                        typeHeaders: that.typeHeaders,
+                        callback: function() {
+                            that.fetchCollection();
+                        }
+                    });
+
+                });
             }
         });
     return EntityDetailTableLayoutView;
-});
\ No newline at end of file
+});
diff --git a/dashboardv3/public/js/views/entity/EntityLabelDefineView.js b/dashboardv3/public/js/views/entity/EntityLabelDefineView.js
index d69b277..e3105e4 100644
--- a/dashboardv3/public/js/views/entity/EntityLabelDefineView.js
+++ b/dashboardv3/public/js/views/entity/EntityLabelDefineView.js
@@ -86,35 +86,37 @@ define(['require',
         saveUserDefinedLabels: function() {
             var that = this;
             var entityJson = that.entityModel.toJSON();
-            var payload = this.labels;
-            that.entityModel.saveEntityLabels(entityJson.guid ,{
-                data: JSON.stringify(payload),
-                type: 'POST',
-                success: function() {
-                    var msg = entityJson.labels === undefined ? 'addSuccessMessage' : 'editSuccessMessage';
-                    if (payload.length === 0) {
-                        that.entityModel.unset('labels');
-                    } else {
-                        that.entityModel.set('labels', payload);
+            if (entityJson.labels !== undefined || this.labels.length !== 0) {
+                var payload = this.labels;
+                that.entityModel.saveEntityLabels(entityJson.guid ,{
+                    data: JSON.stringify(payload),
+                    type: 'POST',
+                    success: function() {
+                        var msg = entityJson.labels === undefined ? 'addSuccessMessage' : 'editSuccessMessage';
+                        if (payload.length === 0) {
+                            that.entityModel.unset('labels');
+                        } else {
+                            that.entityModel.set('labels', payload);
+                        }
+                        Utils.notifySuccess({
+                            content: "Labels " + Messages[msg]
+                        });
+                        that.swapItem = false;
+                        that.saveLabels = false;
+                        that.render();
+                    },
+                    error: function (e) {
+                        that.ui.saveLabels.attr("disabled", false);
+                        Utils.notifySuccess({
+                            content: e.message
+                        });
+                    },
+                    complete: function () {
+                        that.ui.saveLabels.attr("disabled", false);
+                        that.render();
                     }
-                    Utils.notifySuccess({
-                        content: "User-defined labels " + Messages[msg]
-                    });
-                    that.swapItem = false;
-                    that.saveLabels = false;
-                    that.render();
-                },
-                error: function (e) {
-                    that.ui.saveLabels && that.ui.saveLabels.length > 0 &&  that.ui.saveLabels[0].setAttribute("disabled", false);
-                    Utils.notifySuccess({
-                        content: e.message
-                    });
-                },
-                complete: function () {
-                    that.ui.saveLabels && that.ui.saveLabels.length > 0 && that.ui.saveLabels[0].setAttribute("disabled", false);
-                    that.render();
-                }
-            });
+                });
+            }
         }
     });
 });
diff --git a/dashboardv3/public/js/views/entity/EntityUserDefineView.js b/dashboardv3/public/js/views/entity/EntityUserDefineView.js
index a23a8fa..0560f98 100644
--- a/dashboardv3/public/js/views/entity/EntityUserDefineView.js
+++ b/dashboardv3/public/js/views/entity/EntityUserDefineView.js
@@ -19,13 +19,11 @@
 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) {
+'utils/Enums',
+'utils/Messages'
+], function(require, Backbone, EntityUserDefineView_tmpl, VEntity, Utils, Enums, Messages) {
 'use strict';
 
     return Backbone.Marionette.LayoutView.extend({
@@ -34,32 +32,57 @@ define(['require',
         templateHelpers: function() {
             return {
                 customAttibutes: this.customAttibutes,
-                readOnlyEntity : this.readOnlyEntity
+                readOnlyEntity : this.readOnlyEntity,
+                swapItem: this.swapItem,
+                saveAttrItems: this.saveAttrItems
             };
         },
         ui: {
             addAttr: "[data-id='addAttr']",
             editAttr: "[data-id='editAttr']",
-            deleteAttr: "[data-id='deleteAttr']"
+            saveAttrItems: "[data-id='saveAttrItems']"
         },
         events: function() {
             var events = {};
+            events["click " + this.ui.addAttr] = 'onAddAttrClick';
             events["click " + this.ui.editAttr] = 'onEditAttrClick';
+            events["click " + this.ui.saveAttrItems] = 'onEditAttrClick';
             return events;
         },
         initialize: function(options) {
             _.extend(this, _.pick(options, 'entity'));
             this.userDefineAttr = this.entity.customAttributes || [];
-            this.editMode = false;
+            this.initialCall = false;
+            this.swapItem = false, this.saveAttrItems = false;
             this.readOnlyEntity = Enums.entityStateReadOnly[this.entity.status];
             this.entityModel = new VEntity(this.entity);
             this.generateTableFields();
         },
         onRender: function() {
         },
-        bindEvents: {},
-        customAtributesFunc: function() {
+        renderEntityUserDefinedItems: function() {
+            var that = this;
 
+            require(['views/entity/EntityUserDefineItemView'], function(EntityUserDefineItemView) {
+                that.itemView = new EntityUserDefineItemView({items: that.customAttibutes});
+                that.REntityUserDefinedItemView.show(that.itemView);
+            });
+        },
+        bindEvents: {},
+        addChildRegion: function() {
+            this.addRegions({
+                REntityUserDefinedItemView: "#r_entityUserDefinedItemView"
+            });
+            this.renderEntityUserDefinedItems();
+        },
+        onAddAttrClick: function() {
+            this.swapItem = !this.swapItem;
+            this.saveAttrItems = this.swapItem === true ? true : false;
+            this.initialCall = true;
+            this.render();
+            if (this.swapItem === true) {
+                this.addChildRegion();
+            }
         },
         generateTableFields: function() {
             var that = this;
@@ -71,20 +94,9 @@ define(['require',
                 });
             });
         },
-        onEditAttrClick: function (e) {
-            this.editMode = true;
-            var options = {items: this.customAttibutes, mode: true};
-            var view = new EntityUserDefineItemView(options);
-            var modalObj = {
-                title: 'User-defined properties',
-                content: view,
-                okText: 'Save',
-                okCloses: false,
-                cancelText: "Cancel",
-                mainClass: 'modal-md',
-                allowCancel: true,
-            };
-           this.setAttributeModal(modalObj);
+        onEditAttrClick: function () {
+            this.initialCall = false;
+            this.setAttributeModal(this.itemView);
         },
         structureAttributes: function (list) {
             var obj={}
@@ -103,82 +115,71 @@ define(['require',
                 data: JSON.stringify(payload),
                 type: 'POST',
                 success: function() {
-                    var msg = "User-defined properties updated successfully";
+                    var msg = that.initialCall ? 'addSuccessMessage' : 'editSuccessMessage';
                     that.customAttibutes = list;
                     Utils.notifySuccess({
-                        content: msg
+                        content: "User-defined properties " + Messages[msg]
                     });
-                    that.modal && that.modal.trigger('cancel');
+                    that.swapItem = false;
+                    that.saveAttrItems = false;
                     that.render();
                 },
                 error: function (e) {
-                    that.editMode = false;
+                    that.initialCall = false;
                     Utils.notifySuccess({
                         content: e.message
                     });
-                    that.modal && that.modal.$el.find('button.ok').attr("disabled", false);
+                    that.ui.saveAttrItems.attr("disabled", false);
                 },
                 complete: function () {
-                    that.modal && that.modal.$el.find('button.ok').attr("disabled", false);
-                    that.editMode = false;
+                    that.ui.saveAttrItems.attr("disabled", false);
+                    that.initialCall = false;
                 }
             });
         },
-        setAttributeModal: function(modalObj) {
+        setAttributeModal: function(itemView) {
             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 = "";
+            this.ui.saveAttrItems.attr("disabled", true);
+            var list = itemView.$el.find("[data-type]"),
+                keyMap = new Map(),
+                validation = true,
+                hasDup = [],
+                dataList = [];
+            Array.prototype.push.apply(dataList, itemView.items);
+            for(var i = 0; i < list.length ; i++) {
+                var input = list[i],
+                    type = input.dataset.type,
+                    pEl = itemView.$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);
-                            }
+                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);
                 }
+                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);
+            if (validation && hasDup.length === 0) {
+                self.saveAttributes(itemView.items);
+            } else {
+                this.ui.saveAttrItems.attr("disabled", false);
+            }
         }
     });
 });