Client API en business process flows caso práctico.

En algunas ocasiones requerimos automatizar ciertas acciones como por ejemplo avanzar un business process flow (bpf) en función de valor de un campo o la visibilidad de algunas partes del formulario en base al stage en el que bpf se encuentre.


En este blog vamos a ver como podemos mostrar u ocultar las pestañas de un formulario en base al stage en el que se encuentre el bpf. Para poder realizarlo usaremos la API de cliente de Power Apps model driven apps.


Dentro de la documentación para developers encontraremos un método que ejecutará una función cuando cambiemos a un stage del bpf.


formContext.data.process.addOnStageChange(myFunction);

¿Sabemos que son los stage en un bussiness process flow?


Los stage son fases de nuestros procesos y dentro de cada una de estas fases tenemos una serie de pasos o steps.



En el siguiente enlace encontrarás más información sobre que es y como crear un business process flow.


Una vez entendemos esto, debemos obtener el GUID de cada uno de los stages, para ello deberemos ejecutar en una ventana del navegador lo siguiente:


https://org.crm4.dynamics.com/api/data/v9.0/processstages?$select=stagename&$filter=processid/workflowid eq <processID>

Sustituyendo los campos resaltados por los nuestros y obtendremos lo siguiente:



{"@odata.context":"https://org.crm4.dynamics.com/api/data/v9.0/$metadata#processstages(stagename)",
    "value":[
    {
        "@odata.etag":"W/\"2997737\"",
        "stagename":"Stage1",
        "processstageid":"b32f5f3e-8e3a-464e-966f-0f17b4aba851"
    },
    {
        "@odata.etag":"W/\"2997741\"",
        "stagename":"Stage2",
        "processstageid":"2fd5b8e6-7ab3-4a81-bc68-3ddb4a9da66d"
    },
    {
        "@odata.etag":"W/\"2997735\"",
        "stagename":"Stage3",
        "processstageid":"86c31c61-6e6c-45b2-af14-7baa15be2acb"
    },
    {
        "@odata.etag":"W/\"2997739\"",
        "stagename":"Stage4",
        "processstageid":"0dd1bf46-6246-4e2c-a60f-d8aba10d2b16"
    },
    {
        "@odata.etag":"W/\"2997733\"",
        "stagename":"Stage5",
        "processstageid":"d42d3156-6257-4e96-9dda-ed4f0dcc1f5f"
    }
    ]
}

Aquí encontraremos los GUIDs de cada uno de los stages que utilizaremos para la creación de la función que establecerá la visibilidad de las pestañas del formulario en base al stage.


En nuestro formulario dejaremos por defecto ocultas las pestañas





Luego crearemos un recurso web con el siguiente código JavaScript:



function bpfOnChange(executionContext){
    var formContext = executionContext.getFormContext();
    formContext.data.process.addOnStageChange(showTab);
    
    function showTab(){
        var activeStage = formContext.data.process.getActiveStage();
        var stageId = activeStage.getId();
        var tab2 = formContext.ui.tabs.get("tab_2");
        var tab3 = formContext.ui.tabs.get("tab_3");
        var tab4 = formContext.ui.tabs.get("tab_4");
        var tab5 = formContext.ui.tabs.get("tab_5");
        switch (stageId){
            //TAB2
            case "d42d3156-6257-4e96-9dda-ed4f0dcc1f5f":
                tab2.setVisible(true);
                tab3.setVisible(false);
                tab4.setVisible(false);
                tab5.setVisible(false);
                break;
            //TAB3
            case "86c31c61-6e6c-45b2-af14-7baa15be2acb":
                tab2.setVisible(true);
                tab3.setVisible(true);
                tab4.setVisible(false);
                tab5.setVisible(false);
                break;
            //TAB4
            case "b32f5f3e-8e3a-464e-966f-0f17b4aba851":
                tab2.setVisible(true);
                tab3.setVisible(true);
                tab4.setVisible(true);
                tab5.setVisible(false);
                break;
            //TAB5
            case "0dd1bf46-6246-4e2c-a60f-d8aba10d2b16":
                tab2.setVisible(true);
                tab3.setVisible(true);
                tab4.setVisible(true);
                tab5.setVisible(true);
                break;
            default:
                tab2.setVisible(false);
                tab3.setVisible(false);
                tab4.setVisible(false);
                tab5.setVisible(false);
                break;

        }

    }

}



Finalmente lo agregaremos a nuestro formulario en la carga del formulario y pasándole el contexto de ejecución.



No obstante, hay que tener en cuenta que este código se ejecutará cuando el bpf cambie de stage por lo tanto al cargar el formulario por primera vez, o lo que es lo mismo al entrar en el registro, no se mostrarán las pestañas según el stage del bpf, por lo que tendremos que generar otro JavaScript similar en el momento de la carga del formulario, de forma que, según el stage activo muestre u oculte algunas pestañas.


Aquí dejo el ejemplo de ese código:




function bpfOnLoad(executionContext){
    var formContext = executionContext.getFormContext();
    var activeStage = formContext.data.process.getActiveStage();
    var stageId = activeStage.getId();
    var tab2 = formContext.ui.tabs.get("tab_2");
    var tab3 = formContext.ui.tabs.get("tab_3");
    var tab4 = formContext.ui.tabs.get("tab_4");
    var tab5 = formContext.ui.tabs.get("tab_5");
    switch (stageId)
    {
        //TAB2
        case "d42d3156-6257-4e96-9dda-ed4f0dcc1f5f":
            tab2.setVisible(true);
            tab3.setVisible(false);
            tab4.setVisible(false);
            tab5.setVisible(false);
            break;
        //TAB3
        case "86c31c61-6e6c-45b2-af14-7baa15be2acb":
            tab2.setVisible(true);
            tab3.setVisible(true);
            tab4.setVisible(false);
            tab5.setVisible(false);
            break;
        //TAB4
        case "b32f5f3e-8e3a-464e-966f-0f17b4aba851":
            tab2.setVisible(true);
            tab3.setVisible(true);
            tab4.setVisible(true);
            tab5.setVisible(false);
            break;
        //TAB5
        case "0dd1bf46-6246-4e2c-a60f-d8aba10d2b16":
            tab2.setVisible(true);
            tab3.setVisible(true);
            tab4.setVisible(true);
            tab5.setVisible(true);
            break;
        default:
            tab2.setVisible(false);
            tab3.setVisible(false);
            tab4.setVisible(false);
            tab5.setVisible(false);
            break;
    };

}