Custom Views

You may wish to create your own custom means of visualizing the results of a query, instead of taking advantage of one of Fusion Connect's view types. Custom Views allow you to do just that by writing your own HTML, CSS, and JavaScript code. The "Display As" block of the Queries & Reports page appears as follows for Custom Views:

As shown above, there are 5 components of a Custom view, several of which have additional attributes within.

1. The Header component contains a block of HTML code that is displayed once at the beginning of the custom view. In the example in the screenshot above, this component defines the start of an HTML table.
2. The Body component contains the HTML code that displays an individual query result, as well as a single flag titled "Row Guided". If this flag is checked, a row guide will be displayed to the left of the custom view, and the HTML code described in the Body component will only be displayed once, populated with the values of the query result selected in the row guide. If this flag is unchecked, no row guide will appear on the report, and the Body HTML will be repeated once for each query result. In the above example, the Body of the view is a single table row, and since the Row Guided flag is unchecked, this HTML will be repeated, so the table defined in the Header component will be populated with one row for each query result.
3. The Footer component contains a block of HTML code that is displayed once at the end of the custom view. In the above example, it contains the end of an HTMLtable, as well as a second entire HTML table that is populated by static values independent of any individual query result.
4. The JS component contains a block of JavaScript code that is accessible from the Header, Body, and Footer components. It contains a "Initialization Handler", which is the code to be executed when the Custom view is first displayed, typically a call to a single, initializing function. Lastly, it contains a "Variable" attribute, which defines a variable to be made accessible to the HTML components.
5. The CSS component contains a block of CSS code that is accessible from the Header, Body, and Footer components. Abstracting style information to this component both saves space within the HTML components and allows styles to be shared between the three of them.