template.html

<div qv-extension ng-cloak>

    <div class="link" ng-show="isLoading || (!isLoading && linkedApps.length > 0)">
        <div class="qv-loader" ng-show="isLoading">&#160;</div>
        <a ng-click="openStage($event)">
            <img ng-src="/extensions/AppLinker/img/{{ layout.props.appareance.imageUrl }}" />
        </a>
    </div>

    <div ng-show="((isConfiguredApps() && linkedApps.length === 0) || !isConfiguredApps()) && !isLoading">
        <span style="font-size: 10pt">Please select an app and a sheet to get started</span>
    </div>

    <div class="applinker-transferring" id="applinker-transferring-{{$parent.options.id}}" style="display:none">
        <div class="transferring-inner" ng-show="isTransferInProcess">
            <div class="info">Please wait whilst your selection details are transferred and your app is opened</div>
            <div class="qv-loader" style="width: 50px; height: 50px;">&#160;</div>
        </div>
        <div class="transferring-inner" ng-if="isTransferInProcess === false">
            <div class="info">Your selections have been transferred</div>
            <a class="lui-button lui-button--success" target="_blank"
                ng-href="{{ getAppLink(currentApp) }}"
                ng-click="closeStage()">Open App</a>
        </div>
    </div>

    <!-- NEW -->
    <div class="applinker-stage" id="applinker-stage-{{$parent.options.id}}" style="display:none">

        <div class="close-applinker-stage" style="color: white; font-size: 20px; cursor: pointer">
            <a href="javascript:void(0)" style="position: fixed;top: 50px;z-index: 9999;right: 12px;width: auto;">
                <img src="/extensions/AppLinker/img/icon-close.png"  />
            </a>
        </div>

        <section ng-repeat="currentApp in linkedApps track by $index">

            <div>
                <a class="img-frame" ng-click="openLinkedApp(currentApp, $event)" title="Open {{currentApp.qTitle}} transferring {{currentApp.transferableCount}} of {{selectedItemCount}}">
                    <img ng-src="{{currentApp.thumbnail}}" alt="" />
                </a>
                <!-- {{currentApp}} -->
                <div class="selections-panel" ng-if="currentApp.selectedItems.length > 0">
                    <h2>We can transfer {{currentApp.transferableCount}}  out of the {{currentApp.transferableCount}} selections you have made</h2>
                    <div class="selections">
                        <span ng-repeat="currentIntersect in currentApp.selectedItems" ng-class="currentIntersect.isTransferable ? 'transferable' : ''">{{currentIntersect.fieldName}}</span>
                    </div>
                </div>

                <div class="selections-panel intersections" ng-if="currentApp.selectedItems.length === 0">
                    <h2>You have selected 0 fields. We won't transfer any data to this app.</h2>
                </div>

                <div class="app-details">
                  <div class="app-details-name">
                    <span class="text" ng-attr-text="{{ currentApp.qTitle }}">
                      {{ currentApp.qTitle }}
                    </span>
                  </div>
                  <div class="details">
                    <span>File name: </span>
                    <span>{{ currentApp.qDocName }}</span>
                  </div>
                  <div class="details">
                    <span>Data last loaded: </span>
                    <span>{{ currentApp.qLastReloadTime | date:'MMM dd, yyyy, hh:mm a' }}</span>
                  </div>
                  <div class="description" ng-if="currentApp.qMeta.description && currentApp.qMeta.description.length > 0">
                    <span>{{ currentApp.qMeta.description }}</span>
                  </div>
                </div>
            </div>
        </section>
    </div>

</div>