• Overview
• Common Settings
• Events
  • actionChange
• Components
  • Button
  • Toggle
  • CheckBoxList
  • RadioList
  • DateRangePicker
  • DateTimePicker
  • MultiSelect
  • RangeSlider
  • Select
  • Select2
  • Dropdown
  • 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 #

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 #

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

Toggle #

Example 1:

class MyDashboard extends Dashboard 
{
    protected function widgets()
    {
        return [
            Toggle::create("myToggle")
                ->defaultValue(0)
                ->is3D(true)
                ->showText(true)
                ->onText("on")
                ->offText("off")
                ->type("primary")
                ->pill(false)
                ->size("md")
                ->cssClass("extra-class")
                ->cssStyle("margin-left:10px;")
                ->onClick("alert('toggle')")
                ->action("change",function($request, $response) {
                    $this->sibling("ResultTable")
                        ->params([
                            "showPageSize"=>$this->value()
                        ])
                        ->update();
                }),
                ResultTable::create()
        ];
    }
}

Example 2:

use \koolreport\dashboard\inputs\Toggle;

class MyToggle extends Toggle
{
    protected function onCreated()
    {
        $this
        ->defaultValue(0)
        ->is3D(true)
        ->showText(true)
        ->onText("on")
        ->offText("off")
        ->type("primary")
        ->pill(false)
        ->size("md")
        ->cssClass("extra-class")
        ->cssStyle("margin-left:10px;")
        ->onClick("alert('toggle')");    
    }

    protected function actionChange($request, $reponse)
    {
        $this->sibling("ResultTable")
            ->params([
                "showPageSize"=>$this->value()
            ])
            ->update();
    }
}

CheckBoxList #

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 #

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.

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.

Note: Those above properties follows this code rules.

Events #

DateTimePicker also support change event.

MultiSelect #

MultiSelect allows user to select list of items.

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 #

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 #

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

}

Dropdown #

Dropdown acts like a small menu contains custom items

Note: Those above properties follows this code rules.

Example:

use \koolreport\dashboard\inputs\Dropdown;

...

Dropdown::create("myDropdown") // If you create DropDown inside Dashboard, you should provide name for it
->icon("fa fa-cog")
->title("Settings")
->type("default")
->outline(false)
->size("sm")
->align("right")
->disabled(false)
->blockLevel(true)
->items([
    "Simple link"=>MenuItem::create()
        ->href("https://www.anywebsite.com")
        ->target("_blank"),

    "With Icon and Badge"=>MenuItem::create()
        ->href("https://www.example.com")
        ->icon("fa fa-book")
        ->badge(["NEW","danger"]),
    
    "Execute javascript"=>MenuItem::create()
        ->onClick("alert('hola')"),
    
    "Load Dashboard"=>MenuItem::create()
        ->onClick(Client::dashboard("SaleBoard")->load())
])

Alternatively, you create your own dropdown by derived from DropDown:

class MyDropDown extends \koolreport\dashboard\inputs\DropDown
{
    protected function onCreated()
    {
        $this->->icon("fa fa-cog")
                ->title("Settings")
                ->type("default")
                ->outline(false)
                ->size("sm")
                ->disabled(false)
                ->blockLevel(true);
    }

    protected function items()
    {
        return [
            "Simple link"=>MenuItem::create()
                ->href("https://www.anywebsite.com")
                ->target("_blank"),

            "With Icon and Badge"=>MenuItem::create()
                ->href("https://www.example.com")
                ->icon("fa fa-book")
                ->badge(["NEW","danger"]),
            
            "Execute javascript"=>MenuItem::create()
                ->onClick("alert('hola')"),
            
            "Load Dashboard"=>MenuItem::create()
                ->onClick(Client::dashboard("SaleBoard")->load())
        ];
    }
}

TextBox #

TextBox show text box for user to input.

Note: Those above properties follows this code rules.

Events #

TextBox support blur, focus, click, dbclick events

use \koolreport\dashboard\inputs\TextBox;

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