The Slick Report View and form

What is SlickReportView?

SlickReportView is a CBV that inherits form FromView and expose the report generator needed attributes. Also

  • Auto generate the search form

  • return the results as a json response if ajax request

  • Works on GET and POST

  • Export to CSV (extendable to apply other exporting method)

How the search form is generated ?

Behind the scene, Sample report calls slick_reporting.form_factory.report_form_factory a helper method which generates a form containing start date and end date, as well as all foreign keys on the report_model.

Export to CSV

To trigger an export to CSV, just add ?_export=csv to the url. This will call the export_csv on the view class, engaging a ExportToStreamingCSV

You can extend the functionality, say you want to export to pdf. Add a export_pdf method to the view class, accepting the report_data json response and return the response you want. This export_pdf` will be called automatically when url parameter contain ``?_export=pdf

Having an _export parameter not implemented, to say the view class do not implement export_{parameter_name}, will be ignored.


This is a simple ListView to display data in a model, like you would with an admin ChangeList view. It’s a simple ListView with a few extra features:

filters: a list of report_model fields to be used as filters.

Override the Form

The Form purposes are

  1. Provide the start_date and end_date

  2. provide a get_filters method which return a tuple (Q_filers , kwargs filter) to be used in filtering. q_filter: can be none or a series of Django’s Q queries kwargs_filter: None or a dict of filters

Following those 2 recommendation, your awesome custom form will work as you’d expect.


Charts settings is a list of objects which each object represent a chart configurations.

  • type: what kind of chart it is: Possible options are bar, pie, line and others subject of the underlying charting engine. Hats off to : Charts.js.

  • engine_name: String, default to SLICK_REPORTING_DEFAULT_CHARTS_ENGINE. Passed to front end in order to use the appropriate chart engine. By default supports highcharts & chartsjs.

  • data_source: Field name containing the numbers we want to plot.

  • title_source: Field name containing labels of the data_source

  • title: the Chart title. Defaults to the report_title.

  • plot_total if True the chart will plot the total of the columns. Useful with time series and crosstab reports.

On front end, for each chart needed we pass the whole response to the relevant chart helper function and it handles the rest.

The ajax response structure

Understanding how the response is structured is imperative in order to customize how the report is displayed on the front end.

Let’s have a look

# Ajax response or `report_results` template context variable.
response = {
    # the report slug, defaults to the class name all lower
    "report_slug": "",

    # a list of objects representing the actual results of the report
    "data": [
        {"name": "Product 0", "quantity__sum": "1774", "value__sum": "8758", "field_n" : "value_n"},
        # .....

    # A list explaining the columns/keys in the data results.
    # ie: len(response.columns) == len([i].keys())
    # Contains needed information about the verbose name , if summable , hints about the data type.
    "columns": [
        {"name": "name",
         "computation_field": "",
         "verbose_name": "Name",
         "visible": True,
         "type": "CharField",
         "is_summable": False
        {"name": "quantity__sum",
         "computation_field": "",
         "verbose_name": "Quantities Sold",
         "visible": True,
         "type": "number",
         "is_summable": True},
        {"name": "value__sum",
         "computation_field": "",
         "verbose_name": "Value $",
         "visible": True,
         "type": "number",
         "is_summable": True}

    # Contains information about the report as whole if it's time series or a a crosstab
    # And what's the actual and verbose names of the time series or crosstab specific columns.
    "metadata": {"time_series_pattern": "",
                 "time_series_column_names": [],
                 "time_series_column_verbose_names": [],
                 "crosstab_model": '',
                 "crosstab_column_names": [],
                 "crosstab_column_verbose_names": []

    # a mirror of the set charts_settings on the SlickReportView
    # SlickReportView populates the id if missing and fill the `engine_name' if not set
    "chart_settings": [
        {"type": "pie",
        'engine_name': 'highcharts',
         "data_source": ["quantity__sum"],
         "title_source": ["name"],
         "title": "Pie Chart (Quantities)",
         "id": "pie-0"},

        {"type": "bar",
        "engine_name": "chartsjs",
        "data_source": ["value__sum"],
        "title_source": ["name"],
        "title": "Column Chart (Values)",
         "id": "bar-1"}