Input Controls

The example list all available input controls inside Inputs package and show how to use them.

TextBox
DateRangePicker
RadioList
CheckBoxList
Select
MultiSelect
DateTimePicker
From Date:
To Date:
Select2 - Single Option
Select2 - Multiple Option
BSelect

Single option

Multiple options

RangerSlider

Single handle, value=50

With scale with 2 handles, values=(20,80)

* Please try to change form and submit, you will see the form values are persistent through form post. Below are values that archived from $params

{
    "dateRange": [
        "2024-03-19 00:00:00",
        "2024-03-19 23:59:59"
    ],
    "textBox": "KoolReport is great",
    "select": "",
    "multiSelect": [],
    "radioList": "",
    "checkBoxList": [],
    "startDatePicker": "2024-03-19 00:00:00",
    "endDatePicker": "2024-03-19 23:59:59",
    "rangeSliderOne": [
        50
    ],
    "rangeSliderTwo": [
        20,
        80
    ]
}

Inputs package is very important if you want to build a dynamic reports or dashboards. The dynamic reports or dashboards can receive parameters and generate outcome base on the parameters. For example, we can select a date range and the sale report will show status of sale within that timeframe.

By default, report created by KoolRepot can receive parameters however you may need to build your own form to get those parameters from users and put into report. The Inputs package can ease your tasks by connecting directly to the report to provided parameters for report.

The Inputs package contains the most used inputs such as DateTimePicker, DateRangePicker, MultiSelect widgets ready for you to insert into your report.

TextBox

<?php TextBox::create(array(
    "name"=>"textBox",
    "attributes"=>array(
        "class"=>"form-control",
        "placeholder"=>"Enter any text"
    )
));?>

RadioList

<?php RadioList::create(array(
    "name"=>"radioList",
    "dataStore"=>$this->dataStore("customers"),
    "dataBind"=>"customerName"
));?>

DateTimePicker

<?php DateTimePicker::create(array(
    "name"=>"startDatePicker",
    "maxDate"=>"@endDatePicker",
    "format"=>"MM/DD/YYYY HH:mm"
));?>    

<?php DateTimePicker::create(array(
    "name"=>"endDatePicker",
    "minDate"=>"@startDatePicker",
    "format"=>"MM/DD/YYYY HH:mm"
));?>

RangeSlider

<?php
RangeSlider::create(array(
    "name"=>"rangeSliderTwo",
    "handles"=>2,
    "ranges"=>array(
        "min"=>0,
        "max"=>100,
    ),
    "step"=>10,
    "scale"=>5,
));
?>

BSelect

<php
BSelect::create(array(
    "name"=>"multipleBSelect",
    "multiple"=>true,
    "dataStore"=>$this->dataStore("customers"),
    "dataBind"=>"customerName",
));
?>

DateRangePicker

<?php DateRangePicker::create(array(
    "name"=>"dateRange",
));?>

CheckBoxList

<?php CheckBoxList::create(array(
    "name"=>"checkBoxList",
    "dataStore"=>$this->dataStore("customers"),
    "dataBind"=>"customerName"
));?>

Select

<?php Select::create(array(
    "name"=>"select",
    "dataStore"=>$this->dataStore("customers"),
    "defaultOption"=>array("--"=>""),
    "dataBind"=>"customerName",
    "attributes"=>array(
        "class"=>"form-control",
    )
));?>

MultiSelect

<?php MultiSelect::create(array(
    "name"=>"multiSelect",
    "dataStore"=>$this->dataStore("customers"),
    "dataBind"=>"customerName",
    "attributes"=>array(
        "class"=>"form-control",
        "size"=>5
    )
));?> 

Select2

<?php
Select2::create(array(
    "name"=>"multipleSelect2",
    "multiple"=>true,
    "dataStore"=>$this->dataStore("customers"),
    "dataBind"=>"customerName",
    "attributes"=>array(
        "class"=>"form-control",
    )
));
?>

More information of Inputs package you may find here.

<?php 
require_once "Report.php";
$report = new Report;
$report->run()->render();
<?php

require_once "../../../load.koolreport.php";

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

    protected function defaultParamValues()
    {
        return array(
            "dateRange"=>array(date("Y-m-d 00:00:00"),date("Y-m-d 23:59:59")),
            "textBox"=>"KoolReport is great",
            "select"=>"",
            "multiSelect"=>array(),
            "radioList"=>"",
            "checkBoxList"=>array(),
            "startDatePicker"=>date("Y-m-d 00:00:00"),
            "endDatePicker"=>date("Y-m-d 23:59:59"),
            "rangeSliderOne"=>array(50),
            "rangeSliderTwo"=>array(20,80),
        );
    }

    protected function bindParamsToInputs()
    {
        return array(
            "dateRange",
            "select",
            "multiSelect",
            "textBox",
            "radioList",
            "checkBoxList",
            "startDatePicker",
            "endDatePicker",
            "singleSelect2",
            "multipleSelect2",
            "singleBSelect",
            "multipleBSelect",
            "rangeSliderOne",
            "rangeSliderTwo",
        );
    }

    public function settings()
    {
        $config = include "../../../config.php";
        return array(
            "dataSources"=>array(
                "automaker"=>$config["automaker"]
            )
        );
    }   
    protected function setup()
    {
        $this->src("automaker")->query("
            SELECT
                customerNumber,
                customerName
            FROM
                customers
            ORDER BY customerName
            LIMIT 40,5
        ")
        ->pipe($this->dataStore("customers"));
    } 
}
<?php 
    use \koolreport\inputs\DateRangePicker;
    use \koolreport\inputs\MultiSelect;
    use \koolreport\inputs\Select;
    use \koolreport\inputs\RadioList;
    use \koolreport\inputs\CheckBoxList;
    use \koolreport\inputs\TextBox;
    use \koolreport\inputs\DateTimePicker;
    use \koolreport\inputs\Select2;
    use \koolreport\inputs\RangeSlider;
    use \koolreport\inputs\BSelect;
    
?>
<style>
    .calendar.left .daterangepicker_input,
    .calendar.right .daterangepicker_input {
        display: none;
    }
</style>
<div class="report-content">
    <div class="text-center">
        <h1>Input Controls</h1>
        <p class="lead">
            The example list all available input controls inside Inputs package and show how to use them.
        </p>
    </div>
    <form method="post">
        <div class="row">
            <div class="col-md-6 form-group">
                <strong>TextBox</strong>
                <?php TextBox::create(array(
                    "name"=>"textBox",
                    "attributes"=>array(
                        "class"=>"form-control",
                        "placeholder"=>"Enter any text"
                    )
                ));?>
            </div>
            <div class="col-md-6 form-group">
                <strong>DateRangePicker</strong>
                <?php
                DateRangePicker::create(array(
                    "name"=>"dateRange",
                ));
                ?>
            </div>
            <div class="col-md-6 form-group">
                <strong>RadioList</strong>
                <?php
                RadioList::create(array(
                    "name"=>"radioList",
                    "dataStore"=>$this->dataStore("customers"),
                    "dataBind"=>"customerName"
                ));
                ?>
            </div>
            <div class="col-md-6 form-group">
                <strong>CheckBoxList</strong>
                <?php
                CheckBoxList::create(array(
                    "name"=>"checkBoxList",
                    "dataStore"=>$this->dataStore("customers"),
                    "dataBind"=>"customerName"
                ));
                ?>
            </div>
            <div class="col-md-6 form-group">
                <strong>Select</strong>
                <?php
                Select::create(array(
                    "name"=>"select",
                    "dataStore"=>$this->dataStore("customers"),
                    "defaultOption"=>array("--"=>""),
                    "dataBind"=>"customerName",
                    "attributes"=>array(
                        "class"=>"form-control",
                    )
                ));
                ?>
            </div>
            <div class="col-md-6 form-group">
                <strong>MultiSelect</strong>
                <?php
                MultiSelect::create(array(
                    "name"=>"multiSelect",
                    "dataStore"=>$this->dataStore("customers"),
                    "dataBind"=>"customerName",
                    "attributes"=>array(
                        "class"=>"form-control",
                        "size"=>5
                    )
                ));
                ?>
            </div>   
            <div class="col-md-12 form-group">
                <strong>DateTimePicker</strong>
                <div class="row">
                    <div class="col-md-6">
                        From Date:
                        <?php
                        DateTimePicker::create(array(
                            "name"=>"startDatePicker",
                            "maxDate"=>"@endDatePicker",
                            "format"=>"MM/DD/YYYY HH:mm",
                            "themeBase"=>"bs4",
                        ));
                        ?>
                    </div>
                    <div class="col-md-6">
                        To Date:
                        <?php
                        DateTimePicker::create(array(
                            "name"=>"endDatePicker",
                            "minDate"=>"@startDatePicker",
                            "format"=>"MM/DD/YYYY HH:mm",
                            "themeBase"=>"bs4",
                        ));
                        ?>
                    </div>
                </div>
            </div>
            <div class="col-md-12 form-group">
                
                <div class="row">
                    <div class="col-md-6">
                        <strong>Select2 - Single Option</strong>
                        <?php
                        Select2::create(array(
                            "name"=>"singleSelect2",
                            "dataStore"=>$this->dataStore("customers"),
                            "dataBind"=>"customerName",
                            "attributes"=>array(
                                "class"=>"form-control",
                            )
                        ));
                        ?>                                
                    </div>
                    <div class="col-md-6">
                        <strong>Select2 - Multiple Option</strong>
                        <?php
                        Select2::create(array(
                            "name"=>"multipleSelect2",
                            "multiple"=>true,
                            "dataStore"=>$this->dataStore("customers"),
                            "dataBind"=>"customerName",
                            "attributes"=>array(
                                "class"=>"form-control",
                            )
                        ));
                        ?>                                                                
                    </div>
                </div>
            </div>
            <div class="col-md-12 form-group">
                <strong>BSelect</strong>
                <div class="row">
                    <div class="col-md-6">
                        <p>Single option</p>
                        <?php
                        BSelect::create(array(
                            "name"=>"singleBSelect",
                            "dataStore"=>$this->dataStore("customers"),
                            "dataBind"=>"customerName",
                            "themeBase"=>"bs4",
                        ));
                        ?>                                                                
                    </div>
                    <div class="col-md-6">
                        <p>Multiple options</p>
                        <?php
                        BSelect::create(array(
                            "name"=>"multipleBSelect",
                            "multiple"=>true,
                            "dataStore"=>$this->dataStore("customers"),
                            "dataBind"=>"customerName",
                            "themeBase"=>"bs4",
                        ));
                        ?>                                                                
                    </div>
                </div>
            </div>
            <div class="col-md-12 form-group">
                <strong>RangerSlider</strong>
                <div class="row">
                    <div class="col-md-6">
                        <p>Single handle, value=<?php echo number_format($this->params["rangeSliderOne"][0]); ?></p>
                        <?php
                        RangeSlider::create(array(
                            "name"=>"rangeSliderOne",
                            "handles"=>1,
                            "step"=>10,
                            "range"=>array(
                                "min"=>0,
                                "max"=>100,
                            )
                        ));
                        ?>
                    </div>
                    <div class="col-md-6">
                        <p>With scale with 2 handles, values=(<?php echo number_format($this->params["rangeSliderTwo"][0]).",".number_format($this->params["rangeSliderTwo"][1]); ?>)</p>
                        <?php
                        RangeSlider::create(array(
                            "name"=>"rangeSliderTwo",
                            "handles"=>2,
                            "range"=>array(
                                "min"=>0,
                                "max"=>100,
                            ),
                            "step"=>10,
                            "scale"=>5,
                        ));
                        ?>
                    </div>
                </div>
            </div>
                                            
        </div>
        <div class="form-group" style="margin-top:30px;">
            <button class="btn btn-lg btn-primary">Submit form</button>
        </div>
        <p class="form-group">
            <i>* Please try to change form and submit, you will see the form
            values are persistent through form post. Below are values that archived from <code>$params</code>
            </i>
        </p>                    
        <pre><code><?php echo json_encode($this->params,JSON_PRETTY_PRINT) ?></code></pre>
    </form>
</div>

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 Get KoolReport Pro