Skip to main content
Version: 2024.1

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>