No announcement yet.

Tutorial - Implement a self-registration button in a custom landing page. Part 1

  • Filter
  • Time
  • Show
Clear All
new posts

  • Tutorial - Implement a self-registration button in a custom landing page. Part 1

    This tutorial is a follow up on the previous post on how to implement a custom landing page for EspoCRM without modifying any core scripts.

    If you haven't read the thread, please consult it before reading this tutorial.

    Because of the length of the tutorial, this article will be posted as two topics.

    From a top level perspective, when a visitor clicks on the "Register" button in the landing page, a form appears where the visitor can enter it's first name, last name, email address and cell phone number and after submitting a message appears saying that a response by email will follow.

    Upon submission of the form, EspoCRM compares the data received against existing portal users to filter out possible duplicates.

    If an existing portal user matches the data submitted, an email is sent to the applicant with the username information and instructions to go back and request a Password change from the landing page.

    If no duplicates exist, then the system creates a Registration Request record and alerts the Administrator that a registration request has been received via email.

    When the Administrator opens the Registration Request record, it is possible to accept or deny the request.

    If the request is denied an email is sent to the applicant informing it of the decision.

    If the request is granted, then the system creates a new portal user and emails the new credentials to the applicant.


    1) Go to Administration > Entity Manager > Create Entity
    Name: RegistrationRequest
    Type: Base
    Labels: Write your own labels
    Stream: Leave unchecked
    Save the new entity.

    2) Add the following fields to RegistrationRequest:
    Name: firstName
    Type: varchar
    Required: yes

    Name: lastName
    Type: varchar
    Required: yes

    Name: cellPhone
    Type: varchar
    Required: yes

    Name: emailAddress
    Type: varchar
    Required: yes

    Name: status
    Type: enum
    Options: [Received, Approved, Rejected]
    Default: Received

    3) Go to Administration > Rebuild

    The above actions will create a custom entity RegistrationRequest which is where the visitor's requests will be stored and is the entity that the Administrator will check to approve or deny the requests.

    4) Edit script client/custom/src/views/login.js,created in the previous tutorial, make sure that the value for "selfRegistrationEnabled" is set to "true" and implement the event listener and function createRegistrationRequest as follows:
            events: {
                'submit #login-form': function (e) {
                    return false;
                'click a[data-action="showRegistrationRequest"]': function (e) {
                'click a[data-action="passwordChangeRequest"]': function (e) {
            showRegistrationRequest: function () {
                Espo.Ui.notify(this.translate('pleaseWait', 'messages'));
                this.createView('registrationRequest', 'custom:views/modals/registration-request', {
                    url: window.location.href
                }, function (view) {
    The code above tells Espo to instantiate a modal view class registration-request when a visitor clicks on the "Register" field.
    Last edited by telecastg; 06-19-2020, 05:43 PM.