AEM CQ 56 - Extend UserAdmin, add new User Properties

Goal


Extend UserAdmin console and add new user properties. Here we add a new property Second Email, stored in CRX as secondEmail

For Touch UI, check this post

From the Product




Extension




In CRX




Solution - 1


1) Create a cq:ClientLibraryFolder /apps/myclientlib and add property categories cq.security of type String

2) Create /apps/myclientlib/js.txt of type nt:file and add the following

                  UserProperties.js

3) Create /apps/myclientlib/UserProperties.js of type nt:file and add the following code

CQ.Ext.ns("MyClientLib");

MyClientLib.UserAdmin = {
    addSecondEmail: function(propPanel){
        var userForm = propPanel.userForm;
        var emailComp = userForm.find('name', 'email');

        var secondEmailComp = {
            "xtype":"textfield",
            "fieldLabel": "Second Email",
            "anchor":"100%",
            "name":"secondEmail"
        };

        userForm.insert(userForm.items.indexOf(emailComp[0]) + 1, secondEmailComp);
        userForm.doLayout();
    }
};

(function(){
    if(window.location.pathname == "/useradmin"){
        var fields = CQ.security.data.AuthRecord.FIELDS;
        fields.push({"name": "secondEmail"});

        var UA_INTERVAL = setInterval(function(){
            var userAdmin = CQ.Ext.getCmp("cq-useradmin");

            if(userAdmin && userAdmin.userProperties){
                clearInterval(UA_INTERVAL);
                MyClientLib.UserAdmin.addSecondEmail(userAdmin.userProperties);
            }
        }, 250);
    }
})();


Solution - 2


Not preferred; Login to CRXDE Lite (http://localhost:4502/crx/de), Overlay file /libs/cq/security/widgets/source/widgets/security/UserProperties.js by creating /apps/cq/security/widgets/source/widgets/security/UserProperties.js and add the following code

CQ.Ext.ns("MyClientLib");

MyClientLib.UserAdmin = {
    addSecondEmail: function(propPanel){
        var userForm = propPanel.userForm;
        var emailComp = userForm.find('name', 'email');

        var secondEmailComp = {
            "xtype":"textfield",
            "fieldLabel": "Second Email",
            "anchor":"100%",
            "name":"secondEmail"
        };

        userForm.insert(userForm.items.indexOf(emailComp[0]) + 1, secondEmailComp);
        userForm.doLayout();
    }
};

CQ.shared.HTTP.get("/libs/cq/security/widgets/source/widgets/security/UserProperties.js");

(function(){
    if(window.location.pathname == "/useradmin"){
        var fields = CQ.security.data.AuthRecord.FIELDS;
        fields.push({"name": "secondEmail"});

        var UA_INTERVAL = setInterval(function(){
            var userAdmin = CQ.Ext.getCmp("cq-useradmin");

            if(userAdmin && userAdmin.userProperties){
                clearInterval(UA_INTERVAL);
                MyClientLib.UserAdmin.addSecondEmail(userAdmin.userProperties);
            }
        }, 250);
    }
})();

8 comments:

  1. I'm not sure why you're overlaying the UserProperties.js file just to load it again. The load order doesn't seem significant. It seems like it'd be better to have this be in a separate client library with the same category. Doing it the way you have causes the UserProperties.js not to be minified.

    ReplyDelete
  2. Interesting post. This post spurred me to do a similar customization - but I took a different approach that leverages ExtJS's prototype / class overriding.


    https://gist.github.com/jdorrance/8644033

    CQ.Ext.ns "Geometrixx.Government.UserAdmin.Connect"
    class Geometrixx.Government.UserAdmin.Connect

    @originalLoadRecord = CQ.security.UserProperties.prototype.loadRecord

    @connectRoomItem =
    xtype: "textfield"
    fieldLabel: "Connect Room"
    anchor: "100%"
    vtype: "url"
    name: "connectRoom"

    @addConnectToSecurity : ->
    CQ.security.data.AuthRecord.FIELDS.push name: "connectRoom"

    @doOverride : ->
    _this = @
    CQ.Ext.override CQ.security.UserProperties,
    loadRecord: (rec) ->
    unless @userForm.find("name", "connectRoom").length > 0
    @userForm.insert 3, _this.connectRoomItem
    @userForm.doLayout()
    _this.originalLoadRecord.apply this, arguments

    Geometrixx.Government.UserAdmin.Connect.addConnectToSecurity()
    Geometrixx.Government.UserAdmin.Connect.doOverride()


    Here is the same in javascript, if you find that easier to read

    var UserAdminOverride;

    CQ.Ext.ns("InboxOverride");

    UserAdminOverride = (function() {

    function UserAdminOverride() {}

    UserAdminOverride.originalLoadRecord = CQ.security.UserProperties.prototype.loadRecord;

    UserAdminOverride.connectRoomItem = {
    xtype: "textfield",
    fieldLabel: "url field",
    anchor: "100%",
    vtype: "url",
    name: "urlfield"
    };

    UserAdminOverride.addConnectToSecurity = function() {
    return CQ.security.data.AuthRecord.FIELDS.push({
    name: "urlfield"
    });
    };

    UserAdminOverride.doOverride = function() {
    var _this;
    _this = this;
    return CQ.Ext.override(CQ.security.UserProperties, {
    loadRecord: function(rec) {
    if (!(this.userForm.find("name", "urlfield").length > 0)) {
    this.userForm.insert(3, _this.connectRoomItem);
    this.userForm.doLayout();
    }
    return _this.originalLoadRecord.apply(this, arguments);
    }
    });
    };

    return UserAdminOverride;

    })();

    UserAdminOverride.addConnectToSecurity();

    UserAdminOverride.doOverride();

    ReplyDelete
  3. Hello, thanks for posting this information, I was trying to find information on this topic –this was very helpful.
    Adobe Support please visit the link.

    Thankyou
    Lacy Brown

    ReplyDelete
  4. I have done all that like here. Have the myClientLib Folder under apps Folder, the .js File with the Code and the .txt File. But is not working
    Is there something else I have to do? I use CQ 6.1 is that the reason it's not working?

    ReplyDelete
  5. this is not a nice answer. who is this file?

    ReplyDelete