1. ホーム
  2. ハイパーリンク

[解決済み] 画面作成イベントでshowTabを呼び出す

2022-03-04 08:35:43

質問

LightSwitch HTMLを使用していますが、複数のタブを持つ画面があり、画面の「作成」イベントで、いくつかのロジックに基づいてタブの1つを表示したいのです。

myapp.MyScreen.created = function (screen) 
{
     if (/* some logic */) {
         screen.showTab("TabOne");
     } else {
         screen.showTab("TabTwo");
     }
}

しかし、これでは画面を開くとエラーが出ます。

TypeError: Cannot read property 'pageName' of undefined.

この現象に遭遇した方、回避策を見つけた方はいらっしゃいますか?

ありがとうございました。

解決方法は?

画面のcreatedイベントでshowTab APIコマンドを使用するには、画面が完全に表示されるまで、その使用を遅らせる必要があります。

これを実現するには、jQuery mobileの ページ変更イベント (LightSwitch HTML ClientはjQuery mobileを使用しているため)および setTimeoutでタイムアウトを0にする (ローディング画面がレンダリングされるまでshowTabを遅延させるため)。

以下は、この方法を用いた例の修正版です。

myapp.MyScreen.created = function (screen) {
    $(window).one("pagechange", function (e, data) {
        setTimeout(function () {
            if (/* some logic */) {
                screen.showTab("TabOne");
            } else {
                screen.showTab("TabTwo");
            }
        });
    });
};

より高度な代替案とともに、このアプローチについては、次の投稿に対する私の回答でより詳細に説明しています。

BrowseテンプレートでのLightSwitchタブ画面

しかし、この方法は、最初の画面が完全に表示されるまで showTab を遅らせることに基づいているため、デフォルトのタブから showTab メソッドで表示されるタブへの移行が顕著になります。

この顕著な移行を避けたい場合は、LightSwitch ライブラリをカスタマイズして、標準の 表示画面 メソッドを使用します。この新しいオプションにより、画面を表示する際に希望のタブページ名を指定することができます。

この追加オプションを導入したい場合は、HTML クライアントの default.htm ファイルを以下のように変更して、LightSwitch ライブラリの最小化されていないバージョンを参照する必要があります(ライブラリ スクリプト参照の末尾から .min を削除します)。

<!--<script type="text/javascript" src="Scripts/msls-?.?.?.min.js"></script>-->
<script type="text/javascript" src="Scripts/msls-?.?.?.js"></script>

上の行のクエスチョンマークは、使用している LightSwitch のバージョンに関連しています。

次に、Scripts/msls-?...js ファイル内の showScreen 関数を宣言している部分を探し、以下のように変更してください。

function showScreen(screenId, parameters, options) {
    //return msls_shell.showScreen(
    //    screenId, parameters, null, false,
    //    options ? options.beforeShown : null,
    //    options ? options.afterClosed : null);
    return msls_shell.showScreen(
        screenId, parameters, 
        options ? options.pageName : null, 
        false,
        options ? options.beforeShown : null,
        options ? options.afterClosed : null);
}

そして、この新しいpageNameオプションは、以下のように標準的な画面表示方法のいずれかで使用することができます。

msls.application.showScreen("MyScreen", null, { pageName: "TabOne" });
// or
myapp.showScreen("MyScreen", null, { pageName: "TabOne" });
// or
myapp.showMyScreen(null, { pageName: "TabOne" });

この結果、デフォルトのタブから目立たず、目的のタブに画面が表示されるようになりました。