{"id":3061,"date":"2023-12-19T21:03:56","date_gmt":"2023-12-20T02:03:56","guid":{"rendered":"https:\/\/xlinesoft.com\/blog\/?p=3061"},"modified":"2023-12-19T21:03:56","modified_gmt":"2023-12-20T02:03:56","slug":"clickable-code-snippet-in-a-dashboard","status":"publish","type":"post","link":"https:\/\/xlinesoft.com\/blog\/2023\/12\/19\/clickable-code-snippet-in-a-dashboard\/","title":{"rendered":"Clickable code snippet in a dashboard"},"content":{"rendered":"<p>In this article we will show how you can easily create a clickable code snippet in a dashboard. Our snippet will display a number of customers in <strong>Customers<\/strong> table and clicking anywhere in snippet area will take us to the <strong>Customers<\/strong> table in question. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2023\/12\/dashboard_snippet-600x308.png\" alt=\"\" width=\"600\" height=\"308\" class=\"alignnone size-medium wp-image-3063\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2023\/12\/dashboard_snippet-600x308.png 600w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2023\/12\/dashboard_snippet-768x394.png 768w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2023\/12\/dashboard_snippet.png 989w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><br \/>\n<!--more--><\/p>\n<p>1. Add a code snippet to the dashboard. Use the following code. This is just a sample code and you can replace it with any code of your choice.<\/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$header = \"Number of customers\";\r\n$number = DB::DBLookup(\"select count(*) from customers\");\r\necho \"Customers in the database: \".$number;<\/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 number = null;\r\nheader = new XVar(\"Number of customers\");\r\nnumber = XVar.Clone(DB.DBLookup(new XVar(\"select count(*) from customers\")));\r\nMVCFunctions.Echo(MVCFunctions.Concat(\"Customers in the database: \", number));<\/textarea><\/pre>\n<\/div>\n<p>2. Build and run your application. Proceed to the dashboard page, right click on that snippet and choose &#8216;Inspect&#8217;. What we are looking for an ID of the DIV that encloses our code snippet. In our case it will be <strong>dashelement_cloudflare_snippet1<\/strong>.<\/p>\n<p><a href=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2023\/12\/dahboard_snippet2.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2023\/12\/dahboard_snippet2-600x226.png\" alt=\"\" width=\"600\" height=\"226\" class=\"alignnone size-medium wp-image-3064\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2023\/12\/dahboard_snippet2-600x226.png 600w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2023\/12\/dahboard_snippet2-1024x385.png 1024w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2023\/12\/dahboard_snippet2-768x289.png 768w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2023\/12\/dahboard_snippet2-1536x577.png 1536w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2023\/12\/dahboard_snippet2.png 1623w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>3. Add the following code to Dashboard: Javascript OnLoad event. Here we are using the ID of the div we just found.  <\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"javascript\" name=\"mshighlighter\" >\r\n$( \"#dashelement_cloudflare_snippet1\" ).bind( \"click\", function() {\r\n  location.href = Runner.pages.getUrl(\"customers\",\"list\");\r\n});<\/textarea><\/pre>\n<\/div>\n<p>This is it. Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article we will show how you can easily create a clickable code snippet in a dashboard. Our snippet will display a number of customers in Customers table and clicking anywhere in snippet area will take us to the Customers table in question.<\/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-3061","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\/3061","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=3061"}],"version-history":[{"count":2,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/3061\/revisions"}],"predecessor-version":[{"id":3065,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/3061\/revisions\/3065"}],"wp:attachment":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=3061"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=3061"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=3061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}