Summary Reports - Creating a custom HTML Scorecard landing page | Scribe

    Summary Reports - Creating a custom HTML Scorecard landing page

    • Fernando Montenegro |
    • 23 steps |
    • 5 minutes
    1

    Start by logging into ClearPoint Strategy at [app.clearpointstrategy.com/#/home](http://app.clearpointstrategy.com/#/home)

    Setting up the scorecard summary report page

    2

    The following steps will guide you through creating a Custom Field.

    3

    - Click on **System Settings** from the Control Panel - Select **System setup** - Click on **Custom Fields** under Standard Features - Make sure you are in the **Scorecard tab** - Click on the **Plus icon**

    - Click on **System Settings** from the Control Panel - Select **System setup** - Click on **Custom Fields** under Standard Features - Make sure you are in the **Scorecard tab** - Click on the **Plus icon**
    4

    - Under **Custom Field Name**, enter the name of the new custom field, in this example, ‘HTML Custom field’. - Select **HTML with Data** under **Field Type** - Under **Scorecards**, select the Scorecard where the custom field is going to be created - Once you are done with your changes, click **Save**

    - Under **Custom Field Name**, enter the name of the new custom field, in this example, ‘HTML Custom field’. - Select **HTML with Data** under **Field Type** - Under **Scorecards**, select the Scorecard where the custom field is going to be created - Once you are done with your changes, click **Save**
    5

    These steps will help you create a Landing page.

    6

    - Select **Scorecards & Elements** from the Control Panel - Choose **Manage Reports** - Open **Scorecard Reports** - Click the **Plus icon**

    - Select **Scorecards & Elements** from the Control Panel - Choose **Manage Reports** - Open **Scorecard Reports** - Click the **Plus icon**
    7

    - Under **Layout Name**, enter the name of the new custom landing page, in this example, ‘Upward Airlines custom landing page’. - From the left panel, locate the **custom field** created in the previous steps ‘HTML Custom field’. - Click on the **Plus icon** to add it to the layout - **Drag** your new custom field into the full-width portion of the layout - Once you are done, click **Save**

    - Under **Layout Name**, enter the name of the new custom landing page, in this example, ‘Upward Airlines custom landing page’. - From the left panel, locate the **custom field** created in the previous steps ‘HTML Custom field’. - Click on the **Plus icon** to add it to the layout - **Drag** your new custom field into the full-width portion of the layout - Once you are done, click **Save**
    8

    Edit the Custom field to add HTML code.

    9

    - Locate the newly created **Scorecard** report under Scorecard Reports - Double-click to edit the **custom field** on the page - Click the three dots icon to open **Additional Toolbar items** - Click the **brackets** to open the **HTML editor** - Paste your **HTML code** and **Close** - Once you are done with your changes, click the **green checkmark** to **Save** your changes

    - Locate the newly created **Scorecard** report under Scorecard Reports - Double-click to edit the **custom field** on the page - Click the three dots icon to open **Additional Toolbar items** - Click the **brackets** to open the **HTML editor** - Paste your **HTML code** and **Close** - Once you are done with your changes, click the **green checkmark** to **Save** your changes

    Coding your Bootstrap layout

    10

    Bootstrap layouts in ClearPoint are structured as rows and columns. Columns are contained within rows; each row of a bootstrap layout can have up to 12 individual columns, which can be combined into wider columns. Take a more in-depth look at bootstrap grids on .W3 Schools Each row and column is coded as a div class. In a class name, ‘row’ refers to row and ‘col’ refers to column; the number is the number (out of 12) of columns spanned; the middle value is the size of device where the page will be displayed. These components are then connected with dashes. The number values can be between 1 and 12. A value of 4 means the column will take up a third of the page (as 4/12 is 1/3), a value of 6 means the column will take up half the page, etc. The size values are: xs (for phone), s (for tablet), md (for monitor), or lg (for large monitor). We recommend using xs or s for your layout in ClearPoint, so that the rows will render properly in PDF Exports. For example: <div class="row"> <div class="col-xs-6">column 1 content </div> <div class="col-xs-6">column 2 content </div> </div> The code above corresponds to one row with two equal-width columns, where “column 1 content” and “column 2 content” are the messages that will display in each column, respectively.\ \ Once you have your rows and columns in place, you can either type content into the HTML tags, or you can use the dropdown menus in the HTML with Data field to select and insert information from elsewhere in ClearPoint. The following image displays the column div classes you would use to achieve the column widths shown in each row:

    Using widgets and iboxes

    11

    Widgets and iboxes are predefined elements in Bootstrap that give shape to your layout.

    Widgets

    12

    They are entered as a div within the column div, and the background color is specified in the div class. There are three class possibilties for widgets: ‘widget lazur-bg’, ‘widget navy-bg’, and ‘widget yellow-bg’. For example: <div class="row">\ <div class="col-xs-4">\ <div class="widget lazur-bg">\ This is a ‘class=”widget lazur-bg”‘ widget.\ ​</div>\ </div>\ <div class="col-xs-4">\ <div class="widget navy-bg">\ This is a ‘class=”widget navy-bg”‘ widget.\ ​</div>\ </div>\ |<div class="col-xs-4">\ <div class="widget yellow-bg">\ This is a ‘class=”widget yellow-bg”‘ widget.\ ​</div>\ </div>\ </div>

    iboxes

    13

    iboxes are white boxes, similar to the pods in ClearPoint, that allow content to be placed against a white background. The content shown above is contained in iboxes. Like widgets, they are entered as a div within a column. For example: <div class="row">\ <div class="col-xs-4">\ <div class="ibox-content">\ Right ibox\ ​</div>\ </div>\ <div class="col-xs-4">\ <div class="ibox-content">\ Center ibox\ ​</div>\ </div>\ <div class="col-xs-4">\ <div class="ibox-content">\ Left ibox\ ​</div>\ </div>\ </div>

    Adding charts to the Bootstrap layout

    14

    - Select **Scorecards & Elements** from the Control Panel - Choose **Manage Reports** - Open **Scorecard Reports** - Locate the newly created **Scorecard**

    - Select **Scorecards & Elements** from the Control Panel - Choose **Manage Reports** - Open **Scorecard Reports** - Locate the newly created **Scorecard**