Customer Orders

Select customer then display their orders

Order NumberOrder DateStatus
No data available in table

This example demonstrates how to perform AJAX loading with SubReport. Sub Report is actually a full functional report and it is defined a sub report within a main one.

In this example, The CustomerOrders is the main report and it includes CutomerSelecing and ListOrders as its two subreports. If you have a big report, we can break this report into smaller easy-to-handle sub reports. In this way, you can manage reports easier.

The most powerful features of sub report is its ability to load on-demand via ajax request. So let imagine your have a big report combined from small sub reports, you can load those sub reports dynamically. In above example, the CustomerSelecting helps to select customers and ListOrders will display orders of selected customers. All are without page refreshing.

The SubReport is a built-in feature of KoolReport.

<?php

require_once "../../../../koolreport/autoload.php";

require_once "CustomerOrders.php";

$report = new CustomerOrders;

$report->run()->render();
<div class="report-content">
    <div class="text-center">
        <h1>Customer Orders</h1>
        <p class="lead">Select customer then display their orders</p>
    </div>
    
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <?php $this->subReport("customerselecting"); ?>
        </div>
    </div>
    
    <?php $this->subReport("listorders"); ?>
</div>
<?php

class CustomerSelecting extends \koolreport\KoolReport
{
    use \koolreport\inputs\Bindable;
    use \koolreport\inputs\POSTBinding;

    protected function defaultParamValues()
    {
        return array(
            "country"=>null,
            "customer"=>null,
        );
    }
    protected function bindParamsToInputs()
    {
        return array(
            "country",
            "customer"
        );
    }
    
    
    function settings()
    {
        $config = include "../../../config.php";
        return array(
            "dataSources"=>array(
                "automaker"=>$config["automaker"],
            ),
        );
    }

    function setup()
    {
        $this->src("automaker")->query("
            SELECT country from customers GROUP BY country
        ")->pipe($this->dataStore("countries"));

        if($this->params["country"]!=null)
        {
            $this->src("automaker")->query("
                SELECT customerNumber, customerName from customers
                WHERE
                    country=:country
            ")
            ->params(array(
                ":country"=>$this->params["country"],
            ))
            ->pipe($this->dataStore("customers"));            
        }
    }
}
<?php
    use \koolreport\inputs\Select;
?>

<div class="form-group">
    <label>Select country:</label>
    <?php
    Select::create(array(
        "name"=>"country",
        "dataStore"=>$this->dataStore("countries"),
        "defaultOption"=>array("--"=>null),
        "dataBind"=>"country",
        "clientEvents"=>array(
            "change"=>"function(){
                subReport.update('customerselecting',{
                    country:$('#country').val(),
                });
                subReport.update('listorders');
            }",
        ),
        "attributes"=>array(
            "class"=>"form-control",
        )
    ));
    ?>                
</div>

<?php
if($this->params["country"])
{
?>
    <div class="form-group">
    <label>Select customer in <?php echo $this->params["country"]; ?>:</label>
        <?php
        Select::create(array(
            "name"=>"customer",
            "dataStore"=>$this->dataStore("customers"),
            "defaultOption"=>array("--"=>null),
            "dataBind"=>array(
                "text"=>"customerName",
                "value"=>"customerNumber"
            ),
            "clientEvents"=>array(
                "change"=>"function(){
                    subReport.update('customerselecting',{
                        country:$('#country').val(),
                        customer:$('#customer').val(),
                    });                     
                }",
            ),
            "attributes"=>array(
                "class"=>"form-control",
            )
        ));    
        ?>
    </div>

<?php    
}
?>

<?php
if(isset($this->params["customer"]) && $this->params["customer"]!=null)
{
?>
    <div class="form-group text-center">
        <button onclick="listOrders()" class="btn btn-success">List Orders</button>
    </div>
<?php    
}
?>

<script type="text/javascript">
    function listOrders()
    {
        subReport.update("listorders",{
            "customerNumber":$('#customer').val(),
        });
    }
</script>
<?php

class ListOrders extends \koolreport\KoolReport
{
    function settings()
    {
        return array(
            "dataSources"=>array(
                "automaker"=>array(
                    "connectionString"=>"mysql:host=localhost;dbname=automaker",
                    "username"=>"root",
                    "password"=>"",
                    "charset"=>"utf8"
                ),
            ),
        );
    }

    function setup()
    {
        if(isset($this->params["customerNumber"]))
        {
            $this->src("automaker")
            ->query("
                SELECT orderNumber,orderDate,status FROM orders
                WHERE
                customerNumber = :customerNumber
            ")
            ->params(array(
                ":customerNumber"=>$this->params["customerNumber"],
            ))
            ->pipe($this->dataStore("orders"));
        }
    }
}
<?php
    use \koolreport\widgets\koolphp\Table;
?>
<?php
    Table::create(array(
        "dataStore"=>isset($this->params["customerNumber"])?$this->dataStore("orders"):null,
        "data"=>isset($this->params["customerNumber"])?null:array(),
        "columns"=>array(
            "orderNumber"=>array(
                "label"=>"Order Number"
            ),
            "orderDate"=>array(
                "label"=>"Order Date",
            ),
            "status"=>array(
                "label"=>"Status",
            )
        ),
        "cssClass"=>array(
            "table"=>"table table-bordered table-striped table-hover"
        )
    ));
?>

What People Are Saying

"KoolReport helps me very much in creating data report for my corporate! Keep up your good work!"
-- Alain Melsens

"The first use of your product. I was impressed by its easiness and powerfulness. This product is a great and amazing."
-- Dr. Lew Choy Onn

"Fantastic framework for reporting!"
-- Greg Schneider

Download KoolReport