【SAP UI5】WizardStep ステップインジケーターでの遷移を無効化する

はじめに

 本記事は、WizardStepのステップインジケータークリック時のイベントを無効化する方法についてまとめました。

経緯

 WizardのStepの遷移の制御を独自のメソッド内で nextStep() previousStep()を用いて遷移の処理を記述していましたが、ステップインジケーターをクリックしてページ遷移が行われると、期待するイベントが発火されることなく遷移してしまうという問題がありました。
 各ページの遷移ごとに処理内容も異なるため、ステップインジケーターのイベントを取得するのではなく、イベント事態を無効化してしまう方向性で解決することにしました。

解決方法

・Wizardのクリック時のイベント関数を上書きする。

this.oWizard = this.getView().byId("wizard")
this.oWizard._getProgressNavigator().ontap = function(){};

ただし、この方法だとイベントを無効化しただけであり、以下の画像のように各ステップのクリックすること自体は可能なためユーザを困惑させてしまう可能性があります。

・カスタムCSSでイベントとカーソルを無効にする。

.sapMWizardProgressNav {
  pointer-events: none;
  cursor: not-allowed;
}

この方法であれば、クリックで遷移することもなくカーソルも変わらないため、ユーザにボタンとして認識されることがなくなり、遷移できないと困惑されることはなくなると思われます。

まとめ

クリックイベントのみを無効化するだけでは、クリックできるのに遷移できないとユーザを困惑させてしまう可能性があるため、カスタムCSSでクリックイベントを無効化することで、期待通りの遷移処理を実現することができました。