ClearPoint gives you the ability to use Bootstrap to create a custom Scorecard landing page, Bootstrap is a framework that allows anyone with a basic knowledge of HTML and CSS to create elegant page designs.
Note: This is an advanced topic. For basic information on HTML elements, click here. For information on styling HTML with CSS, click here.
Setting up the scorecard summary report page
The following steps will guide you through creating a Custom Field.
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
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
These steps will help you create a Landing page.
Select Scorecards & Elements from the Control Panel
Choose Manage Reports
Open Scorecard Reports
Click the Plus icon
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
Edit the Custom field to add HTML code.
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
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 an in-depth look at bootstrap grids on W3Schools.
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 be displayed 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 the 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
Widgets and iboxes are predefined elements in Bootstrap that give shape to your layout.
Widgets
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
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
Select Scorecards & Elements from the Control Panel
Choose Manage Reports
Open Scorecard Reports
Locate the newly created Scorecard
Double-click to edit the custom field on the page
Click the dropdown menu next to Insert Data HTML Token
Select Chart using the Token Type dropdown menu
Select a Chart from the dropdown menu
Choose Default Height under Field
Once you are done with your selection, click Insert Token
Click the green checkmark to Save your changes
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.
These steps will help you find the HTML code snippet in Font Awesome
Navigate to https://fontawesome.com/icons
Use the search bar to look for your preferred icon, in this example, ‘House’.
Click on the icon you want to use
Click on the HTML tab to copy the code snippet
These steps will help you use the HTML code snippet in ClearPoint
Select Scorecards & Elements from the Control Panel
Choose Manage Reports
Open Scorecard Reports
Locate the newly created Scorecard
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 the HTML code snippet from Font Awesome and Close
Click the green checkmark to Save your changes
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 gray 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 [email protected] if you have any other questions!