読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:AngularJSのng-disabledでボタンの連続クリック操作をブロックする

salesforce.com Force.com Angular

保存ボタンをクリックするときですが、連続でクリックされて処理が複数回実行されないようにブロックしなくてはいけないケースがあると思います。AngularJSの場合、ng-disabledで簡単に対応することができます。


サンプルです。デフォルトではLockボタンが活性でUnLockボタンが非活性になっています。

Lockボタンクリック前

f:id:tyoshikawa1106:20160201181310p:plain

Lockボタンクリック後

f:id:tyoshikawa1106:20160201181256p:plain


HTML側は次のようになります。ng-disabledではOR条件なども利用することが可能です。

<div class="slds-m-top--medium">
    <button class="slds-button slds-button--destructive" ng-click="doLock($event)" ng-disabled="inputForm.$invalid || isLocked">Lock</button>
    <button class="slds-button slds-button--brand" ng-click="doUnLock($event)" ng-disabled="inputForm.$invalid || !isLocked">UnLock</button>
</div>


JS側です。変数『$scope.isLocked』を用意してクリック時に値を切り替えます。

var myApp = angular.module('myApp', ['ngMessages']);
myApp.controller('mainCtrl', ['$scope', function($scope) {
    $scope.accName = 'salesforce.com';
    $scope.isLocked = false;
    
    $scope.doLock = function(event) {
        event.preventDefault();
        $scope.isLocked = true;
        console.log('Lock!!');
    };
    
    $scope.doUnLock = function(event) {
        event.preventDefault();
        $scope.isLocked = false;
        console.log('UnLock!!');
    };
}]);


これだけで活性/非活性を切り替えて画面に反映することができます。今回、2つのボタンの活性/非活性を切り替えただけですが、実際は保存ボタン処理の最初で、保存ボタンを非活性にしてすべての処理が完了後に活性に戻します。これで連続クリックなどの操作をブロックできると思います。


注意点として、保存後に画面遷移を行うようなケースです。画面遷移処理が呼び出された後、ボタンを活性に戻す処理が実行されると、一瞬だけボタンが活性状態で表示されます。細かいところですが、画面遷移時にはボタンは活性に戻さないようにすると綺麗かなと思います。


ロック中はスピナーなどを表示すると使いやすいかもしれません。
f:id:tyoshikawa1106:20160201183111p:plain


Lightning Design Systemにもスピナー画像がいくつか用意されています。

<div class="slds-m-top--medium">
    <button class="slds-button slds-button--destructive" ng-click="doLock($event)" ng-disabled="inputForm.$invalid || isLocked">Lock</button>
    <button class="slds-button slds-button--brand" ng-click="doUnLock($event)" ng-disabled="inputForm.$invalid || !isLocked">UnLock</button>
    <div class="slds-spinner--medium slds-m-top--medium" ng-Show="isLocked">
        <img src="{!URLFOR($Resource.SLDS0121, '/assets/images/spinners/slds_spinner_brand.gif')}" alt="Loading..." />
    </div>
</div>


活性/非活性はng-disabledでしたが、表示/非表示の切り替えはng-Showまたはng-Hideで対応できます。

デモ動画

サンプルコード