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 #

Nametypedefaultdescription
valueGet/set the value of input
defaultValueGet/set the default value, this value will be shown when user have not provided any value
dataSourceGet/set the dataSource
fieldsGet/set list of fields

Note: Those above properties follows this code rules.

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 #

Nametypedefaultdescription
textstring"Submit"Get/set the text inside button
typestring"primary"Get/set the button type, accept "primary", "info", "danger", "success", "secondary"
sizestring"md"Get/set the size of button, accept "sm", "md", "lg"
outlinebooleanfalseGet/set the whether button is outline
onClickmixedGet/set client action on click event, more details
disabledbooleanfalseGet/set whether button is disabled
blockLevelbooleanfalseGet/set whether button take full size of available space
laddaOnActionbooleanfalseGet/set whether button using ladda loading effect
laddaStylestring"zoom-out"Get/set the effect of ladda loading, accept "zoom-out", "zoom-in", "slide-left", "slide-right", "slide-up", "slide-down".
attributesarrayGet/set the extra attributes to <button> element

Note: Those above properties follows this code rules.

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 #

Nametypedefaultdescription
verticalbooleantrueGet/set whether list of checkbox will appear vertically

Note: Those above properties follows this code rules.

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 #

Nametypedefaultdescription
verticalbooleantrueGet/set whether list of radio list will appear vertically

Note: Those above properties follows this code rules.

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.

Nametypedefaultdescription
formatstring"MMM Do, YYYY"Get/set date format, more details
valuearrayGet/set the range value of DateRangePicker
languagestringGet/set language of DateRangePicker
minDatestringGet/set min date
maxDatestringGet/set max date
iconstring"fa fa-calendar-alt"Get/set icon class
caretstring"fa fa-caret-down"Get/set the caret icon

Note: Those above properties follows this code rules.

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.

Nametypedefaultdescription
formatstring"MMM Do, YYYY"Get/set date format, more details
localestringGet/set the locale
disableDatesarrayGet/set list of disabled dates
minDatestringGet/set min date
maxDatestringGet/set max date
iconstringGet/set icon class
optionsarrayGet/set extra options for DateTimePicker

Note: Those above properties follows this code rules.

Events #

DateTimePicker also support change event.

MultiSelect #

MultiSelect allows user to select list of items.

Nametypedefaultdescription
defaultOptionarrayGet/set the array of default options)
cssStylestringGet/set extra style
cssClassstring"form-control"Get/set css class
sizestring"md"Get/set the size of multiselect, "sm", "md", "lg"

Note: Those above properties follows this code rules.

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 #

Nametypedefaultdescription
defaultOptionarrayGet/set the array of default options)
cssStylestringGet/set extra style
cssClassstring"form-control"Get/set css class
sizestring"md"Get/set the size of multiselect, "sm", "md", "lg"

Note: Those above properties follows this code rules.

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 #

Nametypedefaultdescription
defaultOptionarrayGet/set the array of default options
cssStylestringGet/set extra style
cssClassstring"form-control"Get/set css class
sizestring"md"Get/set the size of select2, "sm", "md", "lg"
multiplebooleanfalseGet/set whether mode multiple is turned on
placeHolderstringGet/set the place holder text for Select2
optionsarrayGet/set extra options for Select2

Note: Those above properties follows this code rules.

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.

Nametypedefaultdescription
valuearrayGet/set value of text bpx
cssStylestringGet/set extra style
cssClassstring"form-control"Get/set css class
sizestring"md"Get/set the size of textbox, "sm", "md", "lg"

Note: Those above properties follows this code rules.

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.