Select to view content in your preferred language

Disable Print Export button when Exporting Map - ArcGIS API for JS 4.16

1948
6
Jump to solution
10-07-2020 12:38 PM
PaulMcCord
Regular Contributor

I'd like to disable the print export button when the user is in the process of exporting their map.

Export button from Print widget

Currently, a user is able to repeatedly generate map exports while an export is taking place. Is there a way to disable the button until the export has completed?

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
PaulMcCord
Regular Contributor

Thanks Noah, The 'submit' and 'complete' events in the 4.17 release made this much more manageable. I've got it working now so that when the Export button is clicked, the button is disabled until the print job finishes. Here is the code:

var print = new Print({
        view: myView,
        printServiceUrl: ***removed by author***,
        container: printContainer
    })

    print.on("submit"function(){
        $(".esri-print__export-button").attr("disabled"true);
    })

    print.on("complete"function(){
        $(".esri-print__export-button").attr("disabled"false);
    })

View solution in original post

6 Replies
Noah-Sager
Esri Regular Contributor

Interesting question. Is the use case that the end user does not realize a print job is currently running, or are they getting bored waiting and click the button again to increase the speed, or are people just repeatedly clicking on the print button?

I think you would need to customize the print widget in order to disable the print button, there might be another way soon (e.g. this week). At 4.17, we are introducing submit and complete events to the print widget, so you could do something like if the widget is in submit mode, then disable the print function with the PrintViewModel.print() method. Here is the info about the enhancements on next: feedback-js-api-next/CHANGELOG.md at master · Esri/feedback-js-api-next · GitHub 

PaulMcCord
Regular Contributor

The use case is primarily that people seem to be just clicking the button repeatedly, which might be due to them not knowing that the print job is currently running.

I was playing around with a couple ways to disable the print widget, but felt I was making very little progress which is why I posted my question. I'm interested in the potential solution with 4.17. I'll check that out when it's released and post my solution if it ends up solving it.

Noah-Sager
Esri Regular Contributor

Any luck Paul McCord‌? Here is the Print widget mention in the release notes:
Print widget - Release notes for 4.17 

PaulMcCord
Regular Contributor

Thanks Noah, The 'submit' and 'complete' events in the 4.17 release made this much more manageable. I've got it working now so that when the Export button is clicked, the button is disabled until the print job finishes. Here is the code:

var print = new Print({
        view: myView,
        printServiceUrl: ***removed by author***,
        container: printContainer
    })

    print.on("submit"function(){
        $(".esri-print__export-button").attr("disabled"true);
    })

    print.on("complete"function(){
        $(".esri-print__export-button").attr("disabled"false);
    })
Noah-Sager
Esri Regular Contributor

Excellent! Good work Paul, and thank you for sharing your solution with the community.

0 Kudos
KirillLiss
New Contributor

Hello PaulMcCord, maybe you can help. I tried to use your code, but all I get is an error -  Uncaught ReferenceError: $ is not defined. ver. js - 4.25. 

 

const printMap = new Print({
    view: view,
    printServiceUrl:
"...",
    allowedLayouts: ["map-only", "a3-landscape", "a3-portrait", "a4-landscape", "a4-portrait"],
    allowedFormats: ["pdf", "jpg", "eps", "png32"]
});

printMap.on("submit", function(){
    $(".esri-print__export-button").attr("disabled", true);
})

printMap.on("complete", function(){
    $(".esri-print__export-button").attr("disabled", false);
})

 My js level is beginner. Do you have any ideas? Thanks.

0 Kudos