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

1
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?
asked
2 answers
1

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) {
                        loadingDiv.current.style.visibility = "";
                    }
                    // console.error(logNode + "updating..");
                });
                // hide the loading indicator when the view stops updating
                whenFalse(view, "updating", () => {
                    if (props.loadingModal && progressIdRef.current) {
                        mx.ui.hideProgress(progressIdRef.current);
                    } else if (!props.loadingModal && loadingDiv.current) {
                        loadingDiv.current.style.visibility = "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}>

                </div>
            ) : null}
        </div>
    );

 

answered
0

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.

answered