Widgets

Adding a widget to a page is as easy as this code

{% load i18n static erp_reporting_tags %}

<div class="widget-container">
    {% get_report base_model='expense' report_slug='ExpensesTotalStatement' as ExpensesTotalStatement %}
    {% get_widget ExpensesTotalStatement %}
</div>

The get_report tag will return a Report object that can be used to render the report. The get_widget tag will render the report as a card with a title, a table and a chart container.

This code above will be actually rendered as this in the html page:

<div class="card" id="expensestotalstatement">
        <div class="card-body">
            <div data-report-widget
                 data-report-url="/reports/expense/expensestotalstatement/"
                 data-extra-params=""
                 data-success-callback=""
                 data-fail-callback=""
                report-form-selector=""
                data-chart-id=""
                data-display-chart-selector=""
                >

                <!-- container for the chart -->
                <div id="container" data-report-chart style="width:100%; height:400px;"></div>

                <!-- container for the table -->
                <div data-report-table>

                </div>
            </div>
        </div>
    </div>

The data-report-widget attribute is used by the javascript to find the widget and render the report. you can add [data-no-auto-load] to the widget to prevent the widget from loading automatically.

The data-report-url attribute is the url that will be used to fetch the data. The data-extra-params attribute is used to pass extra parameters to the report. The data-success-callback attribute is used to pass a javascript function that will be called after the report data is retrieved. The data-fail-callback attribute is used to pass a javascript function that will be called if the report data retrieval fails. The report-form-selector attribute is used to pass a jquery selector that will be used to find the form that will be used to pass extra parameters to the report. The data-chart-id attribute is used to pass the id of the chart that will be rendered. The data-display-chart-selector attribute is used to pass if the report loader should display the chart selectors links.

The data-report-chart attribute is used by the javascript to find the container for the chart. The data-report-table attribute is used by the javascript to find the container for the table.

get_widget Tag can accept a template_name parameter to render the report using a custom template. By default it renders the erp_reporting/report_widget.html template.

Default Arguments

extra_params success_callback failure_callback display_chart display_table chart_id display_title title (default to report report title)

Customization

You You can customize how the widget is loading by defining your own success call-back and fail call-back functions.

The success call-back function will receive the report data as a parameter

{% load i18n static erp_reporting_tags %}

<div class="widget-container">
    {% get_report base_model='expense' report_slug='ExpensesTotalStatement' as ExpensesTotalStatement %}
    {% get_html_panel ExpensesTotalStatement data-success-callback='my_success_callback' %}
</div>

<script>
    function my_success_callback(data, $element) {
        $element.html(data);
        console.log(data);
    }
</script>

For deeper customization visit _javascript section.