Integrate Direct Edit Button into Custom Application

1 Create a custom Permission Service

Create a Permission service that implements the PermissionServiceInterface.

getApplicationPrefix return a unique application prefix.

getUserId return a unique user id

mapPimcoreUserId optionally map to a pimcore user that will be used vor the version files. Return 0 (system-user) if you cannot do that.

hasAssetPermission check if the current user has permission to edit the asset.

The following example is a very simple Permission service that identifies the user by his session id and lets everyone edit every asset. In your real life application you probably will have a firewall and get the user from there.

namespace AppBundle\DirectEdit\Permission;

use Pimcore\Bundle\DirectEditBundle\Service\Permission\PermissionServiceInterface;
use Pimcore\Bundle\DirectEditBundle\Service\Permission\PimcoreBackendPermissionService;
use Pimcore\Model\Asset;
use Pimcore\Model\User;

class SessionPermissionService implements PermissionServiceInterface

    public function hasAssetPermission(Asset $asset): bool
        $user = User::getById($this->mapPimcoreUserId());
        return $user->isAllowed(PimcoreBackendPermissionService::PERMISSION_NAME) && $asset->isAllowed('publish', $user);

    public function getUserId(): ?string
        return session_id();

    public function getApplicationPrefix(): string
        return 'session_id_';

    public function mapPimcoreUserId(): int
        return 0;

2 Create a new Controller and implement routes

In your Controller you will need to set a prefix and implement the routes. You can simply use the FileEditControllerTrait if you dont need something custom.

Use your Permission Service and inject it

            $permissionService: '@AppBundle\DirectEdit\Permission\SessionPermissionService'

namespace AppBundle\Controller\DirectEdit;

 * Class FrontendDirectEditController
 * @package AppBundle\Controller\DirectEdit
 * @Route("/frontend_direct_edit")
class FrontendDirectEditController extends FrontendController
    use \Pimcore\Bundle\DirectEditBundle\Controller\FileEditControllerTrait;

Use it in the Frontend

You will need bootstrap and JQuery available in your frontend. Configure the script by setting a variable:

var pimcoredirectedit = {
    routePrefix: '...',
    applicationPrefix: '...',
    userId: '...'

Pass the prefix of your route, your application prefix and the current user id.

Add the js from the bundle: <script src="/bundles/pimcoredirectedit/js/bootstrap-modal.js"></script>

Choose a button and initialize the popup for it: createDirectEditButton(<my-button>, <asset-id>)

<!doctype html>
<html lang="en">
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet" href="/bundles/pimcoredirectedit/css/style.css">;


        <div class="container">

            <table class="table table-sm table-striped">
                {% for asset in assetList %}
                        <td>{{ }}</td>
                        <td>{{ asset.getThumbnail('test-100by100').getHtml() | raw }}</td>
                        {% if permissionService.hasAssetPermission(asset) %}
                                <button class="btn btn-primary js-direct-edit" data-asset-id="{{ }}" id="asset-{{ }}">
                                    Open in Client
                        {% endif %}

                {% endfor %}

        <script src="" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
        <script src="" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

            var pimcoredirectedit = {
                routePrefix: '/frontend_direct_edit',
                applicationPrefix: 'session_id_',
                userId: '{{ userId }}'
        <script src="/bundles/pimcoredirectedit/js/bootstrap-modal.js"></script>

            $('.js-direct-edit').each(function() {
                createDirectEditButton($(this), $(this).data('asset-id'));