Creating a custom HTML scorecard landing page | ClearPoint Strategy

Creating a custom HTML scorecard landing page

Bootstrap is a framework that allows anyone with a basic knowledge of HTML and CSS to create elegant page designs. ClearPoint gives you the ability to use Bootstrap to create custom scorecard landing pages, and this article shows you how to build them. Note: This is an advanced topic. For basic information on HTML elements, click here. For information on styling HTML with CSS, click here.

In This Article


To see examples of pages you can create, check out these dashboards. To see possibilities for more colorful layouts, click on ‘Widgets’ from the sidebar of the linked page.

Setting up the scorecard summary report page

From Admin Options, click on the Custom Fields menu to create a custom field. This custom field should be created on the Scorecards tab as the HTML with Data field type.

Once the custom field is created, add a scorecard summary report from Manage Scorecard Reports. Drag your new custom field into the full-width portion of the layout and click Save.

Go to the new scorecard report and double click to edit the field on the page. Click the brackets in the HTML editor. This switches the editor into “text mode” so code can be added.

Coding your bootstrap layout

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.

The following image displays the column div classses you would use to achieve the column widths shown in each row:

booststrap page 9

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.

Using widgets and iboxes

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

Widgets

Widgets are the colorful boxes with rounded borders shown above. 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’.

The example above uses the following code:

<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

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.

The example above uses the following code:

<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

Important charts are a great example of the information you can display on a landing page. Use the dropdown menus in the HTML with Data field, to select the Scorecard, Token Type (select ‘Chart’), and name of the Chart. Select the chart size (e.g. ‘Default Height’) from the Field dropdown. Place your cursor where the chart should be located in the code, and click Insert.

Using Font Awesome icons in your bootstrap layout

ClearPoint allows you to display any of Font Awesome’s 7000+ icons in your layout by using the code provided on their website.

Follow this link. Click on any icon on the page. You will be taken to the page for the individual icon. On this page, click on Start Using This Icon and copy button to copy the HTML code.

Paste the code into the HTML for your layout where you want the icon to appear. You can also change the size of the icon by adding fa-lg, fa-2x, fa-3x, fa-4x, or fa-5x to the icon class.

Creating columns within columns

Each column, ibox, or widget can contain its own set of 12-column rows. This allows you to have rows of different heights appear next to one another, as you can see in the example above.

If you only want one row within the parent column, ibox, or widget, simply begin entering columns as if the column div was a row.

If you want the parent column to contain multiple rows of columns, you’ll need to enter a row div for each row within the column div, and then you can enter columns within these rows as you normally would.

FAQ

Q: How can I standardize the height of the columns in a row?

A: If your column is an ibox, add style="height:123px" to each ibox div, replacing 123 with the desired height in pixels. You’ll want to make sure the designated height is at least as tall as the tallest column (otherwise it will not make a difference in the height of that column). If your column is a widget, adding a pixel height won’t work – instead, insert <br> (a line break) as many times as necessary into your content until the height matches that of the other columns.

 

Q: How do I get ClearPoint’s grey background to show up in between my rows and columns?

A: All you need to do is remove the pod border and header of your HTML with Data field.

 

Q: Why does my content look weird when I double click on the HTML with Data field?

A: This is because the field does not show the widget backgrounds while it is being edited inline. As you’ll notice, the text of the widgets is white – it is also white in the inline editor, which is why you cannot see the text until you click over to edit the HTML code. If you highlight over the text on the visual side, you can see that it is still there – however, we recommend doing all your editing using the text editor with the black background.
Please reach out to support@clearpointstrategy.com if you have any other questions!