How to show progress bar in a when calling a onSaveAction of a pluggable widget

We are building a pluggable widget where users can create / modify documents. The widget contains a save button that saves the document. This can take a bit of time because of a conversion between file formats that needs to happen.   In the widget I use the props.onSaveAction.execute() to trigger the save action.    How can I show a progress bar or loading indicator during the save action?
2 answers

For the publicly available ones I only have exposed mx.ui.get from the Client API within a Pluggable widget. The call can be found here:

React ArcGIS widget

You do need to make sure you install the Client API with npm install. See package json:

React ArcGIS package.json

And add it to your compiler options:

React ArcGIS tsconfig

From a more fancy version of the ArcGIS widget, not available in the Marketplace, with Mendix modals whilst loading I have implemented the progress modal like this:

                // display either blocking Mendix progress bar or a loading indicator when the view is updating
                whenTrue(view, "updating", () => {
                    if (props.loadingModal) {
                        progressIdRef.current = mx.ui.showProgress(props.loadingModalMessage, true);
                    } else if (!props.loadingModal && loadingDiv.current) {
               = "";
                    // console.error(logNode + "updating..");
                // hide the loading indicator when the view stops updating
                whenFalse(view, "updating", () => {
                    if (props.loadingModal && progressIdRef.current) {
                    } else if (!props.loadingModal && loadingDiv.current) {
               = "hidden";
                    // console.error(logNode + "updating done..");

Two additions:

  1. ProgressIdRef: I keep track of the active Progress Model ID by storing it in a React Ref,so I can always access the latest version of it. 
  2. loadingDiv: is also a reference to a div shown or hidden:


    return (
        <div className="mapDiv" ref={mapDiv}>
            {!props.loadingModal ? (
                <div id="loading" ref={loadingDiv}>

            ) : null}



This is not possible yet with the Pluggable widgets API. How I have solved this in multiple widgets is by loading the Client API and using the Mx.ui.showProgress function.