In this article we will show how you can easily create clickable code snippets in dashboards. Our snapshot will show a number of customers in Customer table and clicking anywhere in the snapshot area will take us to Customer the table in question.

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.

PHP

$header = "Number of customers";
$number = DB::DBLookup("select count(*) from customers");
echo "Customers in the database: ".$number;

C#

dynamic number = null;
header = new XVar("Number of customers");
number = XVar.Clone(DB.DBLookup(new XVar("select count(*) from customers")));
MVCFunctions.Echo(MVCFunctions.Concat("Customers in the database: ", number));

2. Build and run your application. Proceed to the dashboard page, right click on the snippet and select ‘Inspect’. What we’re looking for are the DIV IDs that surround our code snippet. In our case, it will happen dashelement_cloudflare_snippet1.

3. Add the following code to the Dashboard: Javascript OnLoad event. Here we use the div ID we just discovered.

$( "#dashelement_cloudflare_snippet1" ).bind( "click", function() {
  location.href = Runner.pages.getUrl("customers","list");
});

Here he is. Enjoy!