1. CenterView Tables

2. Session Outline Table Wizard Basic Table structure Modify the Look & Feel Advanced features JEval expressions Macro variables

3. Table Wizard –Select or create a datasource to supply table content –Header, Footer & Data view definitions –Header and Footer rows are optional Table Overview

4. By default all the data in the datafunnel will become the data view Data View

5. You can pull rows from the data view and promote them to the header Add additional rows –Additional rows are added before the promoted rows –Add static content to additional rows Merge/Split cells –Combine cells that span over rows and/or columns Header View

6. You can pull rows from the data view and demote them to the footer Add additional rows –Additional rows are added after the promoted rows –Add static content to additional rows Merge/Split cells –Combine cells that span over rows and/or columns Footer View

7. Demo What do you get out of the box Table Wizard

8. Formatting Your Table By default CenterView will format the header, footer and data views with predetermined styles –Title Rows, Alternating Row Color, Summary Rows Formatting is done through CSS classes or using inline CSS style definitions

9. CSS Style Definition –table.table {... } CSS Theme Classes

10. Demo

11. Apply tag is the table work horse – Apply Properties dialog – Change cell formatting – Change cell content – Change behavior Applies are – Context sensitive – Conditional – Executed in order Modifying the Look & Feel

12. Under the hood – Name – Test Grid – Setup a test grid – Keywords – * = ALL – Last = Last row/column – Condition – Always – IF – Plug-in – Application Modifying the Look & Feel

13. Hide –Specify the rows/columns to be hidden Group Level Applies

14. Demo

15. Style –Specify the CSS stylization and content of the cell(s) Hover –Specify the hover content Column Sort –Specify the columns that are sortable and their sorting properties Corda Image –Specify the image template file to embed into the cell(s) Header View Applies

16. Style –Specify the CSS stylization and content of the cell(s) Hover –Specify the hover content Corda Image –Specify the image template file to embed into the cell(s) Footer View Applies

17. Demo Header/Footer View Applies

18. Style –Specify the CSS stylization and content of the cell(s) Hover –Specify the hover content Drilldown –Specify the drilldown properties Corda Image –Specify the image template file to embed into the cell(s) Data View Applies

19. Demo Data View Applies

20. Advanced Features Pagination –Defined at the group level –Attributes Page Size Show Control in Header Show Control in Footer Class in-line style Corda Images Embed a Corda image into a table cell

21. Advanced Features (cont.)‏ col-span –Defines a column span row-span –Defines a column span Auto-span –Defined in the data-view –OLAP data –Automatically combine adjacent cells with the same values

22. Advanced Features (cont.)‏ Separator –Defined at group level –Can insert an empty row or column Sorting –Defined at header level –Can define which columns to sort on –Define default order (ascending/decending) –Define format of date data in column Multiple Groups –You can have multiple table-group tags under a table tag

23. Advanced Features (cont.)‏ Plug-ins –Defined in the Header, Data or Footer views –Allows you to customize your table

24. JEval Expressions There are 60+ JEval expressions available –Math, String manipulation, Data grid and Date Used in apply conditions –You can create complex expressions to evaluate the cell contents, its row/column position or evaluate the contents of another cell –Example: currencyToNumber(cellStringValue(%_DS:ROW_%,3)) - currencyToNumber(cellStringValue(%_DS:ROW_%, 2)) < 0 Used to change cell content –You can change the contents of a cell –Example (converts cell value of May 01, 2008 to 05/01/2008): dateFormat('MM/dd/yyyy', ‘%_TG:CELL_VALUE_%', 'MMM dd, yyyy')‏

25. Macro Variables These variables are replaced with their value before JEval expressions are evaluated. cellStringValue(%_DS:ROW_%,%_DS:COL_%) -> cellStringValue(3,8) %_TG:CELL_VALUE_% - Value of the HTML cell %_DS:CELL_VALUE_% - Value of the data cell %_DS:C#_% - Value of the data cell from the current row where # is the column number (ie. %_DS:C2_%)‏ %_DS:R#_% - Value of the data cell from the current column where # is the row number (ie. %_DS:R15_%)‏ %_TG:COL_% - Current html column number (1 based)‏ %_TG:ROW_% - Current html row number (1 based)‏ %_DS:COL_% - Current data column number (1 based)‏ %_DS:ROW_% - Current data row number (1 based)‏ %_DS:COL_COUNT_% - Number of columns in the data grid %_TG:COL_COUNT_% - Number of columns in the HTML table %_DS:ROW_COUNT_% - Number of rows in the data grid %_TG:ROW_COUNT_% - Number of rows in the HTML table %_TG:LOCALE_% - Current locale

26. Demo Pagination Sorting Auto-span Corda Images JEval Plugins