[HELPED] Changing Login Window

[sclayton]

At V3.1 we changed the login screen so there was an additional button 'Register New User'. Clicking the button would open a new window and the user could enter various bits of information to create an account.

We wanted to do something similar in V4.0.

At 3.1 we changed vvLoginForm.js in vvresources/js/portal.

Where would we need to put this code now?

Thanks for help
Steve

[Johnny Major]

Hi Steve,

With 4.0 you will want to capture the login component from the Hook.js. Once you capture the login component from the Hook.js you can modify it.

The Desktop Hook.js resides in /resources/desktop/Hook.js.

Below is an example of adding the "Register New User" in the componentrender method.

Hook.js

            componentrender      : function (cmp) {
                var me = this;
                
                //grab the login so we can add the create account link
                //
                if (cmp.xtype === 'login'){
                    var toolbar = cmp.down('toolbar'),
                        linkContainer;
                        
                    //make sure the toolbar is found
                    //
                    if (!Ext.isEmpty(toolbar)){
                        linkContainer = toolbar.items.getAt(0);
                        
                        if (!Ext.isEmpty(linkContainer)){
                            //change the height of the toolbar since we are adding an new link
                            //
                            toolbar.setHeight(68);
                            
                            //listen for the after render of the link container
                            //
                            linkContainer.on({
                                afterrender : function(cmp){
                                    //create the create account link
                                    //
                                    var regEl = Ext.DomHelper.append(cmp.el,'<div class="login-create-account">Register New User</div>');
                                    
                                    //listen for click of create account
                                    //
                                    Ext.get(regEl).on({
                                        scope : me,
                                        click : function(){
                                            //perform your custom logic etc here...
                                            //
                                            console.log('create account logic');
                                        }
                                    });
                                    
                                    //update the position of the links container since we added content
                                    //
                                    cmp.el.addCls('login-links-container');
                                }
                            });
                        }
                    }
                }
            }

You will want to be on the latest update of 4.0 because we added Hook.css which I am using in this example. So please make sure you get the latest update to 4.0.

Hook.css - some styling so we can have the Register look like the other links.

.login-links-container{
    top: 23px!important;
}

.login-create-account {
    position  : absolute;
    font-size : 10pt;
    top       : 17px;
    color     : #0d92f4;
}

.login-create-account:hover {
    text-decoration : underline;
    cursor          : pointer; 
    cursor          : hand;
}

Here is a screenshot of what the Valence login looks like after I updated the Hook.js & Hook.css.
Screen Shot 2014-04-03 at 12.01.16 PM.jpg

[sclayton]

Thank you!

That's a great help.
Steve

[sclayton]

Radio Buttons

Hi Johnny,

I got the 'Register New User' link to show no problem. However when you click the link it should open a new window containing a form and the user enters various details.

I can get the window to display but have a problem if I add radio buttons to the form.

The log shows this
Uncaught TypeError: Cannot read property 'length' of undefined app.js:1
Ext.cmd.derive.hasLockedColumns app.js:1
Ext.cmd.derive.initComponent app.js:1
Ext.cmd.derive.constructor app.js:1
b.implement.callParent app.js:1
Ext.cmd.derive.constructor app.js:1
z app.js:1
(anonymous function) VM24:3
Ext.ClassManager.instantiate app.js:1
Ext.ClassManager.instantiateByAlias app.js:1
Ext.apply.widget app.js:1
Ext.cmd.derive.create app.js:1
Ext.cmd.derive.lookupComponent app.js:1
Ext.cmd.derive.prepareItems app.js:1
Ext.cmd.derive.add app.js:1
Ext.cmd.derive.initItems app.js:1
b.implement.callParent app.js:1
Ext.cmd.derive.initItems app.js:1
b.implement.callParent app.js:1
Ext.cmd.derive.initItems app.js:1
Ext.cmd.derive.initComponent app.js:1
b.implement.callParent app.js:1
Ext.cmd.derive.initComponent app.js:1
b.implement.callParent app.js:1
Ext.cmd.derive.initComponent app.js:1
b.implement.callParent app.js:1
Ext.define.initComponent app.js:1
b.implement.callParent app.js:1
Ext.cmd.derive.initComponent app.js:1
Ext.cmd.derive.constructor app.js:1
b.implement.callParent app.js:1
Ext.cmd.derive.constructor app.js:1
z app.js:1
Ext.apply.widget app.js:1
Ext.cmd.derive.create app.js:1
Ext.cmd.derive.lookupComponent app.js:1
Ext.cmd.derive.prepareItems app.js:1
Ext.cmd.derive.add app.js:1
Ext.cmd.derive.initItems app.js:1
b.implement.callParent app.js:1
Ext.cmd.derive.initItems app.js:1
Ext.cmd.derive.initComponent app.js:1
b.implement.callParent app.js:1
Ext.cmd.derive.initComponent app.js:1
b.implement.callParent app.js:1
Ext.cmd.derive.initComponent app.js:1
b.implement.callParent app.js:1
Ext.define.initComponent app.js:1
b.implement.callParent app.js:1
Ext.cmd.derive.initComponent app.js:1
b.implement.callParent app.js:1
Ext.define.initComponent app.js:1
Ext.cmd.derive.constructor app.js:1
b.implement.callParent app.js:1
Ext.cmd.derive.constructor app.js:1
z app.js:1
Ext.define.onNewUser VM60:224
Ext.get.on.click VM60:163
(anonymous function) VM75:6
l

var win = new Ext.Window({
			modal: true,
			layout: 'fit',
			width: 550,
			height: 720,
			closeAction: 'hide',
			title: 'New User Registration',
			resizable: 'false',

			items: [{
				xtype: 'form',
				bodyPadding: 10,
				defaults: {
					anchor: '100%',
					labelWidth: 140
				},
				items: [{
					xtype: 'radiogroup',
					fieldLabel: 'Include Orders',
					style: 'background-color:#ffffff',
					cls: 'x-check-group-alt',
					items: [{
						boxLabel: 'All',
						name: 'include',
						inputValue: 1,
						checked: true
					}, {
						boxLabel: 'Complete ',
						name: 'include',
						inputValue: 2
					}, {
						boxLabel: 'Outstanding',
						name: 'include',
						inputValue: 3
					}]
				}]
			}]

		});

		win.show();

Does it work for you?

Steve

[Johnny Major]

Hi Steve,

This is happening because the portal is built. When the application gets built it only packages the components that are being used by the application and its corresponding styles. The portal doesn't use the radio group component so that is why it cannot be found.

You will need to update the Hook.js by adding the Ext Loader and set the Ext path on the loader to the Ext framework in Valence. The loader will pull in any needed components that currently are unavailable "RadioGroup".

You will also need to add the requires for components you are using. I added the requires based off the code snippet you posted.

Hook.js Example

//Set the Ext loader so that components that are unavailable
// can be dynamically loaded when needed
//
Ext.Loader.setPath('Ext','/desktop/ext/src/');

//Require the components we are using for the Create Account Window
//
Ext.require([
    'Ext.window.Window',
    'Ext.layout.container.Fit',
    'Ext.form.Panel',
    'Ext.form.RadioGroup'
]);

Ext.define('Portal.Hook', {
    singleton   : true,
    loginUI     : {
        backgroundColor : '#e9eaed',
        form            : {
            border          : false,
            width           : 425,
            title           : null,
            titleAlign      : 'center',
            bodyStyle       : {
                "background-color" : "#f6f7f8"
            }
        },
        logo            : {
            padding         : 20,
            url             : '/resources/images/valence_logo.png',
            height          : 70,
            width           : 200,
            style           : {
                "text-align" : "center"
            }
        }
    },
    lockUI     : {
        form            : {
            border          : false,
            height          : 190,
            width           : 420,
            title           : null,
            titleAlign      : 'center',
            bodyStyle       : {
                "background-color" : "#f6f7f8"
            }
        },
        logo            : {
            padding         : 15,
            url             : '/resources/images/valence_logo.png',
            height          : 55,
            width           : 200,
            style           : {
                "text-align" : "center"
            }
        }
    },
    mainUI : {
        logo : {
            paddingLeft     : 15,
            paddingRight    : 15,
            paddingBottom   : 0,
            paddingTop      : 5,
            url             : '/resources/images/valence_logo.png',
            height          : 30,
            width           : 120
        }
    },
    miscellaneousUI : {
        promptBeforeCloseIconColor : '#0D92F4'
    },
    constructor : function () {
        var me = this;
        Portal.getApplication().on({
            scope                : this,
            activateapp          : function(app){
            },
            afterautostart       : function(appTabs){
            },
            appsloaded           : function(){
                // fired after the "Apps" store has been loaded...
            },
            beforeautostart      : function(){
                // return false to prevent autostart apps from launching...
            },
            beforecloseapp       : function (app) {
                // return false to prevent closing the app...
            },
            beforeenvironmentset : function (user, env) {
                // return false to prevent setting of environment...
            },
            beforelogin          : function (params) {
                // return false to prevent login attempt...
            },
            beforelogout         : function (user) {
                // return false to prevent logout...
            },
            beforepoll           : function (params) {
            },
            closeapp             : function (app) {
            },
            componentrender      : function (cmp) {
                var me = this;

                //grab the login so we can add the create account link
                //
                if (cmp.xtype === 'login'){
                    var toolbar = cmp.down('toolbar'),
                        linkContainer;

                    //make sure the toolbar is found
                    //
                    if (!Ext.isEmpty(toolbar)){
                        linkContainer = toolbar.items.getAt(0);

                        if (!Ext.isEmpty(linkContainer)){
                            //change the height of the toolbar since we are adding an new link
                            //
                            toolbar.setHeight(68);

                            //listen for the after render of the link container
                            //
                            linkContainer.on({
                                afterrender : function(cmp){
                                    //create the create account link
                                    //
                                    var regEl = Ext.DomHelper.append(cmp.el,'<div class="login-create-account">Register New User</div>');

                                    //listen for click of create account
                                    //
                                    Ext.get(regEl).on({
                                        scope : me,
                                        click : function(){
                                            //Show the Create Account Window
                                            //
                                            me.showCreateAccount();
                                        }
                                    });

                                    //update the position of the links container since we added content
                                    //
                                    cmp.el.addCls('login-links-container');
                                }
                            });
                        }
                    }
                }
            },
            environmentset       : function (user, env) {
            },
            launchapp            : function (app) {
            },
            login                : function (user, sid) {
            },
            loginfailure         : function (user) {
            },
            logout               : function (user) {
            },
            navtoolbarready      : function (toolbar) {
            },
            poll                 : function (rsp) {
            },
            settingsapplied      : function () {
                var me = this;
                Ext.apply(Portal.config.Settings, {
                });
                // if you have changed any of the above "UI" settings, uncomment the applicable line of code below:
                //
                //   Portal.config.UI.setLogin(me.loginUI);
                //   Portal.config.UI.setLock(me.lockUI);
                //   Portal.config.UI.setMain(me.mainUI);
                //   Portal.config.UI.setMiscellaneous(me.miscellaneousUI);
            }
        });
    },

    showCreateAccount : function(){
        var me = this;

        Ext.create('Ext.window.Window',{
            modal       : true,
            layout      : 'fit',
            width       : 550,
            height      : 500,
            closeAction : 'hide',
            title       : 'New User Registration',
            resizable   : 'false',

            items       : [{
                xtype       : 'form',
                bodyPadding : 10,
                defaults    : {
                    anchor     : '100%',
                    labelWidth : 140
                },
                items       : [{
                    xtype      : 'radiogroup',
                    fieldLabel : 'Include Orders',
                    style      : 'background-color:#ffffff',
                    cls        : 'x-check-group-alt',
                    items      : [{
                        boxLabel   : 'All',
                        name       : 'include',
                        inputValue : 1,
                        checked    : true
                    }, {
                        boxLabel   : 'Complete ',
                        name       : 'include',
                        inputValue : 2
                    }, {
                        boxLabel   : 'Outstanding',
                        name       : 'include',
                        inputValue : 3
                    }]
                }]
            }]
        }).show();
    }
});

The last thing you will need to do is update the Hook.css. We need to load the complete Valence Theme so your components render correctly.

Hook.css Example

/*Import the completed Valence Theme */
@import '/packages/vvtheme/build/resources/vvtheme-all-debug_01.css';@import '/packages/vvtheme/build/resources/vvtheme-all-debug_02.css';

.login-links-container{
    top: 23px!important;
}

.login-create-account {
    position  : absolute;
    font-size : 10pt;
    top       : 17px;
    color     : #0d92f4;
}

.login-create-account:hover {
    text-decoration : underline;
    cursor          : pointer; 
    cursor          : hand;
}

After making the above changes your window should render with the radio group. You will also notice that when I am instantiating the window I am using the Ext.create instead of the new keyword. Instantiate everything with Ext.create instead of the new keyword.

Please let us know if you have any issues.

Thanks

[sclayton]

Hi Johnny,

I appreciate your help - All working now!

Thanks
Steve

[Johnny Major]

Excellent!