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

[telecastg]

You're welcome :-)

[tothewine]

thank for the helpful post!

[telecastg]

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.

[gerac]

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?

[esforim]

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"

[gerac]

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?

[telecastg]

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.

[Sab0tajue]

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.

[item]

hello,
try this :

<span class='logo-company-name'><center>{{companyName}}</center></span> 

clear cache .. and to on browser

[Sab0tajue]

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

[telecastg]

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.

        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();
            }
        },

[bradaks]

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

[Oni]

Good info, thanks for share it... =P

[esforim]

Look like I got a task for the weekend to do.

[telecastg]

Youre welcome item :-) I added instructions to incorporate custom css and js scripts to the tutorial.