...
| Code Block | ||
|---|---|---|
| ||
<!-- In the style area you can change colors and spaces. -->
<style>
.cp-dashboard-page {
background-color: #f8f8f8;
position:absolute;
width: 100%;
height: 100%;
}
.banner-section {
padding-bottom: 32px;
}
.teaser-section {
display: flex;
flex-direction: column;
justify-content: center;
color: #444444;
align-items: center;
padding-right: 16px;
padding-left: 16px;
padding-bottom: 32px;
text-align: center;
}
.teaser-title {
font-size: 18px;
font-weight: 500;
}
.teaser-subtitle {
color: #727272;
}
.cards-section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 32px;
padding-right: 16px;
padding-left: 16px;
padding-bottom: 32px;
}
@media screen and (min-width: 600px) {
.cards-section {
padding-right: 10%;
padding-left: 10%;
}
.teaser-section {
padding-right: 20%;
padding-left: 20%;
}
}
</style>
<!-- Below the style area you find the predefined widgets from Picturepark. -->
<div class="cp-dashboard-page">
<section class="banner-section">
<cp-dashboard-banner
backgroundImageUrl="https://picturepark.com/data/Releases/11.3-Rigi/CP-Dashboard-Resources/belinda-fewings-6wAGwpsXHE0-unsplash.jpg"
teaserTitle="Welcome to your Sales & Social Toolbox"
teaserText="Search or click on a box below for a specific area"
>
</cp-dashboard-banner>
</section>
<section class="teaser-section">
<p class="teaser-title">
Sales Playbooks - Digitized.
</p>
<p class="teaser-subtitle">
Sales Playbooks. Digitized.
Stop scrambling, start executing. Unlock your team’s potential by delivering your company’s knowledge, content, and playbooks on-demand.
</p>
</section>
<section class="cards-section">
<cp-dashboard-card
imageWidth="300"
imageHeight="200"
title="Marketing Strategy"
channelId="rootChannel"
url="/contents/rootChannel"
imageUrl="https://picturepark.com/data/Releases/11.3-Rigi/CP-Dashboard-Resources/campaign-creators-yktK2qaiVHI-unsplash.jpg"
>
</cp-dashboard-card>
<cp-dashboard-card
imageWidth="300"
imageHeight="200"
title="Sales Playbooks & Battlecards"
channelId="rootChannel"
url="/contents/rootChannel"
imageUrl="https://picturepark.com/data/Releases/11.3-Rigi/CP-Dashboard-Resources/arno-senoner-UhvEJosq-Zo-unsplash.jpg"
>
</cp-dashboard-card>
<cp-dashboard-card
openInNewTab="true"
imageWidth="300"
imageHeight="200"
title="Social Media Material"
channelId="rootChannel"
url="/contents/rootChannel"
imageUrl="https://picturepark.com/data/Releases/11.3-Rigi/CP-Dashboard-Resources/adem-ay-Tk9m_HP4rgQ-unsplash.jpg"
>
</cp-dashboard-card>
<cp-dashboard-card
openInNewTab="true"
imageWidth="300"
imageHeight="200"
title="Designs & Mockups"
channelId="rootChannel"
url="https://picturepark.com"
imageUrl="https://picturepark.com/data/Releases/11.3-Rigi/CP-Dashboard-Resources/hal-gatewood-tZc3vjPCk-Q-unsplash.jpg"
>
</cp-dashboard-card>
</section>
</div> |
You can download upload all visuals for the dashboard to your Picturepark, create embeds and update the imageUrl links in the code with the embed links.
...
| Widget Connector | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
Creation
Open Settings >Templates
➕ Create a new template
Select type “Dashboard page”
Select your system language first (create translations later)
Give it any name
Add HTML (see code below)
Save
Reload the browser and find the dashboard as the first entry in Picturepark.
Deletion
Open Settings >Templates
Find pages of type “Dashboard page”
Find the template in your system language (English or German)
Select the template and delete 🗑 (you cannot restore deleted items)
Reload the browser and find the dashboard as the first entry in Picturepark.
Modify Dashboard
You can modify the whole dashboard using HTML and CSS or work with the following predefined widgets.
...
| Code Block | ||
|---|---|---|
| ||
.override-classes.cp-dashboard-card{
// Override class cp-dashboard-card
}
.override-classes.cp-dashboard-card .link {
// Override class link
}
.override-classes.cp-dashboard-card .image {
// Override class image
}
.override-classes.cp-dashboard-card .title {
// Override class title
} |
Liquid syntax
The Dashboard page supports the Liquid template language.
You can access the following context from within your liquid template: { isAnonymousUser: bool, userRoleIds: string[], userRights: UserRight[], isDeveloper: bool, loginUrl: string, customer: { customerId: string, name: string }
Example for checking user rights
| Code Block |
|---|
{% if userRights contains "ManageSharings" and userRights contains "ManageEmbeds" %}
<cp-dashboard-card
channelId="keywords"
imageWidth="250"
imageHeight="200"
title="Shares Page that will show only Embeds"
url='/shares?sort=%5B%7B"field":"audit.creationDate","direction":"Desc"%7D%5D&searchMode=and&filters=%5B%7B"aggregationName":"ShareType","filter":%7B"field":"shareType","term":"Embed","kind":"TermFilter"%7D,"kind":"AggregationFilter"%7D%5D'
imageUrl="https://images.unsplash.com/photo-1560007689-654552332adf"
>
</cp-dashboard-card>
{% endif %} |
Example for checking user role IDs
| Code Block |
|---|
{% if userRoleIds contains 'bc0f6581b236497fbddf3ff67bfd2459' %}
<section class="cards-section">
<cp-dashboard-card
channelId="keywords"
openInNewTab="true"
imageWidth="300"
imageHeight="200"
title="Picturepark Website"
url="https://picturepark.com"
imageUrl="https://picturepark.com/data/System/KEI-Automated-Testing-DO-NOT-DELETE/picturepark.png"
>
</cp-dashboard-card>
</section>
{% endif %} |
| Anchor | ||||
|---|---|---|---|---|
|
When using the Guest Portal feature, you can customize the text displayed when accessing the dashboard.
Usage Example
| Code Block |
|---|
{% if isAnonymousUser %}
<p class="teaser-title">
You are accessing the public area of this Picturepark <a href="{{loginUrl}}">Login</a> to get full access!
</p>
{% endif %} |