Changing the Loading View for a Widget - akumina/AkuminaTraining GitHub Wiki

As of 4.0.0.0, Out of the Box Akumina Widgets have markup designated for display while the widget is loading built into their views. The markup displayed for Loading views is contained within the {{#if Loading}} mustache icon and is can easily be customized.

In the following example we will change the Loading view for one of the Hero Items on the Digital Workplace Foundation site to display a custom message. The out of the box Loading view is shown below.

1. Create a new file in a text editor, paste the code found in the CustomLoadingTargetedNews section of this article. Save the file as CustomLoadingTargetedNews.html.
2. In the Management Apps tab of AppManager, click on the View Manager. Click Add New. In the left pane navigate to /DigitalWorkplace/Content/Templates/GenericList for the folder path. Click Choose File, navigate to your custom template (CustomLoadingTargetedNews.html). Click Save.
3. In the Management Apps tab of AppManager, click on the Widget Manager app. Find the GenericList Widget. Click its Edit button.
4. In the Edit Widget window, add the view you just created (CustomLoadingTargetedNews.html) to the WidgetViews row of the Widget Definition. Click Save.
5. Return to the Manage Widgets window. Find the GenericList Widget. Click its View Instances button. Then find HomePage-Hero1. Click Edit.
6. In the WidgetOptions row of the HomePage-Hero1 widget instance find the CustomLoadingTargetedNews.html view. Check Display View and Selected View options next to it. Click Save & Exit
7. Navigate to the home page of your Digital Workplace foundation site.
8. Flush your cache by clicking on the Akumina icon in the left rail, clicking the refresh icon, then clicking Refresh All Cache
9. Refresh the page. Hero Item 1 will load with the customized markup.

Within a view, the markup will be split between Prerender (displayed while loading) and Postrender (displayed after load). This is control via logic through the mustache {{#if Loading}}...{{else}}...{{/if}} statement. The Prerender markup is between {{#if Loading}}...{{else}} and the Postrender markup is between {{else}}...{{/if}}.

{{#if Loading}}
<div class="ak-hero-banner-item small-6 medium-3 large-3 columns akloading">
    <a href="#" class="ak-hero-banner-link">
        <span class="ak-hero-banner-img"></span>
        <div class="ak-hero-overlay"></div>
        <div class="ak-hero-content">
            <span class="ak-hero-content-type"></span>
            <h2 class="ak-hero-title">This is a Custom Loading View!!!</h2>
        </div>
    </a>
    <div class="ia-widget-loader ia-show"></div>
</div>
{{else}}
<div class="ak-hero-banner-item small-6 medium-3 large-3 columns">
    <a href="{{Link}}" class="ak-hero-banner-link">
        {{#if HasImage}}
        <span class="ak-hero-banner-img" style="background-image: url('{{Image}}')"></span>
        {{else}}
        <span class="ak-hero-banner-img"></span>
        {{/if}}
        <div class="ak-hero-overlay"></div>
        <div class="ak-hero-content">
            <span class="ak-hero-content-type">{{Category}}</span>
            <h2 class="ak-hero-title">{{Title}}</h2>
        </div>
    </a>
</div>
{{/if}}

Create a global widget variable to track the state of the loading..

this._loaderReady = false;

In your 'Prerender' function (or Init)

this.Prerender = function () {
_cur.BindLoadingTemplate();
...
}

Define the BindLoadingTemplate function (Notice the Loading: true), remember this ONLY gets called during the "Init" of the page lifecycle, your BindTemplate call that is your Render event will replace this with the proper markup.

 this.BindLoadingTemplate = function () {
            new Akumina.Digispace.AppPart.Data().Templates.ParseTemplate(_cur.listRequest.displayTemplateUrl, { Loading: true }).then(function (html) {
                if (!_cur._loaderReady) {
                    $("#" + _cur.listRequest.SenderId).html(html);
                }
            });
    };

Be sure to set the _loaderReady variable to true when your Render event executes so it doesnt show the Loading state of your view.

this.Render = function(){
_cur._loaderReady = true;
...
}

The global loading template can also be altered by changing the following variable:

Akumina.Digispace.ConfigurationContext.LoadingTemplateHtml