Rendering of the report parameters input form
Forena's custom renderer FrxParameterForm
allows you to customize various aspects of the rendering of the report parameters input form. More details about it can be found in the tutorial included with Forena, located at relative path reports/help.renderers#frxparameterform
. Here is part of what it says:
Use it on a div
tag anywhere within the body part of your report to control various aspects of the rendering of the parameter form.
Here is a sample of how to use it within the body tag of your report:
<body>
<div frx:renderer="FrxParameterForm" frx:title="Conditions or Settings"
frx:collapsible="1" frx:collapsed="1"
frx:submit="Label of the submit button" id="parmeter-form">
<p>
put your actual report parameters here ...
</p>
<p>{submit}</p>
</div>
<div>
here goes the rest of your report specifications ...
</div>
</body>
Some more details about the above example (also from the same documentation):
- frx:title: The title of the parameters field set.
- frx:collapsible: Indicate if the form should be collapsible or not:
- set to "1" to make the parameter form collapsible.
- set to "0" for a parameter form that cannot be collapsed.
- frx:collapsed: Indicate how a collapsible parameter form should be shown:
- set to "1" for a collapsed form.
- set to "0" for a not collapsed form.
The default behavior is to expand the form only if no data was returned by the report.
- frx:submit: The label of the submit button.
Theming the report parameters input form
For the actual positioning of the parameter form, I suggest you use a custom (new) CSS file, by adding 1 line to the "skin" used in your report (which is either the default skin, or your custom skin). To do so, just add a line that looks like so (name the CSS file whatever fits):
stylesheets[all][] = custom_forena_styling.css
Within that CSS file, you could (eg) add this CSS coding to make the parameter form be shown to the very right of your page (I prefer to do so by showing it "collapsed" as detailed above):
/* Apply some styling to the parameters form */
#parameters-wrapper fieldset.collapsed {
float: right;
}
More details about "Report Skins" can be found in the tutorial included with Forena, located at relative path /reports/help.skins
, or in the demo site. An example that uses these skins is to enable dataTables (to enhance the display of tabular reports).
Summary
With that, it's up to your own imagination to make the parameter form of your report (or chart) fit your needs, ie:
- using the custom renderer options.
- add whatever xHTML tags you want.
- style it using your custom CSS.
Disclosure: I'm a co-maintainer of Forena.