LightSwitch選項卡式瀏覽模板中的屏幕

Question

我有一個屏幕，我們有4個選項卡，每個選項卡應按照登錄優先級顯示。

例如：部門，角色，員工，屏幕是選項卡。

每個選項卡都有用於添加，編輯和刪除數據的按鈕。 默認情況下，當我與任何用戶登錄它的第一個標籤，但並非所有的用戶都有第一個標籤作爲他們的要求。

我怎樣才能解決這個動態做，在HTML客戶端應用程序

Answer 1

由於覆蓋朝下面LightSwitch團隊博客文章的末尾，您可以通過編程使用screen.showTab方法更改標籤：

Creating a wizard-like experience for HTML client (Andy Kung)

但是，爲了在屏幕加載時使用此showTab API命令，它的使用需要延遲到屏幕完全顯示。這可以通過結合使用jQuery mobile pagechange event（LightSwitch HTML Client使用jQuery mobile）和setTimeout with a zero timeout（延遲showTab，直到呈現加載屏幕）的組合來實現。

下面顯示了你可以如何使用這種方法來動態設置的初始畫面標籤一個簡單的例子：根據您的earlier post

myapp.BrowseScreen.created = function (screen) { 
    var initialTabName = localStorage.getItem("Rolename") + "Tab"; 
    $(window).one("pagechange", function (e, data) { 
     setTimeout(function() { 
      screen.showTab(initialTabName); 
     }); 
    }); 
}; 

看來你使用LocalStorage來跟蹤你的登錄用戶和他們的角色。

在此基礎上，上述示例假設用戶的角色將成爲決定屏幕加載時顯示的選項卡的因素（屏幕在上例中名爲BrowseScreen）。

它還假設您的選項卡是以每個員工角色命名的（後綴爲「Tab」文本），例如被分配角色'DepartmentManager'的用戶將被定向到名爲'DepartmentManagerTab'的選項卡。

雖然稍有更多的參與，但如果您希望避免pagechange和setTimeout，則可以自定義LightSwitch庫以引入新的navigationComplete屏幕事件。這個新事件非常適合執行依賴於完全呈現的屏幕的任何操作（例如使用showTab函數導航到不同的選項卡）。

如果您想要介紹這個附加事件，您需要通過在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版本您正在使用。

然後，您需要在腳本/ msls - ？。？。？中找到代碼段。該聲明completeNavigation功能和更改如下js文件：

function completeNavigation(targetUnit) { 
    msls_notify(msls_shell_NavigationComplete, { navigationUnit: targetUnit }); 

    var screen = targetUnit.screen; 
    var intialNavigation = !screen.activeTab; 
    var selectedTab = targetUnit.__pageName; 
    if (screen.activeTab !== selectedTab) { 
     callNavigationUnitScreenFunction(targetUnit, "navigationComplete", [intialNavigation, selectedTab]); 
     screen.activeTab = selectedTab; // Set at the end of the process to allow the previous selection to be referenced (activeTab) 
    } 
} 
function callNavigationUnitScreenFunction(navigationUnit, functionName, additionalParameters) { 
    var screenObject = navigationUnit.screen; 
    var constructorName = "constructor"; 
    var _ScreenType = screenObject[constructorName]; 
    if (!!_ScreenType) { 
     var fn = _ScreenType[functionName]; 
     if (!!fn) { 
      return fn.apply(null, [screenObject, navigationUnit].concat(additionalParameters)); 
     } 
    } 
} 

那麼您可以在屏幕上使用這個新的事件如下：

myapp.BrowseScreen.navigationComplete = function (screen, navigationUnit, intialNavigation, selectedTab) { 
    if (intialNavigation) { 
     var initialTabName = localStorage.getItem("Rolename") + "Tab"; 
     screen.showTab(initialTabName); 
    } 
}; 

此事件時將觸發導航事件結束（包括選項卡的更改），初始加載屏幕時initialNavigation參數設置爲true，selectedTab參數反映所選標籤。

雖然LightSwitch庫的修改對於一些經驗豐富的LightSwitch開發人員來說並不少見，但如果您決定走下這條路，您需要徹底測試更改是否存在任何不良副作用。另外，如果您升級LightSwitch的版本，則需要在新版本中重複庫修改。