ClearPoint provides users with the ability to easily insert HTML tables and customize the rows and columns. With the HTML editor, users can modify the HTML code to make changes to various aspects of the table, such as width, colors, and borders.
Pre-requisites
Create a Custom Field
The following steps will guide you in the creation of a Custom Field.
From the Control Panel click on System Settings
Select System Setup
Click on Custom Fields under Standard Features
Each custom field can be associated with only one type of element, in this example we are going to use a Measure
Click on the Measure tab
Click on the Plus icon
Under Custom Field Name, enter the name of the new custom field, in this example, ‘Custom HTML Tables’.
Choose HTML Text as the Field Type
Once you are done with your changes, click Save
Add a Custom Field to an Element Detail Page
In this example, we are going to add the Custom field created above to a Measure Detail Page.
Select Scorecards & Elements from the Control Panel
Choose Manage Elements
Open Measures
Click on the Measure you are going to be working with, in this example, ‘Expenses’.
From the Detail Page click on the dropdown menu next to the edit
Choose Edit Layout
Locate the Custom Field on the left panel, in this example, ‘Custom HTML Tables’.
Click on the Plus icon
Drag and drop the Custom Field to the desired location
Once you are done with your changes, click Save
The custom field will be part of the Measure Detail page moving forward
Add a table
Select Scorecards & Elements from the Control Panel
Choose Manage Elements
Open Measures
Click on the Measure you are going to be working with, in this example, ‘Expenses’.
Double-click on the Custom Field where you want to insert a table, in this example, ‘Custom HTML Field’.
Click on the Addition toolbar items icon
Click on the Table icon
Insert a Table, we are going to choose 3x2
You can enter content into the table cells
Click on the Green checkmark at the top of the screen to Save your changes
You will find your newly added table on the Measure Detail page
Adding or deleting rows or columns
We are going to go over two methods to add or delete rows or columns.
From the Additional toolbar items icon
Select Scorecards & Elements from the Control Panel
Choose Manage Elements
Open Measures
Click on the Measure you are going to be working with, in this example, ‘Expenses’.
Double-click on the Custom Field where you want to edit the table, in this example, ‘Custom HTML Field’.
Click on the Addition toolbar items icon
Click on the Table icon
Select Row
From here you can Add or Delete a Row or Column
Click on the Green checkmark at the top of the screen to Save your changes
You will find your newly added table on the Measure Detail page
From the table menu
Select Scorecards & Elements from the Control Panel
Choose Manage Elements
Open Measures
Click on the Measure you are going to be working with, in this example, ‘Expenses’.
Double-click on the Custom Field where you want to edit the table, in this example, ‘Custom HTML Field’.
Click on any cell and a table menu will be displayed
From here you can Add, Delete, and access the Table Properties
Click on the Green checkmark at the top of the screen to Save your changes
You will find your newly added table on the Measure Detail page
Editing HTML code
You can easily insert the tables and select rows and columns without having to edit any code, but for further customizations, it is helpful to be familiar with the HTML table structure:
Each element has an open tag (e.g. <td>) and a close tag, (which looks like the open tag, plus a slash, e.g. </td>). The content goes in between the tags.
Tables are represented by <table> tags.
Tags for table rows appear as <tr>
Individual cell tags appear as <td> (stands for table data)
A three-column, two-row table has the following code:
<table>
<tr>
<td>Top left</td>
<td>Top middle</td>
<td>Top right</td>
</tr>
<tr>
<td>Bottom left</td>
<td>Bottom middle</td>
<td>Bottom right</td>
</tr>
</table>
If you’d like more information, W3Schools covers several more features of HTML tables.
Select Scorecards & Elements from the Control Panel
Choose Manage Elements
Open Measures
Click on the Measure you are going to be working with, in this example, ‘Expenses’.
Double-click on the Custom Field where you want to edit the table, in this example, ‘Custom HTML Field’.
Click on the Addition toolbar items icon
Click on the HTML Editor icon
Copy and paste the HTML code mentioned above
Click Close
Click on the Green checkmark at the top of the screen to Save your changes
You will find your newly added table on the Measure Detail page
Making borders visible
To make borders on your table visible, first locate the table open tag <table>
Before the closing bracket, add a space, and the text border=”1″. This will put a thin black border around all cells in the table.
Your HTML code will look like this:
<table border=”1″>
<tr>
<td>Top left</td>
<td>Top middle</td>
<td>Top right</td>
</tr>
<tr>
<td>Bottom left</td>
<td>Bottom middle</td>
<td>Bottom right</td>
</tr>
</table>
Select Scorecards & Elements from the Control Panel
Choose Manage Elements
Open Measures
Click on the Measure you are going to be working with, in this example, ‘Expenses’.
Double-click on the Custom Field where you want to edit the table, in this example, ‘Custom HTML Field’.
Click on the Addition toolbar items icon
Click on the HTML Editor icon
Copy and paste the HTML code mentioned above
Click Close
Click on the Green checkmark at the top of the screen to Save your changes
You will find your newly added table on the Measure Detail page
Changing table width
To change the table width, first locate the table open tag <table>
Before the closing bracket, add a space, and the text width=”50%”, replacing 50 with the desired width.
Your HTML code will look like this:
<table width=”50%”>
<tr>
<td>Top left</td>
<td>Top middle</td>
<td>Top right</td>
</tr>
<tr>
<td>Bottom left</td>
<td>Bottom middle</td>
<td>Bottom right</td>
</tr>
</table>
Select Scorecards & Elements from the Control Panel
Choose Manage Elements
Open Measures
Click on the Measure you are going to be working with, in this example, ‘Expenses’.
Double-click on the Custom Field where you want to edit the table, in this example, ‘Custom HTML Field’.
Click on the Addition toolbar items icon
Click on the HTML Editor icon
Copy and paste the HTML code mentioned above
Click Close
Click on the Green checkmark at the top of the screen to Save your changes
You will find your newly added table on the Measure Detail page
Changing column width
To change the width of a column on your table, use ctrl+f to search for td. Find the td open tags in the first row of your table (after the first tr tag).
Before the closing bracket of each, add a space, and the text width=”33%”, replacing 33 with the desired width.
Adding widths to the cells in the first row will apply them to the rest of the table.
<table>
<tr>
<td width=”33%”>Top left </td>
<td width=”33%”>Top middle </td>
<td width=”33%”>Top right </td>
</tr>
<tr>
<td>Bottom left</td>
<td>Bottom middle</td>
<td>Bottom right</td>
</tr>
</table>
Select Scorecards & Elements from the Control Panel
Choose Manage Elements
Open Measures
Click on the Measure you are going to be working with, in this example, ‘Expenses’.
Double-click on the Custom Field where you want to edit the table, in this example, ‘Custom HTML Field’.
Click on the Addition toolbar items icon
Click on the HTML Editor icon
Copy and paste the HTML code mentioned above
Click Close
Click on the Green checkmark at the top of the screen to Save your changes
You will find your newly added table on the Measure Detail page
Changing background color
You can change the background color of specific rows, columns, or cells in an HTML table.
Find the open tag of the element whose background color you want to change.
Before the closing bracket, add a space, and the text style=”background-color: #000000″, replacing the zeros with the desired hex code.’
<table border=”1″>
<tr>
<td style=”background-color: #008000″>Top left</td>
<td style=”background-color: #FFFF00″>Top middle</td>
<td style=”background-color: #FF0000″>Top right</td>
</tr>
<tr>
<td>Bottom left</td>
<td>Bottom middle</td>
<td>Bottom right</td>
</tr>
</table>
Select Scorecards & Elements from the Control Panel
Choose Manage Elements
Open Measures
Click on the Measure you are going to be working with, in this example, ‘Expenses’.
Double-click on the Custom Field where you want to edit the table, in this example, ‘Custom HTML Field’.
Click on the Addition toolbar items icon
Click on the HTML Editor icon
Copy and paste the HTML code mentioned above
Click Close
Click on the Green checkmark at the top of the screen to Save your changes
You will find your newly added table on the Measure Detail page
