Input Controls
The example list all available input controls inside Inputs package and show how to use them.
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\DateTimePicker2;
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">
<strong>DateTimePicker 2</strong>
<div class="row">
<div class="col-md-6">
From Date 2:
<?php
DateTimePicker2::create(array(
"name" => "startDatePicker2",
"options" => [
// "allowInputToggle" => true,
"display" => [
"theme" => "light", //"dark", "auto"
],
],
"maxDate" => "@endDatePicker2",
// "locale" => "en-GB",
// "format" => "yyyy-MM-dd HH:mm:ss",
// "disabledDates" => ['2023-12-10 00:00:00'],
// "clientEvents" => [
// "change" => "function(e) {
// console.log('datetimepicker 2 event change', e);
// }"
// ],
// "onReady" => "function() {
// console.log('DateTimePicker2 ready');
// }"
));
?>
</div>
<div class="col-md-6">
To Date 2:
<?php
DateTimePicker2::create(array(
"name" => "endDatePicker2",
"options" => [
"display" => [
"theme" => "light", //"dark", "auto"
],
],
"minDate" => "@startDatePicker2",
));
?>
</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