With Canvas v1.2, you can now print and schedule a report. Canvas uses the page URL to print a report in PDF. If you do not update the URL, Canvas will always print the report with the default criteria.

This article explains how you can update the URL without reloading the page.

In the “print” dashboard, if you click on one of the KPI at the top, for instance Gross Margin, the URL will be updated:

The print button in Canvas, uses the current URL to create the PDF report.

If the URL is not updated, when you click on the print button, Canvas will print the default URL:

• http://localhost:8080/samples/#/sample/print

instead of printing the report with Gross Margin:

• http://localhost:8080/samples/#/sample/print?driver=Gross%20Margin

To modify the URL without reloading the page, we are going to add a new function in the controller (JS page) and from the HTML page, we are going to call this function.

1. Create the function in the controller

To update the URL, we are using the search method of the angular service $location. The $location service parses the URL in the browser address bar and makes the URL available to your application.

How does it work:

1. $location makes the URL available to our application
2. We use search method to update the URL.

To be able to use $location service in our controller we have to add it as a new argument in our controller:

We need two variables:

• $scope.defaults.driver: default values to be used before selections are made
• $scope.page.driver: value which will be updated during navigation

In the example below we have three defaults variables (defaults.region, defaults.department and defaults.driver) and 6 variables that we are going to use in our HTML page (page.region, page.departement, page.version, page.driver, page.segment and page.subset):

To get a value from the URL we use the search method: $location.search()

In our example we want to get the driver value so we attach driver to $location.search():

• $location.search().driver

If the URL is http://localhost:8080/samples/#/sample/print?driver=Operating%20Expenses then $location.search().driver will be equal to Operating Expenses.

If there is a driver value in the URL we initialize the page.driver variable:

if($location.search().driver){        $scope.page.driver = $location.search().driver;    }

We’re going to create a new function called setDriver which will be called from the HTML page. The objective of this function is to update the URL if the driver in the page (scope.page.driver) is different from the default driver (defaults.driver):

$scope.setDriver = function(driver){        $scope.page.driver = driver;        if(driver != $scope.defaults.driver){            // Set the URL parameter            $location.search("driver", driver);        }        else {            // If the parameter equals the default value remove it from the URL            $location.search("driver", null);        }    };

2. Update the HTML page

In the HTML page, we just need to call the setDriver function created in the controller when we click on a button:

• ng-click=”setDriver(item.description)”

In this example when we click, we send the item.description to the URL.