{"type":"doc","content":[{"type":"paragraph","content":[{"text":"The Overview Dashboard provides predefined widgets that can be used alongside HTML code to enhance the dashboard template. Currently, supported widgets are Search Box, Banner, and Card. This section shows how to utilize, configure and what to pay attention to when using the predefined widgets. Further, it also shows how to override predefined styles to customize the widgets.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Examples","type":"text"}]},{"type":"paragraph","content":[{"text":"Find some complete code examples with links to the Picturepark website. ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1420,"id":"38cbe06e-7ae1-463b-9924-10a634496725","collection":"contentId-1264615591","type":"file","height":768}},{"type":"caption","content":[{"text":"Example of a Corp Com Dashboard with code example below. ","type":"text"}]}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"\n\n\n\n\n\n\n

\n \n

\n Sales Playbooks - Digitized. \n

\n Sales Playbooks. Digitized.\n Stop scrambling, start executing. Unlock your team’s potential by delivering your company’s knowledge, content, and playbooks on-demand.\n

\n \n \n \n \n \n \n \n \n \n \n \n

","type":"text"}]},{"type":"paragraph","content":[{"text":"You can upload all visuals for the dashboard to your Picturepark, create embeds and update the imageUrl links in the code with the embed links. ","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Create or Remove Dashboard","type":"text"}]},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"widget","parameters":{"macroParams":{"overlay":{"value":"youtube"},"_template":{"value":"com/atlassian/confluence/extra/widgetconnector/templates/youtube.vm"},"width":{"value":"400px"},"url":{"value":"https://www.youtube.com/watch?v=y8lN5lHVZOc"},"height":{"value":"300px"}},"macroMetadata":{"macroId":{"value":"fa8a37cbcec4044d6da3c97dfb71a8e4"},"schemaVersion":{"value":"1"},"placeholder":[{"type":"image","data":{"url":"/plugins/servlet/widgetconnector/placeholder?thumb=https://img.youtube.com/vi/y8lN5lHVZOc/mqdefault.jpg&overlay=youtube&width=400&height=300"}}],"title":"Widget Connector"}},"localId":"f339e256-80cb-440d-8cfa-d693baf4d69b"}},{"type":"heading","attrs":{"level":3},"content":[{"text":"Creation","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Open Settings >Templates","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"➕ Create a new template","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Select type “Dashboard page”","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Select your system language first (create translations later)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Give it any name","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add HTML (see code below)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Save ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Reload the browser and find the dashboard as the first entry in Picturepark.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Deletion","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Open Settings >Templates","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Find pages of type “Dashboard page”","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Find the template in your system language (English or German)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Select the template and delete ","type":"text"},{"type":"emoji","attrs":{"id":"1f5d1","text":"🗑","shortName":":wastebasket:"}},{"text":" (you cannot restore deleted items) ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Reload the browser and find the dashboard as the first entry in Picturepark.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Modify Dashboard ","type":"text"}]},{"type":"paragraph","content":[{"text":"You can modify the whole dashboard using HTML and CSS or work with the following predefined widgets. ","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Dashboard Search Box","type":"text"}]},{"type":"paragraph","content":[{"text":"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 ","type":"text"},{"text":"cp-dashboard-search-box","type":"text","marks":[{"type":"code"}]},{"text":" in the template.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":1122,"id":"632d068d-7ffa-4740-9174-2aeff1d1aeb5","collection":"contentId-1264615591","type":"file","height":362}},{"type":"caption","content":[{"text":"Example of a search box","type":"text"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Code Example","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"\n","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Configurable Attributes","type":"text"}]},{"type":"table","attrs":{"layout":"default","localId":"a55a4725-42c1-4fb3-9910-a66e6155ef02"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[218.0]},"content":[{"type":"paragraph","content":[{"text":"Attribute Name","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[123.0]},"content":[{"type":"paragraph","content":[{"text":"Required","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[419.0]},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[218.0]},"content":[{"type":"paragraph","content":[{"text":"class","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[123.0]},"content":[{"type":"paragraph","marks":[{"type":"alignment","attrs":{"align":"center"}}],"content":[{"type":"emoji","attrs":{"id":"274c","text":"❌","shortName":":x:"}},{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[419.0]},"content":[{"type":"paragraph","content":[{"text":"Classes that can be passed through to the internal HTML elements.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[218.0]},"content":[{"type":"paragraph","content":[{"text":"style","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[123.0]},"content":[{"type":"paragraph","marks":[{"type":"alignment","attrs":{"align":"center"}}],"content":[{"type":"emoji","attrs":{"id":"274c","text":"❌","shortName":":x:"}},{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[419.0]},"content":[{"type":"paragraph","content":[{"text":"Styles that can be passed through to the internal HTML elements.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[218.0]},"content":[{"type":"paragraph","content":[{"text":"[defaultSelectedIds]","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[123.0]},"content":[{"type":"paragraph","marks":[{"type":"alignment","attrs":{"align":"center"}}],"content":[{"type":"emoji","attrs":{"id":"274c","text":"❌","shortName":":x:"}},{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[419.0]},"content":[{"type":"paragraph","content":[{"text":"A string array of channel ids to provide a preselected channel in the channel picker.","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"paragraph","content":[{"text":"If the user has access to the channels, the first channel in the string array will be used.","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Override Styling","type":"text"}]},{"type":"paragraph","content":[{"text":"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:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"","type":"text"}]},{"type":"paragraph","content":[{"text":"The class ","type":"text"},{"text":"cp-dashboard-search-box","type":"text","marks":[{"type":"code"}]},{"text":" or the class for the internal search box ","type":"text"},{"text":"search-box","type":"text","marks":[{"type":"code"}]},{"text":" can be extended/overridden by a class that gets passed through by the ","type":"text"},{"text":"class","type":"text","marks":[{"type":"code"}]},{"text":" attribute. See examples for overriding below.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"css"},"content":[{"text":".override-classes.cp-dashboard-search-box {\n // Override class cp-dashboard-search-box\n}\n\n.override-classes.cp-dashboard-search-box .search-box {\n // Override class search-box\n}","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Dashboard Banner","type":"text"}]},{"type":"paragraph","content":[{"text":"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 ","type":"text"},{"text":"150px","type":"text","marks":[{"type":"code"}]},{"text":" and a maximum ","type":"text"},{"text":"33%","type":"text","marks":[{"type":"code"}]},{"text":" of the viewport height. The banner can be used by the tag ","type":"text"},{"text":"cp-dashboard-banner","type":"text","marks":[{"type":"code"}]},{"text":" in the template.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":1366,"id":"5c7029a1-1fbb-42c9-91ca-6a900dbc671a","collection":"contentId-1264615591","type":"file","height":334}},{"type":"caption","content":[{"text":"Example of a dashboard banner","type":"text"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Usage Example","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"\n","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Configurable Attributes","type":"text"}]},{"type":"table","attrs":{"layout":"default","localId":"286269ee-0371-4ed4-ad0a-bf30eaffe47c"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[254.0]},"content":[{"type":"paragraph","content":[{"text":"Attribute Name","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[87.0]},"content":[{"type":"paragraph","content":[{"text":"Required","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[419.0]},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[254.0]},"content":[{"type":"paragraph","content":[{"text":"class","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[87.0]},"content":[{"type":"paragraph","marks":[{"type":"alignment","attrs":{"align":"center"}}],"content":[{"type":"emoji","attrs":{"id":"274c","text":"❌","shortName":":x:"}},{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[419.0]},"content":[{"type":"paragraph","content":[{"text":"Classes that can be passed through to the internal HTML elements.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[254.0]},"content":[{"type":"paragraph","content":[{"text":"style","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[87.0]},"content":[{"type":"paragraph","marks":[{"type":"alignment","attrs":{"align":"center"}}],"content":[{"type":"emoji","attrs":{"id":"274c","text":"❌","shortName":":x:"}},{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[419.0]},"content":[{"type":"paragraph","content":[{"text":"Styles that can be passed through to the internal HTML elements.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[254.0]},"content":[{"type":"paragraph","content":[{"text":"backgroundImageUrl","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[87.0]},"content":[{"type":"paragraph","marks":[{"type":"alignment","attrs":{"align":"center"}}],"content":[{"type":"emoji","attrs":{"id":"2705","text":"✅","shortName":":white_check_mark:"}},{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[419.0]},"content":[{"type":"paragraph","content":[{"text":"The URL of a background image. The image is being fit inside the container by CSS property ","type":"text"},{"text":"object-fit: cover;","type":"text","marks":[{"type":"code"}]},{"text":". An image URL has to be provided.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[254.0]},"content":[{"type":"paragraph","content":[{"text":"teaserTitle","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[87.0]},"content":[{"type":"paragraph","marks":[{"type":"alignment","attrs":{"align":"center"}}],"content":[{"type":"emoji","attrs":{"id":"274c","text":"❌","shortName":":x:"}},{"text":" ","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[419.0]},"content":[{"type":"paragraph","content":[{"text":"The title of the banner. Inserted as HTML ","type":"text"},{"text":"

1264620573"}}]},{"text":" feature, you can customize the text displayed when accessing the dashboard. ","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Usage Example","type":"text"}]},{"type":"codeBlock","content":[{"text":"{% if isAnonymousUser %}\n
\n You are accessing the public area of this Picturepark Login to get full access!\n
\n{% endif %}","type":"text"}]},{"type":"paragraph"}],"version":1}

Browser not supported