Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Paul Gower 28 posts 72 karma points
    Apr 27, 2016 @ 21:17
    Paul Gower
    1

    How to show a wait message or loading image when loading data in Umbraco's Admin custom grid editor?

    I created a custom grid plugin for the Umbraco Back Office (or Admin) but before I save the selected item I want to get the content by ID and save off a property. This get call takes a little longer than expected and since it is using a promise, I was hoping there was a way for me to notify the user that there is some data being loaded.

    I found this custom directive plugin for AngularJS but I am not sure the best way to wire it up into the Umbraco Admin UI. Also I assumed there would be a standard way to notify the user that an operation is taking place and to not leave this page or click submit again until it is done.

    Does anyone have any ideas the best practice to use to notify the user in the Umbraco Admin that something is loading?

    Here is some of my code from my plugin's controller:

    dialogService.treePicker({
        multiPicker: false,
        treeAlias: 'content',
        section: 'content',
        startNodeId: startNodeIdValue,
        callback: function (data) {
    
            notificationsService.info("Success", "Selected " + data.name + " (" + data.id + ").");
    
            //TODO: need a good way to show a loading/wait message 
            //      until the promise is finished
    
            //this might work but want to use the umbraco admin way 
            //to show a loading / wait message
            $scope.loading = true;
    
            contentResource.getById(data.id).then(function (content) {
                var icon = content.icon;
    
                $scope.control.value = {
                    id: data.id,
                    name: data.name,
                    path: data.path,
                    icon: icon
                };
    
                //this might work but want to use the umbraco admin way 
                //to show a loading / wait message
                $scope.loading = false;
    
                $scope.setPreview();
            });
        }
    });
    

    UPDATE:

    I found the directive that Umbraco uses called umb-load-indicator and it works; however, I'm still curious if someone has a better solution.

    Right now here is what my view looks like using the $scope.loading value.

    <div ng-controller="MyController">
        <div style="height: 25px;" ng-if="loading">
            <umb-load-indicator></umb-load-indicator>
        </div>
        <div ng-class="usky-editor-placeholder" ng-if="!loading">
            <!-- main content goes here -->
        </div>
    </div>
    

    Please let me know if you have a better solution.

  • Lachlann 321 posts 543 karma points
    Aug 10, 2016 @ 16:00
    Lachlann
    0

    Hey Paul, I used this as well in a plugin a recently built. I don't have an answer for you as to whether this is the preferred method or not but i did find this usage example in the directive markup: https://github.com/umbraco/OurUmbraco/blob/master/OurUmbraco.Site/umbraco/js/umbraco.directives.js#L8603

    Which leads me to think that this usage is correct and that there is nothing more to the loading indicator.

    what do you think? Best L

Please Sign in or register to post replies

Write your reply to:

Draft