• Overview
• Common Settings
• Events
  • actionChange
• Components
  • Button
  • CheckBoxList
  • RadioList
  • DateRangePicker
  • DateTimePicker
  • MultiSelect
  • RangeSlider
  • Select
  • Select2
  • TextBox

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 #

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 #

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 #

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 #

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.

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.

Events #

DateTimePicker also support change event.

MultiSelect #

MultiSelect allows user to select list of items.

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 #

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 #

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.

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();
    }
}