Hi guys,

I am using the CustomBoard class in my dashboard and faced the need to interact with the server beyond updating the view — such as interactively modifying selection lists in inputs or updating individual elements on the page. I implemented this as follows, and I hope it might be helpful to someone else. I also kindly ask the KoolReport team to review my solution for potential issues.

In the class that extends CustomBoard, I overrode the handle function to process my custom actions.

// CustomBoard class extension to handle custom server-side actions
class MyReportBoard extends CustomBoard{

public function handle($request)
{
    // Retrieve the action from the request
    $action = $request->action();

    // Check if the action corresponds to a method in this class
    if (method_exists($this, $action)) {
        // Call the corresponding method dynamically
        return $this->$action($request);
    }

    // Fall back to the parent CustomBoard class's handle method if action is not custom
    return parent::handle($request);
}

// Custom action to handle "action1" logic
protected function action1($request)
{
    $response = Response::create();

    // Prepare data for the response (populate $data as needed)
    $data = [
        'message' => 'This is a response for action1',
        'timestamp' => time()
    ];

    // Encode the data as JSON and include it in the response
    $response->html(json_encode($data));
    return $response;
}

// Another Custom action 
protected function action2($request)
{
    $response = Response::create();

    // Prepare data for the response (populate $data as needed)
    $data = [
        ...
    ];
...
   
    return $response;
}
}

On the client side, I use the following: In the required case, a JavaScript function is called, which interacts with the server via AJAX.

<script>
    /**
     * Function to handle interaction with the server
     */
    function action1() {
        // Get selected values from the board
        let selectedValues = ...

        // Proceed only if there are selected values
        if (selectedValues && selectedValues.length > 0) {
            // Show loader to indicate data is being processed
            KoolReport.dashboard.theme.showLoader(true);

            // Define the route and action for the server-side request
            let route = 'App/' + KoolReport.dashboard.page.name +
                        (KoolReport.dashboard.dboard.name !== '' ? '/' + KoolReport.dashboard.dboard.name : '');
            let action = 'action1';
            let params = {ids: selectedValues};

            // Prepare data object for the AJAX request
            var data = {
                kdr: {
                    route: route,
                    action: action,
                    params: params
                }
            };

            // Encode parameters in base64 for secure transmission
            if (params) {
                data.kdr.encodedParams = base64_encode(JSON.stringify(params));
            }

            // Add CSRF token for security
            if (KoolReport.dashboard.security.csrf) {
                data[KoolReport.dashboard.security.csrf.name] = KoolReport.dashboard.security.csrf.token;
            }

            // Make the AJAX request
            $.ajax({
                url: window.location.href.replace(window.location.hash, ''), // Use the current URL without the hash
                method: 'POST', // POST method to send data to the server
                data: data, // Data payload for the server
                async: true, // Asynchronous request
                dataType: 'json', // Expect JSON response
            })
            .fail(function (xhr) {
                // Handle request failure
                KoolReport.dashboard.theme.showLoader(false); // Hide loader
                KoolReport.dashboard.contactFail(xhr); // Notify the dashboard of the failure
            })
            .done(function (data) {
                // Hide loader upon successful response
                KoolReport.dashboard.theme.showLoader(false);

                // do something based on response
               ...
            });
        }
    }
</script>

I hope this helps those who need to add their own actions.

PS I am not 100% sure that contactFail(xhr) will work correctly, and I hope the KoolReport team will correct me if needed.