• Overview
• Common Settings
• Events
  • actionChange
• Components
  • Button
  • Toggle
  • CheckBoxList
  • RadioList
  • DateRangePicker
  • DateTimePicker
  • MultiSelect
  • RangeSlider
  • Select
  • Select2
  • Dropdown
  • TextBox
  • TextArea
  • FileUploader
  • CheckBox

---

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

Short hard Button created with type

Button::primary("Submit")
Button::secondary("Submit")
Button::success("Submit");
Button::danger("Submit")
Button::warning("Submit")
Button::info("Submit")

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")
            ->ranges([
                "Today"=>DateRangePicker::today(),
                "Yesterday"=>DateRangePicker::yesterday(),
                "Last 7 days"=>DateRangePicker::last7days(),
                "Last 30 days"=>DateRangePicker::last30days(),
                "This month"=>DateRangePicker::thisMonth(),
                "Last month"=>DateRangePicker::lastMonth(),
            ]);
    }
}

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

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()),

    "Disabled Item"=>MenuItem::create()->disabled(true),
])

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

TextArea #

TextArea use textarea html element for user input

Note: Those above properties follows this code rules.

Events #

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

FileUploader #

FileUploader is used to upload any file to your dashboard application.

Properties #

Example:

FileUploader::create("myFileUploader")
    ->type("primary")
    ->accept(["jpg","png"])
    ->notAccept(["php"])
    ->maxFileSize(200000)
    ->imagePreview(true)
    ->showDownloadLink(true)
    ->previewWidth("150px")
    ->previewHeight("150px")
    ->fileName(function($name,$ext){
        return $name.".".$ext;
    })
    ->fileHandle(function($file){
        $name = $file["name"];
        $tmp = $file["tmp_name"];
        //You can do any thing to handle your file here
    })
    ->resolveValue(function($file){
        return $file["name"];
    })
    ->resolveUrl(function($value){
        return "https://examples.com/images/$value";
    })
    ->fileNotAllowedError("Not allowed")
    ->fileSizeLmitError("Oversized")
    ->unknownError("So mysterious")
    ->noFileError("No file was selected")
    ->noFileSelectedText("No file was selected")
    ->selectFileText("Select a file..")

CheckBox #

CheckBox is different from CheckBoxList which have multiple selected options, the CheckBox only have single option.

Example:

CheckBox::create("checkboxAutoUpdate")
->text("Auto Update")
->inline(false)
->onChange("console.log('do something at client-side')")
->action("change",function($request, $response){
    //Do something at server-side
})
->cssStyle("margin-left:5px;")
->cssClass("my-checkbox-css-class")