12.0p ListGrid exportData() does not show prompt, even when manually activated

[Blama]

Hi Isomorphic,

please see this modified testcase (v12.0p_2020-04-16).

As you can see, a click on fetchData() issues a prompt while reloading (expected). This does not happen for a click on exportData(). I'd expect a prompt here as well.

Best regards
Blama

isc.ListGrid.create({
    ID: "supplyItemList",
    width:"80%", height:"100%", alternateRecordStyles:true,
    dataPageSize: 2000,
    dataSource: supplyItem,
    autoFetchData: true,
    showFilterEditor: true
});

isc.Button.create({
   ID: "exportDataButton",
   title: "exportData()",
   click: function () {
           supplyItemList.exportData({ exportAs: "ooxml",
                                       exportFields: ["gdp", "countryName", "capital", "continent"],
                                       showPrompt: true,
                                       promptDelay: 0,
                                       promptStyle: "dialog",
                                       prompt: "Exporting data, please wait"
           });
   }
});

isc.Button.create({
   ID: "fetchDataButton",
   title: "fetchData()",
   click: function () { supplyItemList.fetchData({
        _constructor:"AdvancedCriteria",
        operator:"and",
        criteria:[ { fieldName:"itemID", operator:"notEqual", value: Math.ceil(Math.random()*1000) + 4000 } ]},
        null,
        { showPrompt: true,
          promptDelay: 0,
          promptStyle: "dialog",
          prompt: "Fetching data, please wait"}
    );}
});


isc.HLayout.create({
   ID: "buttonsLayout",
   members: [exportDataButton, fetchDataButton],
   membersMargin: 10,
   width:"80%"
});

isc.VLayout.create({
   members: [supplyItemList, buttonsLayout],
   membersMargin: 10,
   width:"80%",
   height:"100%"
});

[Isomorphic]

There's no way for the client to get a notification that the export has started, so there would be no way to clear the prompt.

[Blama]

Hi Isomorphic,

thanks for the fast answer. Are you saying that as the request's answer is unrelated to the rest of the application, one can continue working after clicking export?
So perhaps on click on the export-button show a say-window "The export is being generated. You can continue working in the meantime. You'll get a notification from your browser once the download is finished"?

I still would consider a modal behavior here a good thing (at least as an option), because depending on the time the export takes, the user might be tempted to click the button again.

Best regards
Blama

[Isomorphic]

Starting a download is a bit like opening a new browser tab or window - it's not really related to the existing tab that started it, so there's no way to get an event telling us the download has started. Hence, we can't put up a prompt or provide a modal experience, because there would be no way to tell when it should be dismissed.

If your export operation is slow enough that you are concerned about a second click, you could possibly use the new Notify feature to reassure users that the export is starting.

[Blama]

Hi Isomorphic,

we had such a thing before for exportClientData() (which can take ages for many fields and many columns) where we showed a modal window before issuing the request and removed the window again in the CallBack. This was also necessary, as the export could block the whole browser with "long JS script run time" messages. This way the user was at least warned.

Now you added the CallBack possibility for exportData() also here in SmartGWT, so we could build such a thing here as well (even though the exportData() run times are ridiculously low compared to exportClientData()).

But as updating to get this new API requires a lot of manual regression testing, I thought about the prompt-possibility.
IMHO it should work as well - you have the same information I'd have with the CallBack, wouldn't you?


Thanks for the hint on Notify. I'll definitely somehow use this once we switched to 12.1 - perfect use case for this if we decide to do it non-blocking.

Best regards
Blama

[Isomorphic]

So again. We cannot get a notification that the export has started. The callback does not fire unless you set exportToClient:false (no download occurs). That's what the docs say.

[Blama]

Hi Isomorphic,

OK understood. It's documented as you say for exportClientData and also working like that.

I think my confusion comes from the fact that I was using exportClientData() (to the browser) before and the callback worked. Therefore I assumed that it then must also somehow work for exportData(). The difference here is that because of what exportClientData() does, the part to prepare might take some time and the CallBack fires then (as the docs say) after this work (e.g. applying Hilites), and not after the file was received from the server.

For anyone finding this thread via search here a testcase to reproduce the behavior.

Thank you & Best regards
Blama

isc.ListGrid.create({
    ID: "supplyItemList",
    width: "80%",
    height: "100%",
    alternateRecordStyles: true,
    dataPageSize: 1000,
    dataSource: supplyItem,
    autoFetchData: true,
    showFilterEditor: true,
    // To give exportClientData() some extra work in order to slow it down.
    hilites: [{
            fieldName: "itemName",
            cssText: "color:#FF0000;",
            criteria: {
                fieldName: "itemName",
                operator: "greaterThan",
                value: "M"
            }
        },
        {
            fieldName: [
                "SKU",
                "category"
            ],
            cssText: "color:#FFFFFF;background-color:#639966;",
            criteria: {
                fieldName: "itemName",
                operator: "greaterThan",
                value: "M"
            }
        }
    ]
});

isc.Button.create({
    ID: "exportDataFSButton",
    width: 200,
    title: "exportData() Filesystem",
    click: function() {
        supplyItemList.exportData({
            exportAs: "ooxml",
            exportToClient: false,
            exportToFilesystem: true,
            showPrompt: true,
            promptDelay: 0,
            promptStyle: "dialog",
            prompt: "Exporting data, please wait"
        }, function(dsResponse, data, dsRequest) {
            isc.say('Done');
        });
    }
});

isc.Button.create({
    ID: "exportClientDataFSButton",
    width: 200,
    title: "exportClientData() Filesystem",
    click: function() {
        supplyItemList.exportClientData({
            exportAs: "ooxml",
            exportToClient: false,
            exportToFilesystem: true,
            showPrompt: true,
            promptDelay: 0,
            promptStyle: "dialog",
            prompt: "Exporting data, please wait"
        }, function(dsResponse, data, dsRequest) {
            isc.say('Done');
        });
    }
});

isc.Button.create({
    ID: "exportDataCButton",
    width: 200,
    title: "exportData() Client",
    click: function() {
        supplyItemList.exportData({
            exportAs: "ooxml",
            exportToClient: true,
            exportToFilesystem: false,
            showPrompt: true,
            promptDelay: 0,
            promptStyle: "dialog",
            prompt: "Exporting data, please wait"
        }, function(dsResponse, data, dsRequest) {
            isc.say('Done');
        });
    }
});

isc.Button.create({
    ID: "exportClientDataCButton",
    width: 200,
    title: "exportClientData() Client",
    click: function() {
        supplyItemList.exportClientData({
            exportAs: "ooxml",
            exportToClient: true,
            exportToFilesystem: false,
            showPrompt: true,
            promptDelay: 0,
            promptStyle: "dialog",
            prompt: "Exporting data, please wait"
        }, function(dsResponse, data, dsRequest) {
            isc.say('Done');
        });
    }
});


isc.HLayout.create({
    ID: "buttonsLayout",
    members: [exportDataFSButton, exportClientDataFSButton, exportDataCButton, exportClientDataCButton],
    membersMargin: 10,
    width: "100%"
});

isc.VLayout.create({
    members: [supplyItemList, buttonsLayout],
    membersMargin: 10,
    width: "80%",
    height: "100%"
});