Print Widget with Dialog box to Open / Save map ? When click On save button open File Save As dialog and save the Map Image/PNG ?
mayur9785 opened this issue · 4 comments
Hi,
I am using messagebox widget https://github.com/tmcgee/cmv-widgets#messagebox in print widget to show dialog box when print generate complete.
I am calling messagebox in print widget's _onPrintComplete function as below code and screenshot 👍
when click on Ok button I am opening the print task URL and it is working fine.
Now, when user click cancel button I would like to open File save as dialog and save PNG to computer ?
I googled it but coudn't get any idea to do using dojo/javascript.
How can I save image from URL generated by PrintTask by using Save As dialog box ?
_onPrintComplete: function (data) {
debugger;
if (data.url) {
var proxyRule = urlUtils.getProxyRule(data.url);
if (proxyRule && proxyRule.proxyUrl) {
this.url = proxyRule.proxyUrl + '?' + data.url;
} else {
this.url = data.url;
}
this.nameNode.innerHTML = '<span class="bold">' + this.docName + '</span>';
domClass.add(this.resultNode, 'printResultHover');
// code start to show message open or save
// use the same namespace defined in the messagebox options above
// can be called from anywhere in your code
debugger;
var mb = window.app.MessageBox;
mb.confirm({
title: 'Confirmation?',
content: 'Do You want to Open / Save the Map Print ?'
}).then(
function (result) {
// respond based on the results returned from the confirm MessageBox
if (result === mb.okMessage) {
if (data.url !== null) {
window.open(data.url);
}
} else if (result === mb.cancelMessage) {
}
},
function (/* result */) { }
);
// code end to show message open or save
} else {
this._onPrintError(this.i18n.printResults.errorMessage);
}
},
Hi,
I got it to work.
I copied FileSaver.js file in dijit folder of app. File is here https://github.com/eligrey/FileSaver.js
Then the print widget require section add reference of file/module.
This is the line I added in _onPrintComplete function.
saveAs(data.url, "dashboard.PNG");
require([
....
'gis/dijit/FileSaver'],function (FileSaver){
...
_onPrintComplete: function (data) {
if (data.url) {
var proxyRule = urlUtils.getProxyRule(data.url);
if (proxyRule && proxyRule.proxyUrl) {
this.url = proxyRule.proxyUrl + '?' + data.url;
} else {
this.url = data.url;
}
this.nameNode.innerHTML = '<span class="bold">' + this.docName + '</span>';
domClass.add(this.resultNode, 'printResultHover');
// code start to show message open or save
// use the same namespace defined in the messagebox options above
// can be called from anywhere in your code
var mb = window.app.MessageBox;
mb.confirm({
title: 'Confirmation?',
content: 'Do You want to Open / Save the Map Print ?'
}).then(
function (result) {
// respond based on the results returned from the confirm MessageBox
if (result === mb.okMessage) {
if (data.url !== null) {
window.open(data.url);
}
} else if (result === mb.cancelMessage) {
saveAs(data.url, "dashboard.PNG");
}
},
function (/* result */) { }
);
// code end to show message open or save
} else {
this._onPrintError(this.i18n.printResults.errorMessage);
}
},
}
@mayur9785 Instead of modifying the Print widget, you may want to add a published topic within the Print widget as an enhancement (create a Pull Request) and then subscribe to that topic in your widget and respond appropriately (show your message box). That will make it easier to support your custom needs in the future without having to update the Print widget code each time a CMV release comes out.
Hi @tmcgee,
I tried to add topic in Messagebox and Print widget, It is working, But I am not sure this is right appraoch or not.
Below is what I did in widgets :
MessageBox.js file in postCreate function :
define([
.....
'gis/dijit/FileSaver',
'dojo/topic',
....
], function (
....
....
FileSaver,
topic
) {
postCreate: function () {
this.inherited(arguments);
this.own(topic.subscribe('messagebox/openFileUrl', lang.hitch(this, 'openFileUrl')));
},
Added 1 function/method in MessageBox.js file
openFileUrl:function(url)
{
var mb = window.app.MessageBox;
mb.confirm({
title: 'Confirmation?',
content: 'Do You want to Open / Save the Map Print ?'
}).then(
function (result) {
// respond based on the results returned from the confirm MessageBox
if (result === mb.okMessage) {
if (url !== null) {
window.open(url);
}
} else if (result === mb.cancelMessage) {
var fileextn = url.substring(url.lastIndexOf('.') + 1, url.length) || url;
if (fileextn === 'png')
{
saveAs(url, "CustomReport.png");
}
else
{
saveAs(url, "CustomReport.pdf");
}
}
},
function (/* result */) { }
);
},
});
Then in the Print.js widget in postcreate function added 1 line
this.own(topic.subscribe('messagebox/openFileUrl', lang.hitch(this, 'openFileUrl')));
postCreate: function () {
...
esriRequest({
url: this.printTaskURL,
content: {
f: 'json'
},
handleAs: 'json',
callbackParamName: 'callback',
load: lang.hitch(this, '_handlePrintInfo'),
error: lang.hitch(this, '_handleError')
});
this.own(topic.subscribe('messagebox/openFileUrl', lang.hitch(this, 'openFileUrl')));
},
then in Print.js _onprintcomplete function added below line
_onPrintComplete: function (data) {
...
...
topic.publish('messagebox/openFileUrl', data.url);
}
@mayur9785 A couple of comments:
-
I don't see a need to modify the MessageBox widget in any way. If it were me, I would create a separate widget. Maybe that's what you've done and I am misunderstanding.
-
In Print.js, I suggest changing the
topic.publishlike this so the topic can be subscribed to by other widgets besides yours:
_onPrintComplete: function (data) {
...
...
topic.publish('print/printComplete', data);
}You would of course need to change the topic.subscribe to respond to the same topic and grab the url from the data object in your method.
- I'm not clear of the purpose of adding the line in Print.js. It seems unnecessary and may be it is causing an error?
this.own(topic.subscribe('messagebox/openFileUrl', lang.hitch(this, 'openFileUrl')));Hope this makes sense.