Tutorial - Define a custom navigation menu option to display custom PHP content

**telecastg** · 12-31-2022, 11:41 PM

Step 1 - Create a custom scope, for example "MyPage" that can be displayed as an option in the navigation menu.
custom/Espo/Custom/Resources/metadata/scopes/MyPage.json

Code:

{
    "entity": false,
    "tab": true,
    "acl": "true",
    "aclPortal": true,
    "aclPortalLevelList": [
        "all",
        "account",
        "contact",
        "own",
        "no"
    ],
    "disabled": false,
    "module": "Custom",
    "isCustom": true    
}

Step 2 - Create a custom front-end controller that will be invoked when the "MyPage" menu option is clicked
client/custom/src/controllers/my-page.js

Code:

define('custom:controllers/my-page', 'controller', function (Dep) {
    return Dep.extend({

        // default action
        actionIndex: function (options) {  
            // make Ajax call to retrieve the custom page content from the back end
            let payload = {userId: this.getUser().get('id')}; // define here input values for the Ajax call - for example the User id
            Espo.Ajax.getRequest('MyPage/action/fetchBackendContent', {
                options: payload
            }).then(
                (response) => {
                    // display the back-end content in the main section of the screen
                    let myHtml = "<div>"+response+"</div>";
                    $('#main').html(myHtml);
                }.bind(this)
            );                        
        }
    });
});

Step 3 - Create back-end controller to receive the Ajax call and serve the custom php content
custom/Espo/Custom/Controllers/MyPage.php

Code:

namespace Espo\Custom\Controllers;
use Espo\Core\Api\Request;
use StdClass;

class MyPage extends \Espo\Core\Templates\Controllers\Base
{
    public function getActionFetchBackendContent(Request $request): StdClass
    {
        // fetch parameters sent from the Ajax call as options (if any)
        $userId = $request->getQueryParam('userId');
        // invoke a Service class method to execute the desired action
        $queryResult = $this->getRecordService()->fetchMyCustomContentForThisUser($userId);
        return (object) [
            'content' => $queryResult
        ];
    }
}

Step 4 - Create a back-end Service class that will execute the controller directed actions
custom/Espo/Custom/Services/MyPage.php

Code:

namespace Espo\Custom\Services;

class MyPage extends \Espo\Core\Templates\Services\Base
{
    public function fetchMyCustomContentForThisUser($userId) {
        // generate the custom php content ($queryResult) and return
        return $queryResult;
    }

}