Code Block

language	html

<!-- 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
        channelId="searchSuggestion"
        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
        channelId="keywords"
        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
        channelId="keywords"
        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>

Dashboard Search Box

The Search Box is an element that allows to search for Content Items based on a search keyword. By typing a search, and selecting the correct channel and search settings, a redirection to content items is being performed upon a search. The search box can be used by the tag cp-dashboard-search-box in the template.

...

Code Example

Code Block

language	html

<cp-dashboard-search-box
    class="override-classes"
    [defaultSelectedIds]="['products', 'keywords']"
>
</cp-dashboard-search-box>

Configurable Attributes

...

Attribute Name

...

Required

...

Description

...

class

...

❌

...

Classes that can be passed through to the internal HTML elements.

...

style

...

❌

...

Styles that can be passed through to the internal HTML elements.

...

[defaultSelectedIds]

...

❌

...

A string array of channel ids to provide a preselected channel in the channel picker.

If the current user has no access to any of the channels or the channels do not exist, the channel with the lowest sort order will be preselected.

If the user has access to the channels, the first channel in the string array will be used.

Override Styling

The Search Box for the dashboard is a wrapper around an internal implementation of a search box. The bare minimum implementation of the Search Box widget can be considered as follows:

Code Block

language	html

<div class="cp-dashboard-search-box" [ngClass]="class" [style]="style">
    <INTERNAL_SEARCH_BOX_IMPLEMENTATION
      class="search-box"
      [ngClass]="class"
      [style]="style"
    >
    </INTERNAL_SEARCH_BOX_IMPLEMENTATION>
</div>

The class cp-dashboard-search-box or the class for the internal search box search-box can be extended/overridden by a class that gets passed through by the class attribute. See examples for overriding below.

Code Block

language	css

.override-classes.cp-dashboard-search-box {
  // Override class cp-dashboard-search-box
}

.override-classes.cp-dashboard-search-box .search-box {
  // Override class search-box
}

Dashboard Banner

The Dashboard Banner is an element that contains a background image, title, teaser, and a search box. It is preconfigured to use a height of a minimum 150px and a maximum 33% of the viewport height. The banner can be used by the tag cp-dashboard-banner in the template.

...

Usage Example

Code Block

language	html

<cp-dashboard-banner
    class="override-classes"
    backgroundImageUrl="https://picsum.photos/id/519/1920/1080"
	teaserTitle="Welcome to the Content Platform"
	teaserText="Search or click on a box below for a specific area"
	[defaultSelectedIds]="['products', 'keywords']"
>
</cp-dashboard-banner>

Configurable Attributes

...

Attribute Name

...

Required

...

Description

...

class

...

❌

...

Classes that can be passed through to the internal HTML elements.

...

style

...

❌

...

Styles that can be passed through to the internal HTML elements.

...

backgroundImageUrl

...

✅

Create or Remove Dashboard

Widget Connector

overlay	youtube
_template	com/atlassian/confluence/extra/widgetconnector/templates/youtube.vm
width	400px
url	https://www.youtube.com/watch?v=y8lN5lHVZOc
height	300px

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.

Dashboard Search Box

The Search Box is an element that allows to search for Content Items based on a search keyword. By typing a search, and selecting the correct channel and search settings, a redirection to content items is being performed upon a search. The search box can be used by the tag cp-dashboard-search-box in the template.

...

Code Example

Code Block

language	html

<cp-dashboard-search-box
    class="override-classes"
    [defaultSelectedIds]="['products', 'keywords']"
>
</cp-dashboard-search-box>

Configurable Attributes

Attribute Name

Required

Description

class

❌

Classes that can be passed through to the internal HTML elements.

style

❌

Styles that can be passed through to the internal HTML elements.

[defaultSelectedIds]

❌

A string array of channel ids to provide a preselected channel in the channel picker.

If the current user has no access to any of the channels or the channels do not exist, the channel with the lowest sort order will be preselected.

If the user has access to the channels, the first channel in the string array will be used.

Override Styling

The Search Box for the dashboard is a wrapper around an internal implementation of a search box. The bare minimum implementation of the Search Box widget can be considered as follows:

Code Block

language	html

<div class="cp-dashboard-search-box" [ngClass]="class" [style]="style">
    <INTERNAL_SEARCH_BOX_IMPLEMENTATION
      class="search-box"
      [ngClass]="class"
      [style]="style"
    >
    </INTERNAL_SEARCH_BOX_IMPLEMENTATION>
</div>

The class cp-dashboard-search-box or the class for the internal search box search-box can be extended/overridden by a class that gets passed through by the class attribute. See examples for overriding below.

Code Block

language	css

.override-classes.cp-dashboard-search-box {
  // Override class cp-dashboard-search-box
}

.override-classes.cp-dashboard-search-box .search-box {
  // Override class search-box
}

Dashboard Banner

The Dashboard Banner is an element that contains a background image, title, teaser, and a search box. It is preconfigured to use a height of a minimum 150px and a maximum 33% of the viewport height. The banner can be used by the tag cp-dashboard-banner in the template.

...

Usage Example

Code Block

language	html

<cp-dashboard-banner
    class="override-classes"
    backgroundImageUrl="https://picsum.photos/id/519/1920/1080"
	teaserTitle="Welcome to the Content Platform"
	teaserText="Search or click on a box below for a specific area"
	[defaultSelectedIds]="['products', 'keywords']"
>
</cp-dashboard-banner>

Configurable Attributes

Attribute Name	Required	Description
class	❌	Classes that can be passed through to the internal HTML elements.
style	❌	Styles that can be passed through to the internal HTML elements.
backgroundImageUrl	✅	The URL of a background image. The image is being fit inside the container by CSS property `object-fit: cover;`. An image URL has to be provided.
teaserTitle	❌	The title of the banner. Inserted as HTML `<h1>` element. Can be optionally passed.
teaserText	❌	The teaser text of the banner. Inserted as HTML `<p>` element. Can be optionally passed.
[defaultSelectedIds]	❌	The banner contains the Search Box widget. See “Configurable attributes” section of Search Box.

...

Code Block

language	css

.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
}

Create or Remove Dashboard

Widget Connector

overlay	youtube
_template	com/atlassian/confluence/extra/widgetconnector/templates/youtube.vm
width	400px
url	https://www.youtube.com/watch?v=y8lN5lHVZOc
height	300px

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)

...

Versions Compared

Old Version 11

New Version 12

Key

Dashboard Search Box

Code Example

Configurable Attributes

Override Styling

Dashboard Banner

Usage Example

Configurable Attributes

Create or Remove Dashboard

Creation

Deletion

Modify Dashboard

Dashboard Search Box

Code Example

Configurable Attributes

Override Styling

Dashboard Banner

Usage Example

Configurable Attributes

Create or Remove Dashboard

Creation

Deletion

Page Comparison

Versions Compared

Old Version 11

New Version 12

Key

Dashboard Search Box

Code Example

Configurable Attributes

Override Styling

Dashboard Banner

Usage Example

Configurable Attributes

Create or Remove Dashboard

Creation

Deletion

Modify Dashboard

Dashboard Search Box

Code Example

Configurable Attributes

Override Styling

Dashboard Banner

Usage Example

Configurable Attributes

Create or Remove Dashboard

Creation

Deletion