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

[PaulMcCord]

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

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?

[Noah-Sager]

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]

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]

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

[PaulMcCord · Accepted solution]

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]

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

[KirillLiss]

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.