|
POST
|
I have a dGrid that I'm populating from featureLayer.selectFeatures. I'm trying to give the user a couple of options. By default, the selected features will be in a dGrid that has been formated to more of a list look, using a row renderer. Then I'd like to give the option to click a "view as table' button and see that same data in more of a traditional grid layout. This is shown in a floating pane based on a button click. The data in my traditional grid layout is populating fine, but the contents of the grid are placed directly over the top of the grid headers. I wouldn't expect this is a default behavior. I assume this is a style somwhere? I can't just set .dgrid-content because it will impact my 'stacked' grid. I'm also noticing that the content is way bigger than it needs to be, introducing scrollbars in a list that is plenty big enough for the 3 records I've selected. I've had a hard time finding much documentation on the styling of any of the dojo components. Does anyone have any suggestions?
... View more
07-18-2013
01:39 PM
|
0
|
5
|
4772
|
|
POST
|
You should be able to put pretty much anything you want in a floating pane. I'm managing mine with a combination of HTML, CSS and JS. When you using floating panes, you also need to create something called a dock. I too wanted my pane to be opened with a button click. You don't want the floating pane to be open until you click the button, so its default style will have a hidden visibility. There is some other styling you'll need to consider too. #1 - add a button
<button id="btnFloat" dojotype="dijit.form.Button" onClick="openFloater();">Open Floating Pane
<div dojoType="dojox.layout.Dock" id="dock" >
</div> </button>
#2 - define the floating pane You will also need to define your floating pane. I put mine within my mapDiv.
<div id="mapDiv" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
<div id="floater" dojoType="dojox.layout.FloatingPane" title='My Floating Pane' dockTo="dock" style="visibility:hidden;" closable="false" resizable="true" dockable="true">
<div id="tocDiv"></div>
</div>
</div>
#3 - write some code to open the floating pane. Next you'll need some code to open the floating pane. All you're doing is to change the visibility of the floating pane for its initial visibility:hidden.
function openFloater() {
var fp = dijit.byId('floater');
if ((fp.style = "visibility: hidden;") || (fp.style = "VISIBILITY:hidden;")) {
fp.style.visibility="visible";
fp.show();
}
}
#4 - add the required dojo and CSS You will need to remember to add the dojo.require statement for the floatingPane. I'm still using the legacy style, so in my code this looks like this. You'll need to remember to add the resize handlers or your floating pane won't be resizable.
dojo.require("dojox.layout.FloatingPane");
dojo.require("dojox.layout.ResizeHandle");
You'll need to add the css defintion for this as well:
<link rel="stylesheet" type="text/css" href="https://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dojox/layout/resources/FloatingPane.css">
<link rel="stylesheet" type="text/css" href="https://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dojox/layout/resources/ResizeHandle.css">
#5 - add the necessary styling for your floater and docks Last, you'll need to have some styles set up. If you don't , the dock will appear as an icon, but since you want to use the button as the image, you don't need the dock to be visible too. You'll need to adjust for the size of your TOC and where you want it to appear in your map.
#floater {
position: absolute;
top: 100px;
left: 175px;
width: 260px;
height: 140px;
z-index: 99;
}
#dock {
position:absolute;
border-style:hidden;
z-index: 99;
top: 28px;
right: 330px;
height: 0px;
width: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
visibility:hidden;
display:none;
}
... View more
07-18-2013
10:40 AM
|
0
|
0
|
661
|
|
POST
|
Did you ever get any resolution on this? I'm seeing something very similar. The first time I do the selectFeatures, the callback function is called. For all subsequent selections, it never gets to the callback function. I will try queryFeatures instead, but I'm real unclear about what the difference is between selectFeatures vs. queryFeatures.
... View more
07-18-2013
10:19 AM
|
0
|
0
|
730
|
|
POST
|
I know this is an old thread - but when I try this, it didn't work as expected in the TOC. My layers were added, with a visibility of false. But the TOC didn't reflect this. They showed checked as ON in the TOC, when I expected them to be unchecked. I had to do a few clicks on/off before it was properly controlling the layers the way it should.
... View more
06-27-2013
01:43 PM
|
0
|
0
|
1093
|
|
POST
|
Time worked instead of date. When I looked at the ?time parameter when it was Date, it was truncating on the day ?time=Mon. That's no good. Switching it to the time instead took care of it. I could watch the original big long guid name get removed and replaced and see the browser properly show the newer version by the same name. Here's the updated submitPrint function:
function submitPrint() {
var deferred;
var printTitle = dojo.byId("txtTitle").value;
var printParams = new esri.tasks.PrintParameters();
printParams.map = map;
var status = dojo.byId("printStatus");
status.innerHTML = "Printing ...";
var e = dijit.byId("templateSelect");
var choice = e.value;
if (choice == "Portrait") {
template = templates[1];
}else{
template = templates[0];
}
if (!template) {
template = templates[0];
}
printParams.template = template;
template.layoutOptions.titleText = printTitle;
var printTask = new esri.tasks.PrintTask(printServiceUrl,printParams);
deferred = printTask.execute(printParams);
deferred.addCallback(function (response){
var d = new Date();
var dateTime = d.getTime();
var outputUrl = response.url + '?time=' + dateTime;
status.innerHTML = "";
var select = dijit.byId("templateSelect");
var selectOptions = select.getOptions();
select.set("value", "Choose Print Format");
var link = dojo.byId("printLink");
link.innerHTML = "<a href="+outputUrl+ " target=_blank ;'>Printout</a> ";
// link.innerHTML = "<a href="+response.url+ " target=_blank ;'>Printout</a> ";
link.onclick = function(){link.innerHTML = '';};
});
deferred.addErrback(function (error) {
console.log("Print Task Error = " + error);
status.innerHTML = "Print Error" + error;
});
}
... View more
06-24-2013
05:54 AM
|
0
|
0
|
2058
|
|
POST
|
Either I'm not using the right syntax or this isn't a solution. After several minutes of creating and monitoring my PDF output, I'm still see previously cached PDFs. Bummer.
... View more
06-21-2013
01:46 PM
|
0
|
0
|
2058
|
|
POST
|
Could you clarify where this goes since I'm using printTask and not the dijit? I'm appending the timestamp to the end of the response.url before I provide that as a link to the user and that's enough to never see old PDFs?
deferred = printTask.execute(printParams);
deferred.addCallback(function (response){
var time = new Date();
var outputUrl = response.url + '?time=' + time;
var link = dojo.byId("printLink");
link.innerHTML = "<a href="+outputUrl+ " target=_blank ;'>Printout</a> ";
// link.innerHTML = "<a href="+response.url+ " target=_blank ;'>Printout</a> ";
});
... View more
06-21-2013
01:44 PM
|
0
|
0
|
2058
|
|
POST
|
I didn't find a basic printTask example, so I put this together for whoever might be reading the forums about printing issues. This looks a lot like the print dijit, but is based on printTask and printParameters. It still doesn't the address the issue of 'duplicate' PDF output. But it does seem less buggy than the print dijit and it's working for me in IE. I don't see where I can control the output name. I wonder if there are maybe additional options if I had authored my service with Python instead of the Export Web Map server tool? This is based on my custom print service, but it's generic enough I'd think it would work with the OOTB printTool with minimal changes.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Print Task Example</title>
<link rel="stylesheet" type="text/css" href="https://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="https://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/dijit/css/Popup.css">
<link rel="stylesheet" type="text/css" href="https://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dojox/layout/resources/FloatingPane.css">
<link rel="stylesheet" type="text/css" href="https://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dojox/layout/resources/ResizeHandle.css">
<link rel="stylesheet" type="text/css" href="https://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css" >
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript">var dojoConfig = {parseOnLoad: true};</script>
<script type="text/javascript" src="https://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.4"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojox.layout.FloatingPane");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.Select");
dojo.require("esri.map");
dojo.require("esri.dijit.Popup");
dojo.require("esri.layers.FeatureLayer");
dojo.require("dijit.form.Button");
dojo.require("esri.tasks.PrintTask");
var loading;
var map;
var spatialReference;
var idFromClick = true;
var districtLayer;
var geometryPt;
var currentExtent;
var layouts = [];
var templates = [];
var template;
var printServiceUrl = "https://myPrintServerName/arcgis/rest/services/printTemplate/ExportWebMap/GPServer/Export%20Web%20Map";
function init() {
spatialReference = new esri.SpatialReference({wkid: 102100 });
startExtent = new esri.geometry.Extent(-10583000, 4287025, -9979000, 4980462, spatialReference);
map = new esri.Map("map",{ extent:startExtent });
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer");
map.addLayer(basemap);
roadLayer = new esri.layers.ArcGISDynamicMapServiceLayer("https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer",{id:'countyLayer'});
map.addLayer(roadLayer);
dojo.connect(dijit.byId('map'), 'resize', map, map.resize);//resize the map when the browser resizes
setUpPrinting();
}//end init function
function clearTextInput (id) {
dojo.byId(id).value="";
}
//functions for printing
function openPrint () {
clearTextInput('txtTitle');
var fp = dijit.byId('floater_print');
if ((fp.style = "visibility: hidden;") || (fp.style = "VISIBILITY:hidden;")) {
fp.style.visibility="visible";
fp.show();
}
}
function setUpPrinting() {
var templateList = dijit.byId("templateSelect");
layouts = [{
"layoutName": "Custom_Landscape",
"label": "Landscape",
"format": "PDF",
"options": {
"legendLayers": [], // empty array means no legend
"scalebarUnit": "Miles",
"titleText": ""
}
}, {
"layoutName": "Custom_Portrait",
"label": "Portrait",
"format": "PDF",
"options": {
"legendLayers": [], // empty array means no legend
"scalebarUnit": "Miles",
"titleText": ""
}
}];
dojo.forEach(layouts, function(layout){
var pTemplate = new esri.tasks.PrintTemplate();
pTemplate.layout = layout.layoutName;
pTemplate.label = layout.label;
pTemplate.format = layout.format;
pTemplate.layoutOptions = layout.options;
pTemplate.showAttribution = false;
templates.push(pTemplate);
templateList.addOption({
label: layout.label,
value: layout.label
});
});
}
function submitPrint() {
var deferred;
var printTitle = dojo.byId("txtTitle").value;
var printParams = new esri.tasks.PrintParameters();
printParams.map = map;
var status = dojo.byId("printStatus");
status.innerHTML = "Printing ...";
var e = dijit.byId("templateSelect");
var choice = e.value;
if (choice == "Portrait") {
template = templates[1];
}else{
template = templates[0];
}
if (!template) {
template = templates[0];
}
printParams.template = template;
template.layoutOptions.titleText = printTitle;
var printTask = new esri.tasks.PrintTask(printServiceUrl,printParams);
//printTask.execute(printParams,printComplete,printError);
deferred = printTask.execute(printParams);
deferred.addCallback(function (response){
// console.log("response = " + response.url);
status.innerHTML = "";
var select = dijit.byId("templateSelect");
var selectOptions = select.getOptions();
select.set("value", "Choose Print Format");
var link = dojo.byId("printLink");
link.innerHTML = "<a href="+response.url+ " target=_blank ;'>Printout</a> ";
link.onclick = function(){link.innerHTML = '';};
});
deferred.addErrback(function (error) {
console.log("Print Task Error = " + error);
status.innerHTML = "Print Error" + error;
});
}
function printError(err) {
console.log("Printer Error: " + err);
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div dojotype="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="width: 100%; height: 100%; margin: 0; border:0px;">
<div id="header" dojotype="dijit.layout.ContentPane" region="top"> Print Task Example </div>
<div dojotype="dijit.layout.ContentPane" id="centerPane" region="center">
<button id="btnPrint" dojotype="dijit.form.Button" onClick="openPrint();">Print</button>
<div id="map" dojotype="dijit.layout.ContentPane" title="Map" >
<div dojoType="dojox.layout.Dock" id="dock_print"></div>
</div>
<div id="floater_print" dojoType="dojox.layout.FloatingPane" title="Print Tools" dockTo="dock_print" style="visibility:hidden" closable="false" resizable="true" dockable="true" >
<div id="note">
<ol>
<li> Enter a Title
<input id="txtTitle" style="width:250px" type="text" value="Enter a map title" class="textBox"
onclick="clearTextInput('txtTitle');" />
</li>
<li> Click the dropdown arrow on the Print format to choose Landscape or Portrait. </li>
<li> The 'Printing' prompt indicates your page is being generated. </li>
<li> When the printout is ready, click Printout to view your PDF.</li>
</ol>
<select id="templateSelect" data-dojo-type="dijit.form.Select" >
<option>Choose Print Format</option>
</select>
<button id="btnPrintSubmit" dojotype="dijit.form.Button" onClick="submitPrint();">Print</button>
</div>
<div id="printStatus"></div>
<div id="printLink"></div>
</div>
</div>
</body>
</html>
... View more
06-21-2013
12:54 PM
|
0
|
0
|
2058
|
|
POST
|
Is there a suggested workaround to this bug? Is it specific to synchronous requests? It seems odd that the report is "sometimes old print requests are returned" and not all the time. I'd be interested in finding a print example that does not work with the dijit, but instead works directly with the printTask. From other threads, it sounds like there used to be some examples posted in earlier versions of the API. I assume once the dijit was offered as the main print solution, these were removed. If I can specify the name of the output file, that should be a solution to the repeated use of the output names. If I use printTask and printParameters instead, then should I execute it as deferred? If I submit my request that way, I assume this works as a submitted job and I need to listen for the results it? Does that mean my print service needs to be defined as asynchronous? It's synchronous right now.
... View more
06-21-2013
05:32 AM
|
0
|
0
|
2501
|
|
POST
|
In any code related to the onPrintComplete event, wouldn't the value already be determined by the outcome of the print request? Could you maybe do something in onPrintStart instead? If I append the date to the url within the function, it doesn't seem like I'm changing the name of the URL or the output file name. When I tried it, my console log looked different, but both the name of the PDF in the browser and the name generated on the server were the same names as always.
... View more
06-20-2013
01:10 PM
|
0
|
0
|
2501
|
|
POST
|
I have no clue where I would put that code - too cryptic for me! Nowhere in my version of a print set up, based on the printer widget, do I see a place for me to specify a different output URL name. You must be going about it the other way. I thought about switching to purely printTask and printParameters, but I could find no examples of this and I'm SO CLOSE to getting this other to work. Or so I thought.
//functions for printing
function openPrint () {
clearTextInput('txtTitle');
var fp = dijit.byId('floater_print');
if ((fp.style =="visibility: hidden;") || (fp.style="VISIBILITY:hidden;")) {
fp.style.visibility="visible";
fp.show();
}
}
function setupPrinting(){ //called from my init function
var layouts = [{
"layoutName": "FMDC_Landscape",
"label": "Landscape - PDF",
"format": "PDF",
"options": {
"legendLayers": [], // empty array means no legend
"scalebarUnit": "Miles",
"titleText": "",
"customTextElements": [{
"legalDescriptionText": ""
}, {
"subTitleText": ""
}]
}
}, {
"layoutName": "FMDC_Portrait",
"label": "Portrait - PDF",
"format": "PDF",
"options": {
"legendLayers": [], // empty array means no legend
"scalebarUnit": "Miles",
"titleText": "",
"customTextElements": [{
"legalDescriptionText": ""
}, {
"subTitleText": ""
}]
}
}];
// create the print templates, could also use dojo.map
dojo.forEach(layouts, function(lo){
var t = new esri.tasks.PrintTemplate();
t.layout = lo.layoutName;
t.label = lo.label;
t.format = lo.format;
t.layoutOptions = lo.options;
templates.push(t);
});
var printer = new esri.dijit.Print({
"map": map,
"templates": templates,
url: printUrl
}, dojo.byId("PrintDiv2"));
printer.startup();
dojo.connect(printer, "onPrintStart", function(){
var printTitle = dojo.byId("txtTitle").value;
if (printTitle.length < 1) {
printTitle = currentCountyName + " County";
}
var customElementString;
var checkName = "";
if (printName.length > 5) {
checkName = 'Owner: ' + printName;
}
if (printDeed.length < 16) { //feature has deed book and page information
customElementString = [
{"legalDescriptionText": checkName+'\r\n Description :' + fullLegalString},
{ "subTitleText": print_subTitle}
];
}else{
customElementString = [
{"legalDescriptionText": checkName+'\r\n Description :' + fullLegalString + '\r\n' + printDeed},
{ "subTitleText": print_subTitle}
];
}
// console.log("fullLegalString = "+fullLegalString + "<br> subTitleText = " + print_subTitle);
for (var i = 0; i < templates.length; i++) {
this.templates.layoutOptions.titleText = printTitle;
this.templates.layoutOptions.customTextElements = customElementString;
}
dojo.connect(printer, "onError", function(err){
console.log("Printer Error: " + err);
});
dojo.connect(printer, 'onPrintComplete', function(value){
console.log('The url to the print image is : ' + value.url);
});
});
}
The print tool is in a floating pane opened by a button.
<div id="floater_print" dojoType="dojox.layout.FloatingPane" title='Create Print Page' dockTo="dock_print" style="visibility:hidden; height:260px" closable="false" resizable="true" dockable="true">
<div id="info">
<div id="note">
<ol>
<li> Enter a Title
<input id="txtTitle" style="width:250px" type="text" value="Enter a map title" class="textBox"
onclick="clearTextInput('txtTitle');" />
</li>
<li> Click the dropdown arrow on the Print button to choose Landscape or Portrait. </li>
<li> The 'Printing' prompt indicates your page is being generated. </li>
<li> When the printout is ready, the print button will change to a link Printout.</li>
<li>Click Printout to view your PDF.</li>
</ol>
</div>
<div id="PrintDiv2" > </div>
</div>
</div>
... View more
06-20-2013
12:46 PM
|
0
|
0
|
2501
|
|
POST
|
I was told by ESRI that 'it shouldn't matter whether my print service was defined as synchronous or asynchronous'. However, when I change my service to be synchronous, it started working for me.
... View more
06-20-2013
12:30 PM
|
0
|
0
|
2809
|
|
POST
|
It isn't a solution, but it does make me feel a little better that I'm not just seeing things. I have observed the same 'stepping through the set' of PDFs that you are describing. When I noticed the older printouts, at first I thought it was random. Now that I've deliberately created several and monitored the output, it is definitely systematically walking through the list. My expectation was that the guid was forever unique, maybe based on a date/time somehow. I've made a note of what that number is today, I'll see if it is different tomorrow. It did help to set the browsers to clear that history on exit. I don't think that's a very user friendly solution.
... View more
06-20-2013
12:15 PM
|
0
|
0
|
2501
|
|
POST
|
I have a custom print service set up, defined as synchronous. I'm using the print widget and at first I thought I had everything working. As I'm testing, I started to notice that some of my printouts weren't what I currently had on the screen, they were ones that I had created a little earlier. I started looking closer at the output created in my arcgisoutput\printTemplate\ExportWebMap_GPServer, studying how long those files were around before they were automatically cleared out. I haven't got it down to the minute, but around 15 minutes seems to be their life cycle. Next I realized the once these were cleared, new files getting generated have the exact same names as the ones that I created several minutes ago! Because the names are the re-used, the browser is displaying the cached PDF from the earlier print request, not the one I just created. How can I work around this? Why aren't these names unique? Is this the behavior of the out of the box printTools or specific to my custom service? Do I Just tell the users they have to clear their browser histories if they start seeing this? I originally had this set up as asynchronous, but that came with its own set of problems, probably because the code sample I'm using was based on synchronous print requests. I am 3 weeks into trying to get this print to work and I'm running out of time!
... View more
06-20-2013
11:38 AM
|
0
|
17
|
5416
|
|
POST
|
I had an open ticket with them, but the choice of synchronous vs. asychronous wasn't suggested as a cause to my problem.
... View more
06-12-2013
12:09 PM
|
0
|
0
|
2809
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | 06-02-2017 02:38 PM | |
| 2 | 03-18-2022 10:14 AM | |
| 2 | 02-18-2016 06:28 AM | |
| 1 | 03-18-2024 07:29 AM | |
| 4 | 08-02-2023 06:08 AM |
| Online Status |
Offline
|
| Date Last Visited |
02-25-2025
01:56 PM
|