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

[telecastg]

Hey Fehu , I modified the script in step 6, it was pointing to a "module/landing-page" namespace instead to the "custom" namespace (I prefer not to dump everything in the "custom" namespace and use the modules architecture available so I can easily troubleshoot and modify a module without having to worry about interfering with something else in the same namespace, but my examples always use the "custom" namespace to make things easier to implement for everyone).

It should work now. We are using version 5.9.3 without any problems.

[ppatt25]

Hey telecastg , I followed your steps and ran into an issue with the background image as well. I have attached this image here and it seems that an error is coming up with the portal trying to pull the image?

The portal URL is http://espocrm.ianbirch.me/ if you want to take a look youself. Any help on this is greatly appreciated.

Thanks!

[telecastg]

Hi,

The image file path is incorrect.

Try putting the actual image file path as backgroundImage: 'client/img/testimage.jpg', in client/custom/src/views/login.js without the double {{ }} brackets.

These were meant to let the readers know that it is a placeholder but they are NOT to be included as part of the javascript file.

By the way, I suggest that you use a custom folder eg: client/custom/img to save your custom images, otherwise they might be overwritten in an update.

[esforim]

Further to this; if you use your browser console log you can see if the path is incorrect. It will say something like "file not found" or "file path not found", then you can adjust the file path till it can be found!

[emillod]

Thank you very much, great idea! I'll need to adjust login page in my theme

[telecastg]

You're very welcome emillod congratulations on your theme extension by the way !

[telecastg]

In reference to rem4332 question, how to change the logo size ?.

Without touching the theme css (highly recommended) you can change anything in the lading page template, like the size of the logo or even layout as long as you know HTML and CSS.

edit file: client/custom/res/templates/login.tpl then clear cache, rebuild and reload page.

[rem4332]

Thanks a lot telecastg, but in my case I would like to enlarge the logo in Espo not the one from the landing page thank you very much.

[telecastg]

You're welcome rem4332

If you want to modify the size of the logo on top of the navbar (side panel in my case) check this post

https://forum.espocrm.com/forum/developer-help/61108-reference-espo-gui-script-map-guide-where-can-i-change-something?p=61128#post61128

[rem4332]

hello all, one more question please.
Can you also populate the portals with a landing page ?

thanks a lot
rem4332

[telecastg]

As far as I know, there is only one landing page for both types of users portal or regular.

[esforim]

I guess you could just create a 2nd index.php page and link it to a second landing page, when you send out portal link you would send link with 2nd index. As for how, can't help you.

[rem4332]

telecastg, oh okay thanks, in my case the landingpage is not the same. I will check it thanks a lot.
esforim thanks for the input. i will check it.

[bandtank]

In reference to rem4332 question, how to change the logo size ?.

Without touching the theme css (highly recommended) you can change anything in the lading page template, like the size of the logo or even layout as long as you know HTML and CSS.

edit file: client/custom/res/templates/login.tpl then clear cache, rebuild and reload page.

I copied the login.tpl file from client/res/templates to client/custom/res/templates. However, no changes to the file appear on the login page. I tried clearing the cache, rebuilding, and using a private browser without success. Is there anything else to try?

[telecastg]

Did you follow the complete tutorial and build all scripts ?

Espo needs to know that you are using a custom template instead of the core script.

[Raj]

Hi telecastg, i done all the process in self registration but i got this error. "Something else other than 200 was returned"

[ChrisSka83]

Hy telecastg,
i also get this error Raj mentioned, see one above me.

Have now gone through all the tutorials, gone through them several times and also get this message:
"something else other than 200 was returned"

According to the console of the browser I know that it is the file "registration-request.js".
The console complains about the last command:
xmlhttp.send("data="+payload); <- line 209

Is this function no longer compatible with the current version?

[telecastg]

The first part of this tutorial (Implementing a custom landing page) works fine, the second part (self registration) became obsolete with the refactorization implemented in Espo 6

[ChrisSka83]

I have worked through all 3 tuturials, from own landing page to self-registration part 1 & part 2
So if I understand correctly now, I have done the tutorial for nothing because the self-registration no longer works?

[telecastg]

The self registration portion became outdated when the code base was re-factored in version 6.

The tutorial was meant for coders who are reasonably proficient in Espo, Javascript and PHP.

If you are, you can adapt the registration code to be compliant with the latest Espo versions.

[ChrisSka83]

That's a shame that it doesn't work with the current version.
I could really use that.

Unfortunately, I am not yet so fit in Espo, to reprogram that times loosely.

Is this function maybe planned in an upcoming version, so that you can simply set in the backend, whether registration is possible or not?

[telecastg]

There are no plans to update any tutorials or free extensions that became obsolete when Espo codebase was first refactored in version 6.

If you would like to have a custom landing page and set aside the self registration functionality for later when perhaps you will be more familiar with Espo and will be able to customize the code to current Espo conventions, you can simply remove the "Self Registration" button from the template.

{{#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}}
​

In our application we don't use self registration but use the custom landing page as described and it works perfectly with Espo 7.5

[ChrisSka83]

Yes, the landing page works for me too. That was not the problem. I was only interested in the self-registration.

[esforim]

Best of luck, be sure to share your finding if you manage to get it to work.

[Kharg]

I don't think it's too hard to update for it to be working in 7.5

[shalmaxb]

Hello,
I tried to implement a custom login-page, which following this tutorial worked in general, besides one problem, which I did not suceed to sort out.

I put the template file into the folder as expected, all namespace and paths are correct, but espoCRM throws a 404 not found error. When I place the template file out of the custom folder in the folder client/res/template it works, but this would not be update safe. Where should I look to repair that? Or has anything regarding the file locations changed with more recent versions (this my problem occurs in 7.5.6).

[Kharg]

https://github.com/Kharg/custom-login

[shalmaxb]

Kharg, thank you, I had seen that already, but it did not help for my case. I do not need a background image. I only changed a bit in the Auth-Container, made a different Layout and wanted that to use as a custom login container. As written, it works, when I put the modified login.tpl in the client/res folder, but not, when I put in the client/custom/res folder. Something with the path is not right, but I do not see any wrong coding in my example.