Saltar al contenido

Cómo usar el widget de organigrama en Jitterbit App Builder

Descripción general

El widget de organigrama representa datos jerárquicos, como una estructura de reportes, como un organigrama interactivo en una página de App Builder. El widget en sí no almacena datos: llama a un endpoint REST que expones (su parámetro jsonURL) usando una clave API que generas, y representa cualquier JSON jerárquico que ese endpoint devuelva.

Nota

El widget de organigrama está disponible en la biblioteca de descargas de widgets.

Orgchartexample

Los pasos son:

Configurar App Builder como una API

Antes de que el widget pueda mostrar algo, necesita un endpoint REST al que llamar para obtener datos. Para exponer tus datos de organigrama a través de la API REST de App Builder, sigue los pasos en Publicar una aplicación de Jitterbit App Builder como un endpoint de API REST:

  1. Configura un proveedor de seguridad con clave API. Por ejemplo, nómbralo OrgChartAPI.

  2. Configura un endpoint para tu aplicación. Por ejemplo, usa charts como el valor de Endpoint.

  3. Publica un recurso para la tabla u objeto que contiene tus datos de organigrama. Por ejemplo, usa roster como el valor de Endpoint del recurso.

    Al configurar los campos del recurso, desmarca Incluir por defecto para cualquier columna no requerida para el organigrama, y establece GET Max Limit si es necesario, dependiendo del número de niveles en tu organigrama.

  4. Configura claves API para usuarios para cualquiera que necesite acceder a estos datos.

Configurar el widget de organigrama

Con tus datos expuestos como un endpoint REST, instala el widget en sí y apúntalo a ese endpoint:

  1. Carga el widget de organigrama a App Builder, en una colección a la que tenga acceso la aplicación con la que deseas trabajar.

  2. Configura los parámetros requeridos por el widget, tal como se enumeran en la biblioteca de descargas de widgets. Los valores ingresados distinguen entre mayúsculas y minúsculas. El valor jsonURL sigue la convención de URI de API REST: combina la URL base de la API REST de tu instancia con el Endpoint de tu aplicación y el Endpoint del recurso. Por ejemplo, https://localhost/rest/v1/charts/roster.

Opcionalmente, puedes personalizar los colores del organigrama editando los archivos CSS incluidos en el archivo .zip del widget:

  • Los colores de etiqueta y borde se establecen en \Css\vinyl.orgchart.css, usando valores hexadecimales.

  • Los colores de línea y desplazamiento se establecen en \Css\jquery.orgchart.css, usando valores RGB.

Agregar el widget a una página de App Builder

Finalmente, incrusta el widget configurado en una página y asegúrate de que tenga acceso a la clave API y al valor jsonURL que necesita para llamar a tu endpoint:

  1. Navega a la página de la aplicación donde deseas mostrar el widget y agrega un panel de Una sola fila que siempre devuelva un registro. Por ejemplo, usa la tabla Param o User.

  2. Agrega un control de Texto al panel, luego agrega el widget de organigrama a ese control.

  3. Si el organigrama no se muestra, la fuente de datos del panel puede no estar proporcionando los valores requeridos del widget. Opcionalmente:

  4. Configura la fuente de datos que utiliza el panel para que tenga un registro que devuelva la clave de API y la jsonURL que utiliza el organigrama.

  5. Agrega dos controles de Texto ocultos al panel, asignados a la clave de API y a la jsonURL. Puedes almacenar estos valores en una tabla de Param, por ejemplo.