Hi all
I have a Canvas printing issue when i have updated the URL according to dimension selection,
and seems like the printer picked up the selection just fine,
but it’s not reflected in my printed page.
An example would be:
When i print the webpage above:
The title dimensions are not changed.
Thanks
Tina
Hi @twu,
Can you check, when you refresh the web page, after the selection, does the selection remains the same?
–
Paul
Hi @plim
No after refresh, the selections go back to initial state.
I actually put below code in the JS but seems not working:
$scope.location = $location;
$scope.$watch('location.search()', function() {
$scope.target = ($location.search()).companymarket;
$scope.page.companymarket = $scope.target ;
}, true);Hi @twu,
Then that is the issue.
That is the reason also why the printing only gives you the default ones.
As for the page itself, it will be better to check on the Printing sample and see how it was setup. There is no $watch written in there. It is just relying on when the selection change, and updating the $location.search() property:
$scope.setDepartment = function(department){
$scope.page.department = department;
if(department != $scope.defaults.department){
// Set the URL parameter
$location.search("department", department);
}
else {
// If the parameter equals the default value remove it from the URL
$location.search("department", null);
}
};If you are using SUBNM, it also has a tm1-change attribute which you can use to call a function whenever the selection changes.
Let us know how it goes.
–
Paul
Hi @plim
I actually updated JS and html according to the help article, please find my code below, what am i doing wrong?
JS:
app.controller('CompanyMarket_copyCtrl', ['$scope', '$rootScope', '$log', '$tm1Ui', '$location',
function($scope, $rootScope, $log, $tm1Ui,$location) {
$scope.defaults = {
companymarket:'Group_C',
product:'PGs',
currency:'USD'
};
$scope.page = {
companymarket:$scope.defaults.companymarket,
product:$scope.defaults.product,
currency:$scope.defaults.currency
};
// initiate the page variable
if($location.search().companymarket){
$scope.page.companymarket = $location.search().companymarket;
}
if($location.search().product){
$scope.page.product = $location.search().product;
}
if($location.search().currency){
$scope.page.currency = $location.search().currency;
}
//send the value to URL
$scope.setCompanymarket = function(companymarket){
$scope.page.companymarket = companymarket;
if(companymarket != $scope.defaults.companymarket){
// Set the URL parameter
$location.search("companymarket", companymarket);
}
else {
// If the parameter equals the default value remove it from the URL
$location.search("companymarket", null);
}
};
$scope.setProduct = function(product){
$scope.page.product = product;
if(product != $scope.defaults.product){
// Set the URL parameter
$location.search("product", product);
}
else {
// If the parameter equals the default value remove it from the URL
$location.search("product", null);
}
};
$scope.setCurrency = function(currency){
$scope.page.currency = currency;
if(currency != $scope.defaults.currency){
// Set the URL parameter
$location.search("currency", currency);
}
else {
// If the parameter equals the default value remove it from the URL
$location.search("currency", null);
}
};
}]);
html:
<div class="col-xs-12 col-sm-2 col-md-2">
<div style="margin-top: 10px;">
<tm1-ui-subnm tm1-show-hierarchy="false" tm1-instance="apms_dev" tm1-dimension="Company Market"
tm1-subset="canvas_dashboard_c_menu" tm1-attribute="Description" tm1-default-element="AAP"
ng-model="page.companymarket" tm1-change="setCompanymarket(data)"></tm1-ui-subnm>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<div style="margin-top: 10px;">
<tm1-ui-subnm tm1-show-hierarchy="false" tm1-instance="apms_dev" tm1-dimension="Product Line"
tm1-subset="canvas_dashboard_p_menu_demo" tm1-attribute="Description" ng-model="page.product"
tm1-change="setProduct(data)"></tm1-ui-subnm>
</div>
</div>Ho @twu,
Try to use this instead:
<div class="col-xs-12 col-sm-2 col-md-2">
<div style="margin-top: 10px;">
<tm1-ui-subnm tm1-show-hierarchy="false" tm1-instance="apms_dev" tm1-dimension="Company Market"
tm1-subset="canvas_dashboard_c_menu" tm1-attribute="Description" tm1-default-element="{{page.companymarket}}"
ng-model="page.companymarket" tm1-change="setCompanymarket(data)"></tm1-ui-subnm>
</div>
</div>
<div class="col-xs-12 col-sm-2 col-md-2">
<div style="margin-top: 10px;">
<tm1-ui-subnm tm1-show-hierarchy="false" tm1-instance="apms_dev" tm1-dimension="Product Line"
tm1-default-element="{{page.product}}"
tm1-subset="canvas_dashboard_p_menu_demo" tm1-attribute="Description" ng-model="page.product"
tm1-change="setProduct(data)"></tm1-ui-subnm>
</div>
</div>The main changes in there is the utilization of tm1-default-element attribute.
Let us know how it goes.
–
Paul
Hi @twu,
I think it would be better to not show the selections when you print. When you print you could replace the selections with simple texts.
For example in the print sample, the buttons:
become text after printing:
The sample print uses the CSS Media queries to change the look and feel of the buttons when printing, the class below will be applied only when printing:
@media print {
.btn {
border: none;
font-size: 1.5em;
font-weight: bold;
background-color: #fff !important;
}
}
You can also use the bootstrap class visible-print to show some div only when you print:
<button class="btn visible-print" ng-if="page.region != defaults.region">Filters: </button>
Hi @plim
I have applied your code and it’s the same issue.
I guess the main thing is how do i debug, i know “Initiate page variable” part JS code should help the SUBNM to get URL value, how do i debug the process to make it work?
Hi @twu,
If that is the case, then yes, it will good for you to be able to debug and find out if there is something else that is setting the variables in your code and where.
Remember that controller loads first, before the html page.
As for help on debugging, This article should help you out:
Let us know how it goes.
–
Paul
Hi @plim
Thanks for the article.
Now i know the “Initiate page variable” part JS is working, and it’s working until the end of my JS.
so that means it’s the html page that reset my SUBNM to it’s initial status.
I notice when i reach the end of JS file, F10 does not work anymore and i have to F8 to load to whole page.
How do i debug the html loading part?
Hi @twu,
For the HTML page, usually you can just print out a variable somewhere in your page to see its value.
–
Paul
Hi Paul;
I’m have exactly the same issue with the printing functionality. You can see the default for the company being returned (1) as well as the page.company (2). You can also see the company code in the url
1= {{defaults.company}}
2= {{page.company}}
However when the PDF is generated the {{defaults.company}} remains which in this case is “All Companies (excl NVI)” despite having the company selection in the acutal pdf url, in this case “00202”
Html code:
JS Code:
$scope.defaults = {company: 'All Companies (excl NVI)'};
$scope.page= {company: $scope.defaults.company}
// Get the URL parameters
if($location.search().company){
$scope.page.company = $location.search().company;
}
$scope.setCompany = function(company){
$scope.page.company = company;
if(company != $scope.defaults.company){
// Set the URL parameter
$location.search("company", company);
}
else {
$location.search("company", null);
}
};
Not sure what is missing here but unfortunately the print Canvas sample does not have any SUBNM examples in it. Hope you can provide some guidance.
Hi @Nacho_Libre,
The issue should be resolved when you use a different variable to initialize the tm1-default-element with a different variable instead.
As another alternative, can you try this out:
// Get the URL parameters
if($location.search().company){
$timeout(function(){
$scope.page.company = $location.search().company;
});
}Note that you have to add $timeout as one of the dependencies of your controller. So just add into:
app.controller('SampleCtrl', ['$scope', '$rootScope', '$timeout', '$location', function($scope, $rootScope, $timeout, $location) {
// scripts here
}]);Let us know how it goes.
–
Paul
Hi Paul,
I’m having the same issues described here but after trying all the things described here and the Help article on the website I still have the same problem.
So I can get the URL retain to the project I want after I hit the print button, but it still prints the default project. Wondering if you can help with what’s missing here.
<div class="col-md-4">
<tm1-ui-subnm tm1-show-hierarchy="false" tm1-instance="Timesheet" tm1-dimension="Project"
tm1-default-element="{{page.project}}"
tm1-subset="default" ng-model="page.project"
tm1-change="setProject(data)"></tm1-ui-subnm>
$scope.defaults = {
project: "C488P011 - SLIM - SA Consol PnL",
};
$scope.page = {
project: $scope.defaults.project ,
};
// initiate the page variable(s)
if($location.search().project){
$scope.page.project= $location.search().project
}
$scope.setProject = function(project){
$scope.page.project = project;
if(project != $scope.defaults.project){
// Set the URL parameter
$location.search("project", project);
}
else {
// If the parameter equals the default value remove it from the URL
$location.search("project", null);
}
};
Hi @jlee,
The main thing would be to use a different variable for the tm1-default-element property:
So assign it to values.urlProject for example, and use that into the tm1-default-element.
Let us know how it goes.
–
Paul
Hi @jlee,
To avoid this issue, you should hide the buttons when you print using:
@media print {
.btn {
display: none;
}
}
and replace them with just the values {{selections.version}}, you can use visible-print class to show the values only when printing:
<div class="visible-print"
<h1> Filters: {{selections.version}} - {{selections.year}} </h1>
</div>
As some of you got the same issue, we summarized this topic in the following article:
The takeaway of this article is that the variable used for the tm1-default-element and the ng-model should be different:
<tm1-ui-subnm
tm1-instance="dev"
tm1-dimension="Region"
tm1-subset="Default"
tm1-default-element="{{values.urlRegion}}"
ng-model="selections.region"
tm1-change="setRegion(data)"
>
</tm1-ui-subnm>