Announcement

Collapse
No announcement yet.

Tutorial - How to implement a custom (login) landing page

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Tutorial - How to implement a custom (login) landing page

    EspoCRM makes it possible to implement your own login screen in an "upgrade safe" way by following the steps below:

    Click image for larger version  Name:	Standard Login Page.JPG Views:	0 Size:	52.0 KB ID:	57906Click image for larger version  Name:	Custom Landing Page.JPG Views:	0 Size:	58.4 KB ID:	57905

    STEPS:

    1) Create metadata file custom/Espo/Custom/Resources/metadata/clientDefs/App.json
    Code:
    {
        "loginView" : "custom:views/login"
    }
    The code above will instruct Espo to use a custom view to render the login page instead of the standard login view.

    2) Create script client/custom/src/views/login.js
    Code:
    define('custom:views/login', 'views/login', function (Dep) {
    
        return Dep.extend({
    
            // specify your custom template
            template: 'custom:login',
    
            // specify your own custom values for any custom placeholders that you are including in the template
            // in this example, a background image, company name, custom button for self-registration and captcha are included
            landingPageData: {
                backgroundImage: '{{path to your background image file}}',
                companyName: '{{Your company name}}',
                selfRegistrationEnabled: true,
                captchaEnabled: false            
            },
    
            // include the custom values in the standard "data" function which will provide the placeholder values to the template
            // the values for "logoSrc" and "showForgotPassword" are the standard values specified in the core login script
            data: function () {
                return{        
                  logoSrc: this.getLogoSrc(),
                  showForgotPassword: this.getConfig().get('passwordRecoveryEnabled'),
                  companyName: this.landingPageData.companyName,
                  backgroundImage: this.landingPageData.backgroundImage,
                  selfRegistrationEnabled: this.landingPageData.selfRegistrationEnabled
               };          
            },
    
            // this is the function that will be triggered when the visitor clicks on the custom "Register" button
            showRegistrationRequest: function () {
    
                // to keep things simple, the implementation of the self registration is not included in this tutorial
                // but this shows how a custom button can be implemented in your own custom landing page
    
            }
    
        });
    });
    The custom view will call a custom template, will implement any custom functions that need to be added, and will provide the placeholder values for the template.

    3) Create a custom template to use for rendering the login / landing page: client/custom/res/templates/login.tpl
    HTML Code:
    <div class="container content landing-page" style="background-image:url('{{backgroundImage}}');">
        <div class="col-md-4 col-md-offset-4 col-sm-8 col-sm-offset-2">
        <div id="login" class="panel panel-default">
            <div class="panel-heading">
                <div class="logo-container">
                    <img src="{{logoSrc}}" class="logo">
                    <span class='logo-company-name'>{{companyName}}</span>
                </div>
            </div>
            <div class="panel-body">
                <div>
                    <form id="login-form" onsubmit="return false;">
                        <div class="form-group">
                            <label for="field-username">{{translate 'Username'}}</label>
                            <input type="text" name="username" id="field-userName" class="form-control" autocapitalize="off" autocorrect="off" tabindex="1" autocomplete="username">
                        </div>
                        <div class="form-group">
                            <label for="login">{{translate 'Password'}}</label>
                            <input type="password" name="password" id="field-password" class="form-control" tabindex="2" autocomplete="current-password">
                        </div>
                        <div>
                            {{#if showForgotPassword}}<a href="javascript:" class="btn btn-link pull-right" data-action="passwordChangeRequest" tabindex="4">
                                {{translate 'Forgot Password?' scope='User'}}
                            </a>{{/if}}
                            <button type="submit" class="btn btn-primary" id="btn-login" tabindex="3">{{translate 'Login' scope='User'}}</button>
                            {{#if selfRegistrationEnabled}}
                                <a href="javascript:" class="btn btn-default" data-action="createRegistrationRequest" tabindex="5" id='btn-register' style='margin-left:10px;'>
                                    {{translate 'register' scope='RegistrationRequest'}}
                                </a>
                            {{/if}}
                        </div>
                    </form>
                </div>
            </div>
        </div>
        </div>
    </div>
    <footer class="container">{{{footer}}}</footer>
    4) Create custom CSS to be used by the custom template: client/custom/lib/css/landingPage.css
    Code:
    #login .logo-container {
        width: 100% !important ;
        height: 43px;
    }
    
    .logo-company-name {
        color:#fff;
        margin-left:10px;
        font-size:24px;
        vertical-align: bottom;
    }
    
    .landing-page {
        background-repeat: no-repeat;
        background-position: relative;
        background-size: cover;
        margin-top: -29px;
        margin-bottom: 29px;
    }
    
    #login {
        margin-top: 60px;
    }
    5) Create custom Javascript code to be used with the custom landing page (this example does not include any, but this is where you would incorporate fancy interface effects, etc): client/custom/lib/js/landingPage.js
    Code:
    // This example does not include any custom Javascript
    6) Create custom metadata file to let EspoCRM know that there is are custom Javascript and CSS files that need to be loaded:
    custom/Espo/Custom/Resources/metadata/app/client.json
    Code:
    {
        "scriptList": [
           "__APPEND__",
          "client/modules/landing-page/lib/js/landingPage.js"
        ],
        "developerModeScriptList": [
           "__APPEND__",
          "client/modules/landing-page/lib/js/landingPage.js"
        ],
         "cssList": [
            "__APPEND__",
           "client/custom/lib/css/landingPage.css"              
        ],
        "developerModeCssList": [
            "__APPEND__",
           "client/custom/lib/css/landingPage.css"              
        ]
    }
    The custom template above and the custom CSS code will modify the regular login page display by including a company's name, a custom background and a "Register" button.

    Of course this template can be vastly improved by front end designers to suit a client needs.
    Last edited by telecastg; 06-12-2020, 07:11 AM. Reason: Wrong file reference in Step 6 corrected

  • #2
    Thanks telecastg wonderfull

    Comment


    • telecastg
      telecastg commented
      Editing a comment
      Youre welcome item :-) I added instructions to incorporate custom css and js scripts to the tutorial.

    • espcrm
      espcrm commented
      Editing a comment
      Look like I got a task for the weekend to do.

  • #3
    Good info, thanks for share it... =P

    Comment


    • #4
      telecastg ,

      All these tutorials you have been posting have been amazing to learn from! Thank you so much for doing all this!

      One question on the custom landing pages..

      Is it possible to do customization based on the Portal Landing page? For example, I want to show a button on the client portal and a different button on the customer portal?

      Thanks again! I look forward to reading your posts in the future!

      Brad

      Comment


      • #5
        Hi Brad, you are welcome, I am glad you like the postings, hopefully it will inspire others to take the time to share their experiences posting solutions, not just questions, in this forum, and make it a better learning tool for everyone.

        Yes it is possible to add custom buttons that would only show in the portal landing page like this:

        1) Add the new button to the custom login template client/custom/res/templates/login.tpl (use the section {{#if selfRegistrationEnabled}} as reference)

        2) Modify the custom login view client/custom/src/views/login.js as follows:

        a) Add an event to define which function to execute when the new button is clicked. (use the click a[data-action="createRegistrationRequest"] event as reference)

        b) Implement the function called for in the event (use function showRegistrationRequest() as reference)

        c) Use jquery to show or hide a button depending if the landing page is for a portal or not in the init() function.
        Code:
                init: function() {
                    // this function will return a value like "../../" if the page is being accessed from the portal, so we can use it to determine what to show or hide
                    // in this example we will only show the "Registration" button if the page is being displayed in a portal
                    if(this.getBasePath()) {
                        $('a[data-action="createRegistrationRequest"]').show();
                        // set the path for the same background image for the portals
                        this.landingPageData.backgroundImage = this.getBasePath()+this.landingPageData.backgroundImage;
                    } else {
                        $('a[data-action="createRegistrationRequest"]').hide();
                    }
                },

        Comment


        • #6
          I did everything according to the model and it worked, but I can’t move the company logo on the authorization page in the middle. All my attempts to edit css failed. I ask for help. thank
          Screenshot: https://hkar.ru/125gc

          Comment


          • #7
            hello,
            try this :

            PHP Code:

            <span class='logo-company-name'><center>{{companyName}}</center></span
            clear cache .. and to on browser

            Comment


            • #8
              After I made a custom design, I have a logo and all the icons like the default avatar. Tell me what I did crookedly. I took instructions from the forum. The EspoCRM logo is displayed normally.

              Comment


              • #9
                It looks like the application is not finding your logo, go to Administration > User Interface and make sure that the logo shows like the picture attached or upload it there. (see the attached image)

                Espo will look for this image and place it everywhere a company log is called.

                Comment


                • #10
                  I followed the Instructions to create a custom login (landing) Page. But for some reason it still displays the default login Page. Any idea why? Do i need to actvate something in the Backend?

                  Comment


                  • #11
                    Aside from clearing the admin Cache and Rebuild, I think you may also want to clear your Browser cache too? Or use Private Browsing/Incognito to see it "cache-less"

                    Comment


                    • #12
                      Still no Luck. There is still the default login Page displayed. Am i right that i have to put the content from step1 and step6 into the same File? correct?

                      Comment


                      • #13
                        No, sorry the correct file reference for Step 6 is: custom/Espo/Custom/Resources/metadata/app/client.json I edited the instructions, must have been a typo from an edit after the original publication.

                        Comment


                        • tothewine
                          tothewine commented
                          Editing a comment
                          thank for the helpful post!

                        • telecastg
                          telecastg commented
                          Editing a comment
                          You're welcome :-)
                      Working...
                      X