visual studio 2013 - tutorial - Pantalla de pestañas LightSwitch en la plantilla de navegación

visual studio code español

Question

Tengo una pantalla donde tenemos 4 pestañas, cada pestaña debe mostrarse según la prioridad de inicio de sesión.

Ej: Departamento, Rol, Empleado, Pantalla son las pestañas.

Cada pestaña tiene botones para agregar, editar, eliminar los datos. de forma predeterminada, cuando inicio sesión con cualquier usuario va a la primera pestaña, pero no todos los usuarios tienen la primera pestaña como requisito.

¿Cómo puedo resolver esto para hacerlo de forma dinámica en la aplicación de cliente html

Answer 1

Como se describe al final de la siguiente publicación del blog LightSwitch Team, puede cambiar la pestaña mediante programación utilizando el método screen.showTab:

Creando una experiencia de asistente para cliente HTML (Andy Kung)

Sin embargo, para usar este comando ShowTab API cuando la pantalla se está cargando, su uso debe retrasarse hasta que la pantalla se muestre completamente. Esto se puede lograr en el método creado de su pantalla usando una combinación del evento jQuery mobile pagechange (ya que LightSwitch HTML Client usa jQuery mobile) y un setTimeout con un tiempo de espera cero (para retrasar el showTab hasta que se muestre la pantalla de carga).

A continuación, se muestra un breve ejemplo de cómo puede usar este enfoque para establecer dinámicamente la pestaña de pantalla inicial:

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

Según su publicación anterior , parece que está utilizando LocalStorage para rastrear el usuario que ha iniciado sesión y su función.

Sobre esta base, el ejemplo anterior asume que la función del usuario será el factor que dicte la pestaña que se muestra cuando se carga la pantalla (la pantalla se llama BrowseScreen en el ejemplo anterior).

También asume que sus pestañas se nombran después de cada rol de empleado (con el sufijo ''Tabulador'' de texto), por ejemplo, un usuario al que se le asigna el rol ''DepartmentManager'' sería dirigido a una pestaña llamada ''DepartmentManagerTab''.

Si bien es un poco más complicado, si prefiere evitar el cambio de página y el ajuste de hora, es posible personalizar la biblioteca de LightSwitch para presentar un nuevo evento de pantalla de navegación completa. Este nuevo evento es ideal para ejecutar cualquier operación que dependa de que la pantalla se haya procesado por completo (como navegar a una pestaña diferente usando la función showTab).

Si desea presentar este evento adicional, deberá hacer referencia a la versión no minificada de la biblioteca LightSwitch realizando el siguiente cambio en el archivo default.htm de su cliente HTML (para eliminar el .min del final del referencia de script de la biblioteca):

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

Los signos de interrogación en la línea anterior se relacionarán con la versión de LightSwitch que está utilizando.

Luego deberá ubicar la sección de código en su archivo Scripts / msls -?.?.?. Js que declara la función de navegación completa y la cambia de la siguiente manera:

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));
        }
    }
}

Luego puede usar este nuevo evento en sus pantallas de la siguiente manera:

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

Este evento se dispara cada vez que se completa un evento de navegación (incluido un cambio de pestaña) con el parámetro inicialNavigation establecido en verdadero en la carga inicial de la pantalla y el parámetro seleccionadoTab que refleja la pestaña seleccionada.

Aunque la modificación de la biblioteca LightSwitch no es infrecuente con algunos de los desarrolladores LightSwitch más experimentados, si decides seguir este camino, deberás probar minuciosamente el cambio en busca de efectos secundarios adversos. Además, si actualiza su versión de LightSwitch, deberá repetir la modificación de la biblioteca en la nueva versión.