Enfócate En Lo Esencial Con Los Flujos De Proceso De Negocio
Enfócate En Lo Esencial Con Los Flujos De Proceso De Negocio

Enfócate En Lo Esencial Con Los Flujos De Proceso De Negocio

Gracias a uno de los eventos de Power Platform Madrid pudimos ver la funcionalidad de los flujos de proceso de negocio en Microsoft DataVerse. En este caso el speaker fue Mario Trueba. Aquí os dejo el vídeo:

Si veis el video Mario llega hasta el punto de ocultar tabs con un javascript y mostrar al usuario únicamente lo esencial. Desde mi punto de vista esto es algo obligatorio para algunos escenarios ya que, este tipo de elementos están para guiar al usuario y no para liarlo más. He creado esta entidad y este proceso para que veáis el ejemplo:

Si os fijáis, el formulario está pensado para que cuando estemos en el paso 1, el usuario interactúe con el Tab del primer paso y así sucesivamente con los siguiente pasos. Si cuando estamos en el primer paso ocultamos el Tab Segundo paso y Tab finalización, enfocaremos al usuario únicamente donde debe estar. La experiencia sería así cuando estamos en el primer paso:

Y cuando estamos en el segundo paso, sólo se mostrará el tab segundo paso:

¿Y cómo conseguimos esto? Pues debemos hacer un desarrollo menor utilizando la api del cliente de javascript de Dynamics 365. Para ello debemos desarrollar un método que se ejecutará cada vez que se abra el formulario o cada vez que se haga un cambio en el flujo de proceso de negocio. Aquí tenéis info de cómo añadir un método javascript al evento OnLoad de un formulario de Microsoft Dataverse.

El javascript tendrá una estructura muy simple con 4 métodos y haremos uso de tres funciones básicas de la API de cliente de Dynamics:

1.- formContext.ui.tabs.get(‘tabname’).setvisible(‘bool’): Nos permitirá establecer la visibilidad de un tab de un formulario
2.- formContext.ui.tabs.get(tabName).setFocus(): Permitirá establecer el foco en un tab en concreto.
3.- formContext.data.process.getSelectedStage().getName(): Permite extraer el nombre del step seleccionado del flujo.

Para terminar de implementar y automatizar el javascript definitivo debe ser así:

let formContext;

function OnLoad(context) {
    formContext = context.getFormContext();

// Se ejecutará este método cada vez que cambiemos de step en el BPF
    formContext.data.process.addOnStageChange(FocusOnStageTab);

// Ejecutamos este método en la carga del formulario
    FocusOnStageTab();
}

function FocusOnStageTab() {
// 1.- Ocultar todas las tabs
    HideAllTabs();

// 2.- Recuperamos el nombre del step actual
    let selectedStage = formContext.data.process.getSelectedStage().getName();

// 3.- Hacemos mostramos el tab correspondiente al paso del Flujo de proceso de negocio
    switch (selectedStage) {
        case "Paso 1":
            setTabVisibleAndFocus("FirstStepTab");
            break;
        case "Paso 2":
            setTabVisibleAndFocus("SecondStepTab");
            break;
        case "Finalizar":
            setTabVisibleAndFocus("FinishTab");
            break;
    }
}

function setTabVisibleAndFocus(tabName){
    formContext.ui.tabs.get(tabName).setVisible(true);
    formContext.ui.tabs.get(tabName).setFocus();
}

function HideAllTabs(){
    formContext.ui.tabs.get("FirstStepTab").setVisible(false);
    formContext.ui.tabs.get("SecondStepTab").setVisible(false);
    formContext.ui.tabs.get("FinishTab").setVisible(false);
}

Espero que os haya sido útil!!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.