Creating a Custom Button on the Viewer Toolbar
Our sample projects and report templates can help you learn the basics of working with our products.Set up the report viewer in PHP, load a template, and connect the component to the application.
Viewer setup. Configure the viewer, load the report, assign it to the component, and process the requests or events raised by the UI.
The script assigned to
Viewer setup. Configure the viewer, load the report, assign it to the component, and process the requests or events raised by the UI.
<?php
require_once '../vendor/autoload.php';
use Stimulsoft\Report\StiReport;
use Stimulsoft\Viewer\StiViewer;
// Creating a viewer object and set the necessary javascript options
$viewer = new StiViewer();
$viewer->javascript->relativePath = '../';
$viewer->javascript->appendHead('<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">');
$viewer->onAfterInitialize = "
var customButton = viewer.jsObject.SmallButton('customButton', 'Custom Button', 'emptyImage');
customButton.image.src = '../icon.png';
customButton.action = function () {
alert('Custom Button Event');
}
var toolbarTable = viewer.jsObject.controls.toolbar.firstChild.firstChild;
var buttonsTable = toolbarTable.rows[0].firstChild.firstChild;
var customButtonCell = buttonsTable.rows[0].insertCell(0);
customButtonCell.appendChild(customButton);
";
// Processing the request and, if successful, immediately printing the result
$viewer->process();
// Creating a report object
$report = new StiReport();
// Loading a report by URL
// This method does not load the report object on the server side, it only generates the necessary JavaScript code
// The report will be loaded into a JavaScript object on the client side
$report->loadFile('../reports/SimpleList.mrt');
// Assigning a report object to the viewer
$viewer->report = $report;
// Displaying the visual part of the viewer as a prepared HTML page
$viewer->printHtml();onAfterInitialize— holds a string of JavaScript that runs in the browser once the viewer is fully built.viewer.jsObject.SmallButton(...)— creates a new toolbar button through the viewer's client-side object.customButton.action— assigns the function called when the button is clicked.viewer.jsObject.controls.toolbar— gives access to the toolbar so the new button can be inserted into it.
The script assigned to
onAfterInitialize runs in the browser once the viewer is ready; through viewer.jsObject it accesses the toolbar and inserts your button, wiring it to your own action.