How to design a dynamic front-page for storyboards

Owned by Martijn Rademaker (Unlicensed)
Last updated: Jul 31, 2020
4 min read

Introduction

This article will take you through the steps of creating a sample dynamic front-page for storyboards, using a free format report within CXO software. 

To summarize the process:

  1. Creating a Free-Format Report using a Web View, Label and Image Control

  2. Upload the .png file to the CXO-Cockpit Application Server

  3. Adjust the web view control, to dynamically reflect the point of view changes.

  4. Configure the ‘export date’ to reflect current day by using a ‘Label’ control

  5. Configure a transparent placeholder box using an ‘Image’ control

Creating a Free-Format Report using a Web View Control

  1. Log into CXO and access the CXO-Designer to build a new "Free Format Report"

  2. From the controls on the right, please select the "Add Control" followed by "Web View"

     

  3. Please arrange the "Web View" portlet to size as needed

  4. Save and Exit

Upload the HTML file to the CXO-Cockpit Application Server

  1. In the report settings, you will now see a section called "Web View". Please expand this selection

  2. Deselect the checkbox that reads "Hide URL Bar"

  3. Since URL is a required field, please use a dummy URL at this point. I added http://google.com but this could be your company URL.

  4. Once a valid URL is added the report preview will allow you to select the button called "Upload a file"



  5. Click on "Upload a File", followed by selecting the "file_name.html" of the html document you created in Step 1

  6. Once the file has been uploaded to the CXO server, it will automatically generate a URL like "Uploads/...."

  7. Upload the different files corresponding to the dimension members in your selection. (E.g: Geographical, Europe, Asia etc..) and copy the generated URL from upload field in a notepad file. (we will need it later) 

Adjust the web view control, to dynamically reflect the point of view changes

  1. Adjust the URL in {ENT}.png

  2. Hide the URL Bar by selecting the box

  3. Use the POV in the URL, this will enable the dimension mentioned in step 8 to be dynamic. In this example set to ENT = Entity, but can be any dimension. Make sure to put the abbreviation between { } curly brackets.

  4. Access your CXO server and navigate to the 'Uploads' folder. C:\Program Files\CXO Solutions\CXO-Cockpit\Website\Uploads\…. rename the uploaded files from step 7 into the label used for the corresponding entity.

     

When the member in the point of view is updated, the background picture will change accordingly

Configure the ‘export date’ label to reflect current day

An export or print date could be relevant for storyboards. The period frequency of a CPM system is typically on a monthly base with no day information.

With the ‘Label’ control we are able to reflect the time into the reports.

  1. Add a label control

  2. Create a list and a cube calculation

    The list could be on any dimension, as long as there is a possibility to create a cube calculation. (so no split dimensions)

  3. Create a linked or shared cube calculation with the following syntax:

     

    Format ( Now() ,'MMM dd, yyyy' )

Configure a transparent placeholder box

The background picture could be relevant and therefore we set a transparent placeholder box.

This will allow you to set the important information in the spotlight without loosing the background image.

The steps are relatively simple, we need a ‘Image’ control.

  1. Create or download a transparent image

    Transparency could be set by various software, I used paint.net and set the transparency level to 75%

  2. Upload the file

 

CXO catalog

This report has been made available in the CXO Catalog library, this allows you to download the exact report configuration.

Only remaining, add the background images to your CXO upload folder on the server.