SplitAppにBusyを設定するのに詰まった話

はじめに

SAPUI5のSplitAppを使用してアプリを作成しました。
参考：SCP Samples
SplitAppに対してBusyを設定したところ、以下のようにmasterPageにBusyが表示されなかったので、その解決策を備忘録として記載します。

Busyをどう設定しようとしたのか

ViewとContorollerを以下のようにしたところ、上図のようにmasterPageにBusyが表示されませんでした。

Main.view.xml

<mvc:View controllerName="....controller.Main"
	xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true"
	xmlns="sap.m">
	<Shell id="shell" appWidthLimited="false">
		<SplitApp id="SplitApp" initialDetail="detail" initialMaster="master" masterButtonText=" ">
			<detailPages>
				<Page id="detail" backgroundDesign= "Solid" ...>
				</Page>
			</detailPages>
			<masterPages>
				<Page id="master" backgroundDesign= "List" ...>
                 ...
				</Page>
			</masterPages>
		</SplitApp>
	</Shell>
</mvc:View>

Main.controller.js

onInit: function() {
...
this.getView().byId("SplitApp").setBusy(true);
...
}

原因

SplitApp配下にある、masterPageのCSSにz-index:1が設定されていることが原因でした。
Busyや他の要素にはz-indexが設定されていないため、masterPageが一番手前に表示されてしまうようです。

解決策

今回はBusyの要素にz-indexを設定することで解決しました。

style.css

.sapUiBlockLayer, 
.sapUiLocalBusyIndicator{
    z-index: 2;
}

上記の設定で、無事にBusyがView全体に表示されるようになりました。

おわりに

今回は強引な方法で解決したので、よりスマートな解決策が見つかれば、またまとめたいと思います。