When you want to add a Salesforce Table to your form, all you need to do is drag a single element called "SF Table" on to the canvas. However it is important to understand that the the Table has a few parts in terms of style (like header, rows, modal windows etc) and so we need to choose which part to apply the style to. After you choose a part you can easily change its style using our regular style categories:
Font, Background, Size & Position, Margin, Padding, Alignment, order and CSS Name.
Following are examples of how to change the style of each part:
| 1- | Enter your form in the form builder |
| 2- | Drag a Table element from the "Elements" panel > "Salesforce" category. |
| 3- | When the Table is selected Go to "Properties Panel" > "Element" tab > "Style" Option |
Table
| 4- | Open the "Apply style to" dropdown and Choose the "Table" option This option allows you to change the style of the entire table in general Changing font, background, size, etc will effect the Table as a whole. |
 |
Row
| 4- | Open the "Apply style to" dropdown and Choose the "Row" option This option allows you to change the style of the all the grid rows Style changes will effect only the table rows. |
 |
Alternative row
| 4- | Open the "Apply style to" dropdown and Choose the Alternative Row" option This option will enable you to have alternating row style. It will effect every second row in the grid. |
 |
Header
| 4- | Open the "Apply style to" dropdown and Choose the "Header" option This option allows you to change the style of the table header. |
 |
Add Button
| 4- | Open the "Apply style to" dropdown and Choose the "Add Button" option This option will allow you to change the style of the Add Button, that appears at the bottom of the Table. You can change its size, colors, border, padding alignment etc. |
 |
Export Button
| 4- | Open the "Apply style to" dropdown and Choose the "Export Button" option This option will allow you to change the style of the Export Button, that appears at the bottom of the Table. You can change its size, colors, border, padding alignment etc. |
 |
Next Button
| 4- | Open the "Apply style to" dropdown and Choose the "Next Button" option This option will allow you to change the style of the Next Button, that appears inside the Table, in its own column. You can change its size, colors, border, padding alignment etc. |
 |
Previous Button
| 4- | Open the "Apply style to" dropdown and Choose the "Previous Button" option This option will allow you to change the style of the Previous Button, that appears at the bottom of the Table in a child level. You can change its size, colors, border, padding alignment etc. |
 |
Modal Header
| 4- | Open the "Apply style to" dropdown and Choose the "Modal Header" option If you allow your form filler to update data through the table: View, Edit, Delete and Add data, all this will be done in modal windows. You can change the windows style of these 4 modal windows. This option will allow you to change the style of the Modal window title |
 |
Modal body
| 4- | Open the "Apply style to" dropdown and Choose the "Modal Body" option If you allow your form filler to update data through the table: View, Edit, Delete and Add data, all this will be done in modal windows. You can change the windows style of these 4 modal windows. This option will allow you to change the style of the Modal window title (in the 4 modal windows)  |
Modal button Apply
| 4- | Open the "Apply style to" dropdown and Choose the "Modal Button Apply" option If you allow your form filler to update data through the table: View, Edit, Delete and Add data, all this will be done in modal windows. You can change the windows style of these 4 modal windows. This option will allow you to change the style of the Modal Apply Button (in the 4 modal windows) |
 |
Modal button Cancel
| 4- | Open the "Apply style to" dropdown and Choose the "Modal Button Cancel" option If you allow your form filler to update data through the table: View, Edit, Delete and Add data, all this will be done in modal windows. You can change the windows style of these 4 modal windows. This option will allow you to change the style of the Modal Cancel Button (in the 4 modal windows) |
 |
Col
| 4- | Open the "Apply style to" dropdown and Choose the "Col" name option (in our example we did not change the default names of the Columns and that is why we have "Col1", "Col2", "Col3", however after you change your column names they will be the ones listed in the "Apply style to" dropdown). This option allows you to change the style of the a column in the table: its color, its width etc. |
 |
Next Level
| 4- | Open the "Apply style to" dropdown and Choose the "Next Level" option. This option allows you to change the style of the Next Level column in the table. |
 |
