Skip to main content
Version: 2023.2

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

    AppBundle\Controller\DirectEdit\FrontendDirectEditController:
arguments:
$permissionService: '@AppBundle\DirectEdit\Permission\SessionPermissionService'
<?php

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">
<head>
<!-- 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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="/bundles/pimcoredirectedit/css/style.css">;
</head>

<body>

<div class="container">


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

{% endfor %}
</table>
</div>


<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

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

<script>
$('.js-direct-edit').each(function() {
createDirectEditButton($(this), $(this).data('asset-id'));
});
</script>
</body>
</html>