Install the SSP Dashboard Management feature

Last updated:
Edit on GitHub

This document describes how to install the Self-Service Portal (SSP) Dashboard Management feature.

Install all SSP features

For the Self-Service Portal to work correctly, you must install all SSP features. Each feature depends on the others for proper functionality.

Features SSP Dashboard Management depends on

Prerequisites

FEATURE VERSION INSTALLATION GUIDE
Spryker Core 202512.0 Install the Spryker Core feature
Self-Service Portal 202512.0 Install Self-Service Portal

Install the required modules

Install the required modules using Composer:

composer require spryker-feature/self-service-portal:"^202512.0" --update-with-dependencies
Verification

Make sure the following packages are now listed in composer.lock:

MODULE EXPECTED DIRECTORY
SelfServicePortal vendor/spryker-feature/self-service-portal

Set up transfer objects

Generate transfer classes:

console transfer:generate
Verification
Make sure the following transfer objects have been generated:
TRANSFER TYPE EVENT PATH
DashboardRequest transfer created src/Generated/Shared/Transfer/DashboardRequestTransfer
DashboardComponentCriteria transfer created src/Generated/Shared/Transfer/DashboardComponentCriteriaTransfer
DashboardResponse transfer created src/Generated/Shared/Transfer/DashboardResponseTransfer
CmsBlockRequest transfer created src/Generated/Shared/Transfer/CmsBlockRequestTransfer
CmsBlock transfer created src/Generated/Shared/Transfer/CmsBlockTransfer
SynchronizationData transfer created src/Generated/Shared/Transfer/SynchronizationDataTransfer
Customer transfer created src/Generated/Shared/Transfer/CustomerTransfer
CompanyUser transfer created src/Generated/Shared/Transfer/CompanyUserTransfer
Store transfer created src/Generated/Shared/Transfer/StoreTransfer

Demo data for EU region / DE store

Add translations

Here you can find how to import translations for Self-Service Portal feature

Import translations:

console data:import glossary

Add dashboard demo data

  1. Append cms_block.csv:
data/import/common/common/cms_block.csv 
>cms-sales_rep:default,sales_rep:default,Title and Content,@CmsBlock/template/title_and_content_block.twig,1,,,<div class='contact-list box box--dark' data-qa='component contact-list'><div class='block-title spacing-bottom' data-qa='component block-title'><div class='grid grid--middle'><h5 class='block-title__title spacing-right col'>Mitarbeiter des Kundendienstes</h5></div></div><div class='contact-list__representative'><div class='contact-list__representative-logo'><svg class='icon' data-qa='component icon' title='user'><use xlink:href='#:user'></use></svg><span class='contact-list__representative-image' style='background-image: url('');'></span></div><div class='contact-list__representative-info'><span class='contact-list__representative-name'>Alice Johnson</span><span class='contact-list__representative-data'><span class='contact-list__representative-data-col'><a href='mailto:[email protected]' class='contact-list__representative-mail'><svg class='icon contact-list__representative-icon' data-qa='component icon' title='mail'><use xlink:href='#:mail'></use></svg> [email protected]</a></span><span class='contact-list__representative-data-col'><a href='tel:+1 555-123-4567' class='contact-list__representative-phone'><svg class='icon contact-list__representative-icon' data-qa='component icon' title='phone'><use xlink:href='#:phone'></use></svg> +1 555-123-4567</a></span></span></div></div><div class='contact-list__representative'><div class='contact-list__representative-logo'><svg class='icon' data-qa='component icon' title='user'><use xlink:href='#:user'></use></svg><span class='contact-list__representative-image' style='background-image: url('');'></span></div><div class='contact-list__representative-info'><span class='contact-list__representative-name'>Michael Smith</span><span class='contact-list__representative-data'><span class='contact-list__representative-data-col'><a href='mailto:[email protected]' class='contact-list__representative-mail'><svg class='icon contact-list__representative-icon' data-qa='component icon' title='mail'><use xlink:href='#:mail'></use></svg> [email protected]</a></span><span class='contact-list__representative-data-col'><a href='tel:+1 555-987-6543' class='contact-list__representative-phone'><svg class='icon contact-list__representative-icon' data-qa='component icon' title='phone'><use xlink:href='#:phone'></use></svg> +1 555-987-6543</a></span></span></div></div></div>,<div class='contact-list box box--dark' data-qa='component contact-list'><div class='block-title spacing-bottom' data-qa='component block-title'><div class='grid grid--middle'><h5 class='block-title__title spacing-right col'>Service Representatives</h5></div></div><div class='contact-list__representative'><div class='contact-list__representative-logo'><svg class='icon' data-qa='component icon' title='user'><use xlink:href='#:user'></use></svg><span class='contact-list__representative-image' style='background-image: url('');'></span></div><div class='contact-list__representative-info'><span class='contact-list__representative-name'>Alice Johnson</span><span class='contact-list__representative-data'><span class='contact-list__representative-data-col'><a href='mailto:[email protected]' class='contact-list__representative-mail'><svg class='icon contact-list__representative-icon' data-qa='component icon' title='mail'><use xlink:href='#:mail'></use></svg> [email protected]</a></span><span class='contact-list__representative-data-col'><a href='tel:+1 555-123-4567' class='contact-list__representative-phone'><svg class='icon contact-list__representative-icon' data-qa='component icon' title='phone'><use xlink:href='#:phone'></use></svg> +1 555-123-4567</a></span></span></div></div><div class='contact-list__representative'><div class='contact-list__representative-logo'><svg class='icon' data-qa='component icon' title='user'><use xlink:href='#:user'></use></svg><span class='contact-list__representative-image' style='background-image: url('');'></span></div><div class='contact-list__representative-info'><span class='contact-list__representative-name'>Michael Smith</span><span class='contact-list__representative-data'><span class='contact-list__representative-data-col'><a href='mailto:[email protected]' class='contact-list__representative-mail'><svg class='icon contact-list__representative-icon' data-qa='component icon' title='mail'><use xlink:href='#:mail'></use></svg> [email protected]</a></span><span class='contact-list__representative-data-col'><a href='tel:+1 555-987-6543' class='contact-list__representative-phone'><svg class='icon contact-list__representative-icon' data-qa='component icon' title='phone'><use xlink:href='#:phone'></use></svg> +1 555-987-6543</a></span></span></div></div></div>,,,,
ssp-news-block-1,News Banner-1,Title and Content,@CmsBlock/template/title_and_content_block.twig,1,"<h5 class='spacing-x'>ssp_dashboard.general.news</h5>","<h5 class='spacing-x'>ssp_dashboard.general.news</h5>","<div class='grid grid--with-gutter'><div class='col col--with-gutter col--md-6 col--sm-12'></div><div class='col col--with-gutter col--md-6 col--sm-12'></div></div>","<div class='grid grid--with-gutter'><div class='col col--with-gutter col--md-6 col--sm-12'></div><div class='col col--with-gutter col--md-6 col--sm-12'></div></div>",,,,
  1. Append data/import/common/DE/cms_block_store.csv
>ssp-news-block-1,DE
cms-sales_rep:default,DE
  1. Append data/import/common/common/cms_slot.csv:
>ssp-news,ssp-news-block-1,SSP News.,SprykerCmsSlotBlock,@SelfServicePortal/views/dashboard/dashboard.twig,1
  1. Append data/import/common/common/cms_slot_block.csv
>slt-mobile-header,blck-9,1,@ShopUi/templates/page-layout-main/page-layout-main.twig,,,,,,,
ssp-news,ssp-news-block-1,1,@SelfServicePortal/views/dashboard/dashboard.twig,,,,,,,
  1. Append data/import/common/common/cms_slot_template.csv
>SSP Dashboard,Dashboard Page.,@SelfServicePortal/views/dashboard/dashboard.twig
  1. Append data/import/common/common/content_banner.csv
>ssp-br-1,SSP Banner Name 1,SSP Banner Description 1, ,,, ,,,/assets/current/default/images/400x200.png,,,/en/demo-landing-page,,,ssp-banner-image,,
ssp-br-2,SSP Banner Name 2,SSP Banner Description 2, ,,, ,,,/assets/current/default/images/400x200.png,,,/en/demo-landing-page,,,ssp-banner-image,,
  1. Append data/import/common/common/company_role_permission.csv
>Ottom_Admin,ViewBusinessUnitSspServicePermissionPlugin,
Spryker_Admin,ViewBusinessUnitSspServicePermissionPlugin,
test-company_Admin,ViewBusinessUnitSspServicePermissionPlugin,
trial-company_Admin,ViewBusinessUnitSspServicePermissionPlugin,
proof-company_Admin,ViewBusinessUnitSspServicePermissionPlugin,
BoB-Hotel-Jim_Admin,ViewBusinessUnitSspServicePermissionPlugin,
BoB-Hotel-Kudamm_Admin,ViewBusinessUnitSspServicePermissionPlugin,
BoB-Hotel-Mitte_Admin,ViewBusinessUnitSspServicePermissionPlugin,
BoB-Regular_Admin,ViewBusinessUnitSspServicePermissionPlugin,
test-company-2_Admin,ViewBusinessUnitSspServicePermissionPlugin,
Spryker_Buyer_With_Limit,ViewBusinessUnitSspServicePermissionPlugin,
Ottom_Admin,ViewCompanySspServicePermissionPlugin,
Spryker_Admin,ViewCompanySspServicePermissionPlugin,
test-company_Admin,ViewCompanySspServicePermissionPlugin,
trial-company_Admin,ViewCompanySspServicePermissionPlugin,
proof-company_Admin,ViewCompanySspServicePermissionPlugin,
BoB-Hotel-Jim_Admin,ViewCompanySspServicePermissionPlugin,
BoB-Hotel-Kudamm_Admin,ViewCompanySspServicePermissionPlugin,
BoB-Hotel-Mitte_Admin,ViewCompanySspServicePermissionPlugin,
BoB-Regular_Admin,ViewCompanySspServicePermissionPlugin,
test-company-2_Admin,ViewCompanySspServicePermissionPlugin,
Spryker_Buyer_With_Limit,ViewCompanySspServicePermissionPlugin,

Add twig template

  1. Create a new CMS template to be used for dashboard content sourced from the CMS:

src/Pyz/Shared/CmsBlock/Theme/default/template/title_and_content_block.twig

{% block content %}
    <!-- CMS_BLOCK_PLACEHOLDER : "title" -->
    <!-- CMS_BLOCK_PLACEHOLDER : "content" -->

    
    
{% endblock %}

Import the data

Import dashboard demo data:

console data:import cms-slot-template
console data:import content-banner
console data:import cms-block
console data:import cms-block-store
console data:import cms-slot
console data:import cms-slot-block
console data:import company-role-permission
Verification
  • Make sure the glossary keys have been added to spy_glossary_key and spy_glossary_translation tables.
  • Make sure that the imported data on CMS blocks, CMS slots, and content banners is present in the Back Office.

Set up behavior

PLUGIN SPECIFICATION PREREQUISITES NAMESPACE
ViewDashboardPermissionPlugin Provides access to the dashboard page. SprykerFeature\Yves\SelfServicePortal\Plugin\Permission
ViewCompanySspServicePermissionPlugin Provides access to company services on the dashboard page. SprykerFeature\Yves\SelfServicePortal\Plugin\Permission
ViewBusinessUnitSspServicePermissionPlugin Provides access to company business unit services on the dashboard page. SprykerFeature\Yves\SelfServicePortal\Plugin\Permission
CmsBlockCompanyBusinessUnitCmsBlockStorageReaderPlugin Enables business unit-specific CMS blocks. SprykerFeature\Client\SelfServicePortal\Plugin\CmsBlockStorage
SelfServicePortalPageRouteProviderPlugin Provides Yves routes for the the SSP dashboard page. SprykerFeature\Yves\SelfServicePortal\Plugin\Router
SspDashboardFilterControllerEventHandlerPlugin Restricts access to dashboard pages for non-company users. SprykerFeature\Yves\SelfServicePortal\Plugin\ShopApplication
SspServiceDashboardDataExpanderPlugin Expands dashboard data with services. SprykerFeature\Zed\SelfServicePortal\Communication\Plugin\SspDashboardManagement
SspInquiryDashboardDataExpanderPlugin Expands dashboard data with inquiries. SprykerFeature\Zed\SelfServicePortal\Communication\Plugin\SspDashboardManagement
SspFileDashboardDataExpanderPlugin Expands dashboard data with file attachments. SprykerFeature\Zed\SelfServicePortal\Communication\Plugin\SspDashboardManagement
SspAssetDashboardDataExpanderPlugin Expands dashboard data with assets. SprykerFeature\Zed\SelfServicePortal\Communication\Plugin\SspDashboardManagement

src/Pyz/Client/Permission/PermissionDependencyProvider.php

use Spryker\Client\Permission\PermissionDependencyProvider as SprykerPermissionDependencyProvider;
use SprykerFeature\Yves\SelfServicePortal\Plugin\Permission\ViewDashboardPermissionPlugin;
use SprykerFeature\Yves\SelfServicePortal\Plugin\Permission\ViewBusinessUnitSspServicePermissionPlugin;
use SprykerFeature\Yves\SelfServicePortal\Plugin\Permission\ViewCompanySspServicePermissionPlugin;
use SprykerFeature\Shared\SelfServicePortal\Plugin\Permission\ViewCompanySspInquiryPermissionPlugin;
use SprykerFeature\Shared\SelfServicePortal\Plugin\Permission\ViewBusinessUnitSspInquiryPermissionPlugin;

class PermissionDependencyProvider extends SprykerPermissionDependencyProvider
{
    protected function getPermissionPlugins(): array
    {
        return [
            new ViewDashboardPermissionPlugin(),
            new ViewBusinessUnitSspInquiryPermissionPlugin(),
            new ViewCompanySspInquiryPermissionPlugin(),
            new ViewCompanySspServicePermissionPlugin(),
            new ViewBusinessUnitSspServicePermissionPlugin(),
        ];
    }
}

src/Pyz/Yves/Router/RouterDependencyProvider.php

<?php

namespace Pyz\Yves\Router;

use Spryker\Yves\Router\RouterDependencyProvider as SprykerRouterDependencyProvider;
use SprykerFeature\Yves\SelfServicePortal\Plugin\Router\SelfServicePortalPageRouteProviderPlugin;

class RouterDependencyProvider extends SprykerRouterDependencyProvider
{
    /**
     * @return array<\Spryker\Yves\RouterExtension\Dependency\Plugin\RouteProviderPluginInterface>
     */
    protected function getRouteProvider(): array
    {
        return [
            new SelfServicePortalPageRouteProviderPlugin(),
        ];
    }
}

src/Pyz/Yves/ShopApplication/ShopApplicationDependencyProvider.php

<?php

namespace Pyz\Yves\ShopApplication;

use SprykerFeature\Yves\SelfServicePortal\Plugin\ShopApplication\SspDashboardFilterControllerEventHandlerPlugin;
use SprykerShop\Yves\ShopApplication\ShopApplicationDependencyProvider as SprykerShopApplicationDependencyProvider;

class ShopApplicationDependencyProvider extends SprykerShopApplicationDependencyProvider
{
    protected function getFilterControllerEventSubscriberPlugins(): array
    {
        return [
            new SspDashboardFilterControllerEventHandlerPlugin(),
        ];
    }
}

src/Pyz/Client/CmsBlockStorage/CmsBlockStorageDependencyProvider.php

<?php

namespace Pyz\Client\CmsBlockStorage;

use Spryker\Client\CmsBlockStorage\CmsBlockStorageDependencyProvider as SprykerCmsBlockStorageDependencyProvider;
use SprykerFeature\Client\SelfServicePortal\Plugin\CmsBlockStorage\CmsBlockCompanyBusinessUnitCmsBlockStorageReaderPlugin;

class CmsBlockStorageDependencyProvider extends SprykerCmsBlockStorageDependencyProvider
{
    /**
     * @return array<\Spryker\Client\CmsBlockStorageExtension\Dependency\Plugin\CmsBlockStorageReaderPluginInterface>
     */
    protected function getCmsBlockStorageReaderPlugins(): array
    {
        return [
            new CmsBlockCompanyBusinessUnitCmsBlockStorageReaderPlugin(),
        ];
    }
}

src/Pyz/Zed/SelfServicePortal/SelfServicePortalDependencyProvider.php

<?php

namespace Pyz\Zed\SelfServicePortal;

use SprykerFeature\Zed\SelfServicePortal\Communication\Plugin\SspDashboardManagement\SspAssetDashboardDataExpanderPlugin;
use SprykerFeature\Zed\SelfServicePortal\Communication\Plugin\SspDashboardManagement\SspFileDashboardDataExpanderPlugin;
use SprykerFeature\Zed\SelfServicePortal\Communication\Plugin\SspDashboardManagement\SspInquiryDashboardDataExpanderPlugin;
use SprykerFeature\Zed\SelfServicePortal\Communication\Plugin\SspDashboardManagement\SspServiceDashboardDataExpanderPlugin;
use SprykerFeature\Zed\SelfServicePortal\SelfServicePortalDependencyProvider as SprykerSelfServicePortalDependencyProvider;

class SelfServicePortalDependencyProvider extends SprykerSelfServicePortalDependencyProvider
{
    /**
     * @return array<int, \SprykerFeature\Zed\SelfServicePortal\Dependency\Plugin\DashboardDataExpanderPluginInterface>
     */
    protected function getDashboardDataExpanderPlugins(): array
    {
        return [
            new SspInquiryDashboardDataExpanderPlugin(),
            new SspFileDashboardDataExpanderPlugin(),
            new SspAssetDashboardDataExpanderPlugin(),
            new SspServiceDashboardDataExpanderPlugin(),
        ];
    }
}

Set up widgets

PLUGIN SPECIFICATION PREREQUISITES NAMESPACE
DashboardMenuItemWidget Provides a menu item widget for the customer account side menu. SprykerFeature\Yves\SelfServicePortal\Widget
SspFileListWidget Displays a file attachment available to a company user on the dashboard page in the customer account. SprykerFeature\Yves\SelfServicePortal\Widget
SspServiceListWidget Displays services available to a company user on the dashboard page in the customer account. SprykerFeature\Yves\SelfServicePortal\Widget

src/Pyz/Yves/ShopApplication/ShopApplicationDependencyProvider.php

<?php

namespace Pyz\Yves\ShopApplication;

use SprykerFeature\Yves\SelfServicePortal\Widget\DashboardMenuItemWidget;
use SprykerFeature\Yves\SelfServicePortal\Widget\SspFileListWidget;
use SprykerFeature\Yves\SelfServicePortal\Widget\SspServiceListWidget;

use SprykerShop\Yves\ShopApplication\ShopApplicationDependencyProvider as SprykerShopApplicationDependencyProvider;

class ShopApplicationDependencyProvider extends SprykerShopApplicationDependencyProvider
{
    /**
     * @return array<string>
     */
    protected function getGlobalWidgets(): array
    {
        return [
            DashboardMenuItemWidget::class,
            SspFileListWidget::class,
            SspServiceListWidget::class,
        ];
    }
}
Verification
  1. In the Back Office, go to Customers > Company Roles.
  2. Click Add Company User Role.
  3. Select a company.
  4. Enter a name for the role.
  5. In Unassigned Permissions, enable the View Dashboard permission.
  6. Click Submit.
  7. Go to Customers > Company Users.
  8. Click Edit next to a user.
  9. Assign the role you’ve just created to the user.
Verification
  1. On the Storefront, log in with the company user you’ve assigned the role to. Make sure the Dashboard menu item is displayed.
  2. Go to Customer Account > Dashboard. Make sure the page shows the following:
  • Correct company account information
  • Widgets for Assets, Inquiries, and Files
  1. Log out and log in with a compnay user without the role you’ve created. Make sure the Dashboard menu item is not displayed, and you can’t access the Dashboard page.

Set up frontend templates

For information about setting up frontend templates, see Set up SSP frontend templates.