Inputs
Overview #
Inputs are basically widget which is designed to receive inputs from users. For example, your dashboard contain a DateRangePicker which allows user to insert range of date and dashboard will show all metrics, charts, table within that period of time.
Common Settings #
Name | type | default | description |
---|---|---|---|
value | Get/set the value of input | ||
defaultValue | Get/set the default value, this value will be shown when user have not provided any value | ||
dataSource | Get/set the dataSource | ||
fields | Get/set list of fields |
Events #
When user takes an action on inputs widget, it will trigger action to send to server. At server-side, we can handle that event in widget handler. For example, on date range change, we update those related charts.
actionChange #
Each input widget has different set of event handlers but most of them will have the same change
event.
Example:
<?php
//CustomerSelect.php --------------------
use \koolreport\dashboard\inputs\Select;
class CustomerSelect extends Select
{
protected function dataSource()
{
return AutoMaker::table("customers")
->select("customerNumber","customerName");
}
//By adding this function, you will catch event change of Select
protected function actionChange($request, $response)
{
//This code will be execute when user select a customer
//It will ask PaymentTable to update
$this->dashboard()->widget("PaymentTable")->update();
}
}
\\PaymentTable.php ---------------------
use \koolreport\dashboard\widgets\Table;
class PaymentTable extends Table
{
protected function dataSource()
{
// PaymentTable will get the customerNumber from CustomerSelect widget
// and perform query
$customerNumber = $this->dashboard()->widget("CustomerSelect")->value();
return AutoMaker::table("payments")
->where("customerNumber",$customerNumber);
}
}
Components #
Button #
Name | type | default | description |
---|---|---|---|
text | string | "Submit" | Get/set the text inside button |
type | string | "primary" | Get/set the button type, accept "primary" , "info" , "danger" , "success" , "secondary" |
size | string | "md" | Get/set the size of button, accept "sm" , "md" , "lg" |
outline | boolean | false | Get/set the whether button is outline |
onClick | mixed | Get/set client action on click event, more details | |
disabled | boolean | false | Get/set whether button is disabled |
blockLevel | boolean | false | Get/set whether button take full size of available space |
laddaOnAction | boolean | false | Get/set whether button using ladda loading effect |
laddaStyle | string | "zoom-out" | Get/set the effect of ladda loading, accept "zoom-out" , "zoom-in" , "slide-left" , "slide-right" , "slide-up" , "slide-down" . |
attributes | array | Get/set the extra attributes to <button> element |
Examples #
Basic settings
<?php
use \koolreport\dashboard\inputs\Button;
class MyButton extends Button
{
protected functon onInit()
{
$this
->text("Update")
->type("success")
->size("sm")
->outline(true)
->disabled(false)
->blockLevel(false)
->laddaOnAction(true)
->laddaStyle("zoom-out")
->attributes([
"style"=>"margin-left:10px"
])
}
}
Action on user 's submission
<?php
use \koolreport\dashboard\inputs\Button;
class MyButton extends Button
{
...
// Adding the actionSubmit function will allow us to handler the client submit event
protected function actionSubmit($request, $response)
{
//Update CustomerTable on button click
$this->sibling("CustomerTable")->update();
}
}
Customize client on click action
<?php
use \koolreport\dashboard\Client;
class CustomerDetailButton extends Button
{
protected functon onInit()
{
$this
->onClick(function(){
//Loading the CustomerBoard on Button click
return Client::dashboard("CustomerBoard")->load();
})
}
}
CheckBoxList #
Name | type | default | description |
---|---|---|---|
vertical | boolean | true | Get/set whether list of checkbox will appear vertically |
Example:
<?php
use \koolreport\dashboard\inputs\CheckBoxList;
class OfficeCheckList extends CheckBoxList
{
protected function onInit()
{
$this->vertical(false);
}
protected function dataSource()
{
return AutoMaker::table("offices")->select("addressLine1");
}
}
RadioList #
Name | type | default | description |
---|---|---|---|
vertical | boolean | true | Get/set whether list of radio list will appear vertically |
Example:
<?php
use \koolreport\dashboard\inputs\RadioList;
class OfficeCheckList extends RadioList
{
protected function onInit()
{
$this->vertical(false);
}
protected function dataSource()
{
return AutoMaker::table("offices")->select("addressLine1");
}
}
DateRangePicker #
DateRangePicker is an input widget that allows you to pick a range of date. This is very helpful to build dashboard when information is built based on period of time.
Name | type | default | description |
---|---|---|---|
format | string | "MMM Do, YYYY" | Get/set date format, more details |
value | array | Get/set the range value of DateRangePicker | |
language | string | Get/set language of DateRangePicker | |
minDate | string | Get/set min date | |
maxDate | string | Get/set max date | |
icon | string | "fa fa-calendar-alt" | Get/set icon class |
caret | string | "fa fa-caret-down" | Get/set the caret icon |
Example:
<?php
use \koolreport\dashboard\inputs\DateRangePicker;
class MyRangePicker extends DateRangePicker
{
protected function onInit()
{
$this->format("MMM Do, YYYY")
->value(["2020-01-01 00:00:00","2020-03-01 00:00:00"])
->language("en")
->minDate("2020-01-01 00:00:00")
->maxDate("2020-04-01 00:00:00")
->icon("fa fa-calendar-alt")
->caret("fa fa-caret-down");
}
}
Events #
To register and handle the change event of DateRangePicker, you do:
<?php
use \koolreport\dashboard\inputs\DateRangePicker;
class MyRangePicker extends DateRangePicker
{
//Provide actionChange, this function will be called when user make change to DateRangePicker
protected function actionChange($request, $respose)
{
//Update the SaleTable
$this->sibling("SaleTable")->update();
}
}
"locale"=>null,
"format"=>null,
"icon"=>null,
"disableDates"=>null,
"minDate"=>null,
"maxDate"=>null,
"options"=>null,
DateTimePicker #
DateTimePicker allow you to pick a date or time.
Name | type | default | description |
---|---|---|---|
format | string | "MMM Do, YYYY" | Get/set date format, more details |
locale | string | Get/set the locale | |
disableDates | array | Get/set list of disabled dates | |
minDate | string | Get/set min date | |
maxDate | string | Get/set max date | |
icon | string | Get/set icon class | |
options | array | Get/set extra options for DateTimePicker |
Events #
DateTimePicker also support change event.
MultiSelect #
MultiSelect allows user to select list of items.
Name | type | default | description |
---|---|---|---|
defaultOption | array | Get/set the array of default options) | |
cssStyle | string | Get/set extra style | |
cssClass | string | "form-control" | Get/set css class |
size | string | "md" | Get/set the size of multiselect, "sm" , "md" , "lg" |
Examples:
<?php
use \koolreport\dashboard\inputs\MultiSelect;
class OfficeList extends MultiSelect
{
protected function onInit()
{
$this
->defaultOption([0,1]) //Select the first two offices
->cssStyle("margin-left:10px")
->cssClass("form-control")
->size("lg");
}
//Provide datasource
protected function dataSource()
{
return AutoMaker::table("offices")
->select("officeCode","addressLine1");
}
//Provide list of fields to act as value and text for MultiSelect
protected function fields()
{
return [
Number::create("officeCode"),
Text::create("addressLine1")
];
}
//Update the EmployeeTable when user select values
protected function actionChange($request, $response)
{
$this->sibling("EmployeeTable")->update();
}
}
RangeSlider #
RangeSlider allows you to setup a value range which user can drag to change the range
Example:
<?php>
use \koolreport\dashboard\inputs\RangeSlider;
class MyRange extends RangeSlider
{
protected function onInit()
{
$this
->value([20,80])
->range([
"min"=>0,
"max"=>100,
])
->scale(5)
->step(10)
->format([
"prefix"=>"$",
"decimals"=>2,
])
->rtl(false)
->vertical(false);
}
protected function onChange($request,$response)
{
$this->sibling("SaleTable")->update();
}
}
More information, please check.
Select #
Name | type | default | description |
---|---|---|---|
defaultOption | array | Get/set the array of default options) | |
cssStyle | string | Get/set extra style | |
cssClass | string | "form-control" | Get/set css class |
size | string | "md" | Get/set the size of multiselect, "sm" , "md" , "lg" |
Examples:
<?php
use \koolreport\dashboard\inputs\Select;
class OfficeList extends MultiSelect
{
protected function onInit()
{
$this
->defaultOption(0) //Select the first office
->cssStyle("margin-left:10px")
->cssClass("form-control")
->size("lg");
}
//Provide datasource
protected function dataSource()
{
return AutoMaker::table("offices")
->select("officeCode","addressLine1");
}
//Provide list of fields to act as value and text for MultiSelect
protected function fields()
{
return [
Number::create("officeCode"),
Text::create("addressLine1")
];
}
//Update the EmployeeTable when user select values
protected function actionChange($request, $response)
{
$this->sibling("EmployeeTable")->update();
}
}
Select2 #
Name | type | default | description |
---|---|---|---|
defaultOption | array | Get/set the array of default options | |
cssStyle | string | Get/set extra style | |
cssClass | string | "form-control" | Get/set css class |
size | string | "md" | Get/set the size of select2, "sm" , "md" , "lg" |
multiple | boolean | false | Get/set whether mode multiple is turned on |
placeHolder | string | Get/set the place holder text for Select2 | |
options | array | Get/set extra options for Select2 |
More information, please check.
Examples:
<?php
use \koolreport\dashboard\inputs\Select2;
class OfficeList extends Select2
{
protected function onInit()
{
$this
->defaultOption(0) //Select the first office
->cssStyle("margin-left:10px")
->cssClass("form-control")
->size("lg")
->multiple(false)
->placeHolder("Select list of offices");
}
//Provide datasource
protected function dataSource()
{
return AutoMaker::table("offices")
->select("officeCode","addressLine1");
}
//Provide list of fields to act as value and text for MultiSelect
protected function fields()
{
return [
Number::create("officeCode"),
Text::create("addressLine1")
];
}
//Update the EmployeeTable when user select values
protected function actionChange($request, $response)
{
$this->sibling("EmployeeTable")->update();
}
}
TextBox #
TextBox show text box for user to input.
Name | type | default | description |
---|---|---|---|
value | array | Get/set value of text bpx | |
cssStyle | string | Get/set extra style | |
cssClass | string | "form-control" | Get/set css class |
size | string | "md" | Get/set the size of textbox, "sm" , "md" , "lg" |
Events #
TextBox support blur
, focus
, click
, dbclick
events
class MyTextBox extends TextBox
{
//When user focus on textbox
protected function actionFocus($request, $response)
{
$this->sibling("EmployeeTable")->update();
}
//When user leave textbox
protected function actionBlur($request, $response)
{
$this->sibling("EmployeeTable")->update();
}
//When user click to textbox
protected function actionClick($request, $response)
{
$this->sibling("EmployeeTable")->update();
}
//When user double click on textbox
protected function actionDbclick($request, $response)
{
$this->sibling("EmployeeTable")->update();
}
}
Get started with KoolReport
KoolReport will help you to construct good php data report by gathering your data from multiple sources, transforming them into valuable insights, and finally visualizing them in stunning charts and graphs.