ClearPoint Setup - Customizing HTML Tables
Fernando Montenegro
41 steps
7 minutes
Clearpointstrategy
1
Start by logging into ClearPoint Strategy at [app.clearpointstrategy.com/#/home](http://app.clearpointstrategy.com/#/home)
Pre-requisites
Create a Custom Field
2
The following steps will guide you in the creation of a Custom Field.
3
- From the Control Panel click on **System Settings** - Select **System Setup** - Click on **Custom Fields** under Standard Features
4
- 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**
5
- 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
6
In this example, we are going to add the Custom field created above to a Measure Detail Page.
7
- 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’.
8
- 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**
9
- **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
Inserting tables
10
- 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’.
11
- 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
12
- 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
13
We are going to go over two methods to add or delete rows or columns.
14
**From the Additional toolbar items icon**
15
- 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’.
16
- 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
17
- 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**
18
**From the table menu**
19
- 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’.
20
- 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**
21
- 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
22
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](https://www.w3schools.com/html/html_tables.asp) covers several more features of HTML tables.
23
- 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’.
24
- 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**
25
- 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
26
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>
27
- 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’.
28
- 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**
29
- 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
30
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>
31
- 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’.
32
- 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
33
- 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
34
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 widt h=”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>
35
- 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’.
36
- 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 H**TML Editor** icon - Copy and paste the **HTML code** mentioned above - Click **Close**
37
- 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
38
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>
39
- 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’.
40
- 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**
41
- 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**
ClearPoint Setup - Customizing HTML Tables
Fernando Montenegro
41 steps
7 minutes
Clearpointstrategy
1
Start by logging into ClearPoint Strategy at [app.clearpointstrategy.com/#/home](http://app.clearpointstrategy.com/#/home)
Pre-requisites
Create a Custom Field
2
The following steps will guide you in the creation of a Custom Field.
3
- From the Control Panel click on **System Settings** - Select **System Setup** - Click on **Custom Fields** under Standard Features
4
- 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**
5
- 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
6
In this example, we are going to add the Custom field created above to a Measure Detail Page.
7
- 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’.
8
- 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**
9
- **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
Inserting tables
10
- 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’.
11
- 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
12
- 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
13
We are going to go over two methods to add or delete rows or columns.
14
**From the Additional toolbar items icon**
15
- 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’.
16
- 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
17
- 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**
18
**From the table menu**
19
- 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’.
20
- 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**
21
- 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
22
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](https://www.w3schools.com/html/html_tables.asp) covers several more features of HTML tables.
23
- 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’.
24
- 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**
25
- 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
26
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>
27
- 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’.
28
- 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**
29
- 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
30
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>
31
- 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’.
32
- 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
33
- 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
34
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 widt h=”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>
35
- 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’.
36
- 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 H**TML Editor** icon - Copy and paste the **HTML code** mentioned above - Click **Close**
37
- 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
38
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>
39
- 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’.
40
- 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**
41
- 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**
