Expandir / Plegar todas las acciones de un flujo de Power Automate

Como sabéis, cuando accedemos a un flujo de Power Automate en modo edición, todos los componentes (trigger, acciones, condiciones, ámbitos,…) aparecen plegados para ofrecernos una visualización completa del flujo. Pero, quizá, os haya pasado como a mí, que habéis echado de meno una opción que os muestre de forma automática todos estos componentes y no tener que ir desplegando cada uno de ellos de forma manual.
Sería estupendo disponer de un botón que permitiese mostrar (expand) u ocultar (collapse) todas las acciones de nuestro flujo sin tener que ir clickando sobre cada una de ellas.

De hecho, ya hay una petición en la comunidad de Power Automate solicitando esta opción (aunque, de momento, no tiene mucha aceptación…).
Aquí os dejo el enlace por si queréis votar por ello: https://powerusers.microsoft.com/t5/Power-Automate-Ideas/Expand-Collapse-all-Actions-button/idi-p/300022

Mientras tanto, se me ocurrió retomar mis días de Developer y hacer algún proceso que hiciese esta labor utilizando JavaScript. Tengo que decir que, googleando un poco, encontré el blog de Paul Nieuwelaar que ya se le había ocurrido una idea similar: https://blog.magnetismsolutions.com/blog/paulnieuwelaar/2020/05/27/expand-collapse-all-actions-for-microsoft-power-automate-flow

Sin embargo, como a mi me gusta utilizar la librería de jQuery, seguí adelante con mi idea de crear un script que mostrarse un botón que permitiese la funcionalidad del Expand/Collapse en nuestra página de edición del flujo.

Básicamente, el script lo que hace es lo siguiente:

• Cargar la librería de jQuery de un repositorio público. (Si tenéis algún problema de bloqueo de vuestro proxy, tendréis que buscar otra ubicación, o almacenarlo en algún repositorio vuestro.)
• Cargar las funciones que recorren los componentes del flujo en base a su clase y simula el click sobre cada uno de ellos.
• Crear el botón y ubicarlo en la parte superior de la página de edición del flujo.

NOTA: Al final del post os he dejado el JavaScript minificado para que podáis agregarlo en vuestra sesión de navegador.

Ahora os muestro los pasos que tenéis que dar para lanzar este Script en vuestro navegador:

PASO 1

Abrimos el flujo de Power Automate en modo Edición y esperamos a que se muestre completamente.

PASO 2

Accedemos a las Developer Tools del navegador (normalmente con la tecla F12) y nos situamos en la pestaña de la Consola.

PASO 3

Pegamos el contenido del script (os recuerdo que está en la parte inferior de la página) y pulsamos Enter.

PASO 4

En la consola se mostrará un mensaje indicando «jQuery loaded successfully» y os aparecerá un PopUp con el texto ‘Botón Cargado Correctamente‘.

PASO 5

Ya podéis cerrar la ventana de las herramientas de desarrollador. En la parte superior derecha os aparecerá el botón para Mostrar (Expand All) todos los componentes del flujo.
Una vez expandidos, el texto del botón se cambiará para mostrar ‘Collapse All‘ que os permitirá plegar todos los componentes del flujo.

NOTA: Obviamente, al ser un script insertado en la sesión del navegador, tendréis que cargarlo cada vez que iniciéis una nueva sesión de la página.

---

Os pongo unos pantallazos para que veáis cómo se comporta:

Expand All

Collapse All

---

A continuación os dejo el código del script minificado para que ocupe menos:

!function(){var e=document.createElement("script");e.setAttribute("src","https://code.jquery.com/jquery-latest.min.js"),"undefined"==typeof jQuery&&document.getElementsByTagName("head")[0].appendChild(e),setTimeout(function(){console.log("jQquery loaded successfully.");var e=document.createElement("script");e.type="text/javascript";var a='var maxIndent=10;var btnTemplate="<button class=\'ms-Button-label\' id=\'btnExpandCollapse\'><span><i data-icon-name=\'ExpandCollapse\' aria-hidden=\'true\' class=\'ms-Icon ms-Icon--ViewListTree icon-346\'>&nbsp;&nbsp;</i><span id=\'btnExpandCollapseTxt\'>Expand All</button>";$(".fl-ActionHeading-menu").append(btnTemplate);const timer=ms=>new Promise(res=>setTimeout(res,ms));function expandWfActionBoxes()\n{var myCollapsedBoxes=$("a[class=\'msla-card-header-title-view\'][aria-expanded=\'false\']");var numBoxes=myCollapsedBoxes.length;console.log("Se han de desplegar "+numBoxes+" cajas de acciones");if(numBoxes>0)\n{myCollapsedBoxes.each(function(index,that){var myActionItem=$(that)[0];console.log($(that).text());myActionItem.click();})}else{console.log("No hay acciones que desplegar");}}\nfunction collapseWfActionBoxes()\n{var myExpandedBoxes=$("a[class=\'msla-card-header-title-view\'][aria-expanded=\'true\']");var numBoxes=myExpandedBoxes.length;console.log("Se han de colapsar "+numBoxes+" cajas de acciones");if(numBoxes>0)\n{myExpandedBoxes.each(function(index,that){var myActionItem=$(that)[0];console.log($(that).text());myActionItem.click();})}else{console.log("No hay acciones que colapsar");}}\nasync function collapseAll(){var myExpandedBoxes;var numBoxes=0;for(var i=0;i<maxIndent;i++){myExpandedBoxes=$("a[class=\'msla-card-header-title-view\'][aria-expanded=\'true\']");numBoxes=myExpandedBoxes.length;if(numBoxes>0){console.log("Collapse: "+i);collapseWfActionBoxes();await timer(1000);}else\n{console.log("No hay que cerrar más cajas.");break;}}\nalert("Collapse All finalizado.");$("#btnExpandCollapseTxt").text("Expand All");$("#btnExpandCollapse").attr(\'disabled\',false);}\nasync function expandAll(){var myCollapsedBoxes;var numBoxes=0;for(var i=0;i<maxIndent;i++){myCollapsedBoxes=$("a[class=\'msla-card-header-title-view\'][aria-expanded=\'false\']");numBoxes=myCollapsedBoxes.length;if(numBoxes>0){console.log("Expand: "+i);expandWfActionBoxes();await timer(1000);}else\n{console.log("No hay que expandir más cajas.");break;}}\nalert("Expanded All finalizado.");$("#btnExpandCollapseTxt").text("Collapse All");$("#btnExpandCollapse").attr(\'disabled\',false);}\nfunction action4All()\n{var myCollapsedBoxes=$("a[class=\'msla-card-header-title-view\'][aria-expanded=\'false\']");var numBoxes=myCollapsedBoxes.length;if(numBoxes>0){expandAll();}else{collapseAll();}}\n$("#btnExpandCollapse").bind("click",function(){$("#btnExpandCollapse").attr(\'disabled\',true);action4All();});alert(\'Botón Cargado Correctamente\');';try{e.appendChild(document.createTextNode(a)),document.body.appendChild(e)}catch(n){e.text=a,document.body.appendChild(e)}},2e3)}();

Yo lo he probado en Edge, Chrome y Firefox y ha funcionado correctamente, pero si encontráis algún problema, decídmelo en los comentarios para que pueda revisarlo.

Nada más. Con esto concluyo este post. Espero que os haya gustado y os resulte útil.

¡Muchas gracias por leerme!