Skip to main content
Version: 2023.3

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'));