{"id":1824,"date":"2018-10-11T13:51:55","date_gmt":"2018-10-11T18:51:55","guid":{"rendered":"https:\/\/xlinesoft.com\/blog\/?p=1824"},"modified":"2026-08-20T17:38:36","modified_gmt":"2026-08-20T22:38:36","slug":"using-third-party-components","status":"publish","type":"post","link":"https:\/\/xlinesoft.com\/blog\/2018\/10\/11\/using-third-party-components\/","title":{"rendered":"Integrate Third-Party JavaScript Components with PHPRunner"},"content":{"rendered":"<p>Third-party JavaScript components can be integrated into a PHPRunner application without replacing the generated page. The same general approach works for data grids, charts, editors, calendars and many other browser-based components.<\/p>\n<p>The integration usually has five parts:<\/p>\n<ol>\n<li>Add the component&#8217;s JavaScript and CSS files to the project.<\/li>\n<li>Add a container to the page where the component will be displayed.<\/li>\n<li>Make the required data available to JavaScript.<\/li>\n<li>Initialize the component after the page is ready.<\/li>\n<li>Add only the CSS needed to make the component fit the rest of the application.<\/li>\n<\/ol>\n<p>In this tutorial we will use <a href=\"https:\/\/www.tabulator.info\/\" target=\"_blank\" rel=\"noopener\">Tabulator<\/a>, a JavaScript data-grid component, as a practical example. The important part is the integration pattern rather than Tabulator itself.<\/p>\n<p>\n<a href=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2018\/10\/scr_browser_tabulator.png\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-1831\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2018\/10\/scr_browser_tabulator-300x261.png\" alt=\"Tabulator data grid integrated into a PHPRunner application\" width=\"300\" height=\"261\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2018\/10\/scr_browser_tabulator-300x261.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2018\/10\/scr_browser_tabulator-768x667.png 768w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2018\/10\/scr_browser_tabulator-150x130.png 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2018\/10\/scr_browser_tabulator-400x347.png 400w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2018\/10\/scr_browser_tabulator.png 1005w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><br \/>\n<\/a>\n<\/p>\n<p><!--more--><\/p>\n<h2>1. Add the third-party files<\/h2>\n<p>Download Tabulator from its <a href=\"https:\/\/www.tabulator.info\/docs\/6.x\/install\/\" target=\"_blank\" rel=\"noopener\">installation page<\/a>.<\/p>\n<p>For a traditional browser-based integration, Tabulator provides both JavaScript and CSS files. Copy the files you need into your PHPRunner project&#8217;s <strong>source<\/strong> folder so they will be available in the generated application.<\/p>\n<p>This example assumes that the files are available at:<\/p>\n<ul>\n<li><strong>css\/tabulator.min.css<\/strong><\/li>\n<li><strong>js\/tabulator.min.js<\/strong><\/li>\n<\/ul>\n<p>Third-party libraries change over time, so always check the current documentation for file names, dependencies and API changes when adapting this example to a newer version.<\/p>\n<h2>2. Add a container in Page Designer<\/h2>\n<p>Open the List page in Page Designer. Remove any page elements you do not need and insert a <strong>Code Snippet<\/strong> into the container where you want the third-party component to appear.<\/p>\n<p>\n<a href=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2018\/10\/scr_designer_tabulator.png\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-1828\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2018\/10\/scr_designer_tabulator-300x182.png\" alt=\"Code snippet container in PHPRunner Page Designer\" width=\"300\" height=\"182\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2018\/10\/scr_designer_tabulator-300x182.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2018\/10\/scr_designer_tabulator-768x466.png 768w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2018\/10\/scr_designer_tabulator-1024x621.png 1024w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2018\/10\/scr_designer_tabulator-150x91.png 150w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2018\/10\/scr_designer_tabulator-400x243.png 400w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2018\/10\/scr_designer_tabulator.png 1230w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><br \/>\n<\/a>\n<\/p>\n<p>The snippet has two jobs: load the component&#8217;s CSS and JavaScript files and create an HTML element where Tabulator will render the table.<\/p>\n<p><strong>PHP<\/strong><\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"php\" name=\"mshighlighter\" >\r\necho '<link href=\"css\/tabulator.min.css\" rel=\"stylesheet\">\r\n<script type=\"text\/javascript\" src=\"js\/tabulator.min.js\"><\/script>\r\n<div id=\"example-table\"><\/div>';<\/textarea><\/pre>\n<\/div>\n<p><strong>C#<\/strong><\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"\" name=\"mshighlighter\" >\r\nMVCFunctions.Echo(@\"\r\n<link href='css\/tabulator.min.css' rel='stylesheet'>\r\n<script type='text\/javascript' src='js\/tabulator.min.js'><\/script>\r\n<div id='example-table'><\/div>\r\n\");<\/textarea><\/pre>\n<\/div>\n<p>The <strong>example-table<\/strong> element is simply a placeholder. Tabulator will use it when the component is initialized.<\/p>\n<h2>3. Prepare the data on the server<\/h2>\n<p>Next, retrieve the data that will be displayed and pass it to JavaScript. Add the following code to the <strong>Before Display<\/strong> event of the same List page.<\/p>\n<p>This example uses tables from the Northwind database. Replace the query with one appropriate for your own database.<\/p>\n<p><strong>PHP<\/strong><\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"php\" name=\"mshighlighter\" >\r\n$rs = DB::Query(\"\r\n    select\r\n        CategoryName,\r\n        UnitsInStock,\r\n        ProductName,\r\n        UnitPrice,\r\n        QuantityPerUnit\r\n    from products p\r\n    inner join Categories c\r\n        on c.CategoryID = p.CategoryID\r\n\");\r\n\r\n$rows = array();\r\n\r\nwhile ($data = $rs->fetchAssoc())\r\n{\r\n    $rows[] = $data;\r\n}\r\n\r\n$pageObject->setProxyValue(\"tabledata\", $rows);<\/textarea><\/pre>\n<\/div>\n<p><strong>C#<\/strong><\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"\" name=\"mshighlighter\" >\r\ndynamic data;\r\n\r\ndynamic rs = DB.Query(@\"\r\n    select\r\n        CategoryName,\r\n        UnitsInStock,\r\n        ProductName,\r\n        UnitPrice,\r\n        QuantityPerUnit\r\n    from products p\r\n    inner join Categories c\r\n        on c.CategoryID = p.CategoryID\r\n\");\r\n\r\ndynamic rows = new List<dynamic>();\r\n\r\nwhile (data = rs.fetchAssoc())\r\n{\r\n    rows.Add(data);\r\n}\r\n\r\npageObject.setProxyValue(\"tabledata\", rows);<\/textarea><\/pre>\n<\/div>\n<p>The database query can be much simpler if necessary. For example:<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"php\" name=\"mshighlighter\" >\r\n$rs = DB::Query(\"select * from mytable\");<\/textarea><\/pre>\n<\/div>\n<p>The important line is <strong>setProxyValue()<\/strong>. It makes the server-side data available to the JavaScript code running on the page.<\/p>\n<h2>4. Initialize the component<\/h2>\n<p>Open the <strong>JavaScript OnLoad<\/strong> event of the same List page.<\/p>\n<p>First, retrieve the data passed from the server. Then create the Tabulator object and tell it which HTML element should contain the table.<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"javascript\" name=\"mshighlighter\" >\r\nvar tabledata = proxy[\"tabledata\"];\r\n\r\nvar table = new Tabulator(\"#example-table\", {\r\n    height: \"600px\",\r\n    layout: \"fitColumns\",\r\n    data: tabledata,\r\n    groupBy: \"CategoryName\",\r\n\r\n    columns: [\r\n        {\r\n            title: \"Product\",\r\n            field: \"ProductName\",\r\n            width: 200\r\n        },\r\n        {\r\n            title: \"Price\",\r\n            field: \"UnitPrice\",\r\n            width: 150\r\n        },\r\n        {\r\n            title: \"In Stock\",\r\n            field: \"UnitsInStock\",\r\n            width: 150\r\n        },\r\n        {\r\n            title: \"Quantity Per Unit\",\r\n            field: \"QuantityPerUnit\",\r\n            width: 200\r\n        }\r\n    ]\r\n});<\/textarea><\/pre>\n<\/div>\n<p>Change the column titles and field names to match the data returned by your query.<\/p>\n<h2>Understanding the integration pattern<\/h2>\n<p>Although this example uses Tabulator, very little of the PHPRunner-specific code is actually related to Tabulator.<\/p>\n<p>The reusable pattern is:<\/p>\n<ol>\n<li><strong>Load the library.<\/strong> Add the JavaScript and CSS files required by the component.<\/li>\n<li><strong>Create a container.<\/strong> Add an HTML element where the component can render itself.<\/li>\n<li><strong>Prepare the data.<\/strong> Use PHPRunner server-side events and the Database API to retrieve any required data.<\/li>\n<li><strong>Pass data to JavaScript.<\/strong> Use <strong>setProxyValue()<\/strong> when server-side data needs to be available in the browser.<\/li>\n<li><strong>Initialize the component.<\/strong> Use JavaScript OnLoad so the component starts after the page and its container are available.<\/li>\n<\/ol>\n<p>This pattern can be used with many third-party components, including specialized grids, charts, editors, visualization libraries and other JavaScript controls.<\/p>\n<h2>Keep third-party code isolated<\/h2>\n<p>When integrating an external component, avoid replacing more of the generated PHPRunner page than necessary. Keep the component inside its own container and limit custom CSS to that component whenever possible.<\/p>\n<p>This makes the project easier to maintain because PHPRunner continues to manage the surrounding application structure, navigation, authentication and other generated functionality while the external library handles only the specialized interface you added.<\/p>\n<p>Also keep in mind that third-party libraries have their own release cycles. The PHPRunner integration technique shown here remains the same, but individual JavaScript options, methods and file names may change. Check the component&#8217;s current documentation before updating an older implementation.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Third-party JavaScript components can be integrated into a PHPRunner application without replacing the generated page. The same general approach works for data grids, charts, editors, calendars and many other browser-based components. The integration usually has five parts: Add the component&#8217;s JavaScript and CSS files to the project. Add a container to the page where the component will be displayed. Make the required data available to JavaScript. Initialize the component after the page is ready. Add only the CSS needed to make the component fit the&#8230;<span class=\"clearfix clearfix-post\"><\/span><a href=\"https:\/\/xlinesoft.com\/blog\/2018\/10\/11\/using-third-party-components\/\" class=\"more-link\">Continue Reading <span class=\"screen-reader-text\">&#8220;Integrate Third-Party JavaScript Components with PHPRunner&#8221;<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,1,8],"tags":[],"class_list":["post-1824","post","type-post","status-publish","format-standard","hentry","category-asp-net","category-php-category","category-tutorials"],"_links":{"self":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1824","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/comments?post=1824"}],"version-history":[{"count":17,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1824\/revisions"}],"predecessor-version":[{"id":3456,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/1824\/revisions\/3456"}],"wp:attachment":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=1824"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=1824"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=1824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}