Tablero Kanban

Muestra KanbanBoard los registros de una tabla como cartas en carriles lado a lado, un carril por cada valor de una columna: la calificación de una oportunidad, el motivo del estado de una tarea, la cuenta a la que pertenece un registro. Cada carril se lee por sí solo a través de una vista, página a página, con la misma consulta y seguridad que una cuadrícula, y muestra su recuento y totales en su cabecera. En un Editable tablero, una carta se mueve a otro carril arrastrándola, desde el teclado o a través de su menú Mover al menú, y el movimiento se guarda de inmediato; con una columna de rango, las cartas también se colocan en orden a mano. Se dibuja en tu tema de interfaz fluida.

Calles

LaneColumn (React: laneColumn) nombra la columna de la tabla de la vista de donde provienen los carriles. Una opción da un carril para cada una de sus opciones, una razón de estado para cada motivo, una columna de Sí/No, una para cada uno de sus dos valores, una para cada registro que nombre y una fecha para los carriles en los que cae, tal como describe el nombre de los carriles de fecha . Cualquier otra columna muestra un mensaje en lugar del tablero. Los carriles siguen el orden de Dataverse y dejan fuera las opciones ocultas, y el color de una opción aparece como un punto junto al nombre de su carril. Una columna que un registro puede dejar vacía añade un último carril, (Sin valor), para las cartas que no lo tienen.

Lanes (React: lanes) elige qué carriles se muestran, y en qué orden, por clave: el valor de una opción, 1 y 0 para Sí y No, el id de un registro, o una clave vacía para el carril sin valor. Los carriles de una consulta son los registros que nombran las cartas de la vista, leídos en una consulta agrupada; nómbralos en LookupLanes (React: lookupLanes) en su lugar para fijarlos y su orden, un carril sin cartas incluidas.

Se muestra un carril sin cartas, por lo que se puede dejar caer una carta en él. Configura ShowEmptyLanes (Reaccionar: showEmptyLanes) para false ocultarlo una vez que se conozca su recuento. Los usuarios pueden derrubar un carril en una franja estrecha con su nombre y contar con el botón en el encabezado, y ocultar los carriles desde el menú de Filtro de la barra de herramientas, que los lista bajo Mostrar.

Calles de fechas

Una columna de fecha muestra los carriles de cuándo cae su fecha, contados en días de la propia zona horaria del usuario, con la semana comenzando en el primer día de su idioma, y se calculan de nuevo cada vez que el tablero lee sus carriles. Sin ningún nombre, son Atrasados, Hoy, Mañana, Esta semana — desde pasado mañana hasta el final de la semana, así que vacíos cerca del final de la semana — Semana siguiente, Más tarde y Sin fecha.

DateLanes (Reaccionar: dateLanes) nombra los carriles en su lugar, en orden de fecha. Un presajuste establece un carril desde la fecha actual: Yesterday, Today y Tomorrow; LastWeek, ThisWeek y NextWeek; LastMonth, ThisMonth y NextMonth; los trimestres y años del calendario, como ThisCalendarQuarter y NextCalendarYear, y los fiscales, como ThisFiscalQuarter y LastFiscalYear, que siguen al año fiscal de la organización según lo mantenga Dataverse; Overdue, antes de hoy; Earlier y Later, que toman lo que ocurra antes y después de los carriles que los rodean; y NoDate. Un carril propio tiene los días exactos, o días contados de los periodos de hoy, bajo un título propio: Between, Before y Starting (React: between, before y starting). Un preset también toma un título propio. Pruébalo en la demo de fechas de cierre.

Cada carta cae en un carril, ya que un carril no comienza antes de donde termina el anterior: listado después ThisWeekde , ThisMonth se mantiene el resto del mes, y un carril que los anteriores ya cubren muestra vacío y no acepta carta. Una fecha que no tiene carril — entre dos carriles de días exactos — pone su carta en ninguno, así que empieza con Earlier y termina con Later para conservar todas las cartas.

Una carta movida a otro carril de fecha recibe el primer día de ese carril, manteniendo su hora del día — un carril por detrás también hoy, lo que le da una fecha pasada — y si se mueve a Sin fecha, pierde su fecha. Un carril sin un primer día, como Atrasado, un primer Antes o un carril vacío, no acepta carta. Establece DateLaneDrop (Reaccionar: dateLaneDrop) en None y los carriles no toman cartas entre sí: solo aparecen cuando caen cartas.

DateLaneOrder (Reaccionar: dateLaneOrder) ordena las cartas de una fecha de carril. Rank , el valor por defecto, las ordena por la columna de rango, como en cualquier otro carril: una carta movida dentro de su carril cambia solo su valor. Date las ordena por la fecha en su lugar, sin columna de rango: una carta caída por debajo de otra toma el día de esa carta, manteniendo su propio tiempo, y una que cae arriba toma el primer día de la línea; las cartas del mismo día se mantienen en el orden de sus tiempos. Pruébalo en la demo de fechas de vencimiento.

Conteos y totales

El encabezado de cada carril muestra cuántas cartas contiene — 5000+ pasadas de 5.000 — y los totales nombrados en LaneAggregates (React: laneAggregates): la suma, media, menor o mayor de un número, columna de dinero o fecha, o un conteo de cualquier columna, sobre cada carta del carril, no solo las cargadas. LaneAggregateFormats (React: laneAggregateFormats) da a las cifras de cada columna un formato, como C0 o N1. Estos son los totales con los que empieza el tablero: el botón Totales permite a los usuarios elegir la suya propia de las columnas que muestran las cartas, y una vista guardada los conserva. Los conteos y totales se leen de nuevo después de cada movimiento guardado por el tablero.

Límites de carriles

LaneLimits (React: laneLimits) da a las líneas, por clave, la mayor cantidad de cartas que deberían tener. El encabezado de una línea limitada muestra su cuenta contra su límite, como 7/5, marcada una vez que la cuenta la supera. La cuenta corresponde a todas las cartas de la línea, las que el usuario busque o filtre. Un límite solo advierte a menos que EnforceLaneLimits se establezca (React: enforceLaneLimits) : entonces una línea completa no toma ninguna carta de otra, no se ofrece bajo Mover a y no tiene botón de Añadir. Es la regla del tablero, no del servidor: mantener un límite para cada forma en que un registro se guarda con un interceptor.

Cartas

Una carta muestra la primera columna de la vista como título y las otras columnas de la vista bajo sus títulos, como hacen las cartas de una cuadrícula, omitiendo la columna de carril y la columna de rango. CardImageColumn (Reaccionar: cardImageColumn) añade una columna de imagen como avatar junto al título. Cada carril carga PageSize (Reaccionar: pageSize) cartas a la vez, 20 por defecto, con Cargar más en su pie. Desde Configuración, los usuarios cambian los campos que muestran las cartas, cómo se ordenan las cartas de un carril y cuántas carga cada carril.

Dibuja las cartas a tu manera con CardTemplate (React: cardRenderer). Se le entregan el registro y el carril de cada carta; Field , Label y DisplayValue (React: field, label y displayValue) muestran una columna como la carta por defecto, y OpenAsync y MoveToAsync (React: open y moveTo) abren el registro y mueven la carta, donde CanOpen y CanMove digan que pueden. Un clic en la carta aún abre su registro, y su menú Mover a la carta está junto a tu contenido. Las columnas que muestra una plantilla deben ser las de la vista, así que el tablero las lee con cada carta.

Cuando la tabla del tablero tiene una página registrada para sus registros (véase Páginas de registros) y el tablero no Form tiene (Reaccionar: form), el título de una carta enlaza con ella, y abrir la carta va allí; ShowRecordLinks (Reaccionar: showRecordLinks) desactiva eso. De lo contrario, al hacer clic en una tarjeta se abre su registro en un diálogo en el centro o, con FormLocation (Reaccionar: formLocation), en un panel lateral a la izquierda o derecha. La forma es KanbanDefaultForm — las columnas de la vista de la tabla del tablero y la columna de carril, cada una con el editor que ocupa su tipo — o tu propio componente de editores en Form (React: form). El registro se lee como lo lee una página de registro, a través del mismo acceso a la tabla y seguridad de columnas, y solo puede cambiarse en un Editable tablero, por un usuario que pueda cambiarlo.

Moviendo cartas

En un Editable tablero (React: editable), los usuarios mueven una carta a otro carril arrastrándola, desde el teclado o a través del menú Mover a la carta. La carta se mueve a la vez, y el tablero guarda lo que ha cambiado: la columna de la línea — por una razón de estado, solo la razón, ya que el servidor mueve el estado del registro con ella — y el rango de la carta, donde el tablero mantiene una. Una partida guardada que falla devuelve la carta y lo indica.

Una carta solo se mueve donde el usuario puede cambiarla: Escribe en su registro, a través del acceso a la tabla del portal y en su columna de carril, que debe ser una que una actualización pueda establecer y que la seguridad no retenga esa columna. Poner las cartas en orden también requiere Escribir en la columna de rango. Una carta que el usuario no puede mover permanece donde está, sin el menú Mover a Mover.

Las líneas de la razón de estado siguen sus estados y los cambios de estado que permite la tabla, con los que el servidor se AddStateTransitions registra (véase RecordContext). Las oportunidades, casos, citas y órdenes las tienen por defecto: una carta no es tomada por una línea que su registro no puede alcanzar desde la suya propia, y Mover a lista solo las líneas que puede. Un cambio de estado que hace una actualización — una oportunidad reabierta, un caso cancelado o reactivado, una cotización activada, una orden enviada — pide al usuario que lo confirme primero, y una acción propia de Dataverse abre el cuadro de cierre, como describe los registros de cierre a continuación. Las cartas de un estado cerrado no se colocan en otro orden entre ellas. Una tabla sin transiciones se mueve libremente: una tarea movida a Completada se completa, y se vuelve a abrir.

Añadir cartas

El encabezado de cada carril en un Editable tablero tiene un botón de Añadir que abre un nuevo registro que ya está en ese carril, en la forma del tablero: el de Form la página (React: form) o KanbanDefaultForm. Solo se muestra a los usuarios que pueden crear los registros de la tabla y establecer su columna de carril, y nunca en un carril de registros cerrados, ya que se crea un registro abierto. Una vez guardado, la carta aparece en la parte superior de su carril. Apágalo con AllowNew (React: allowNew). Handle PrepareNewRecord (React: prepareNewRecord) para dar más valores al nuevo registro antes de que se abra su formulario: se le asigna el registro, el valor del carril que ya está en él y el carril. Un botón de barra de herramientas también puede añadir una carta: CanCreate y NewAsync en ( KanbanBoardContext React: canCreate y newCard) decir si un carril toma una nueva carta y abre su forma — sin ningún carril nombrado, en el primero que toma una.

Registros de cierre

En un tablero por razón de estado, una carta que se deja caer en un carril en el que Dataverse cierra registros con una acción propia — Ganado o Perdido de una oportunidad, Resuelto de un caso, Ganado o Cerrado de una cotización, Cumplido o Cancelado de una orden — abre un diálogo con la razón de estado, el carril de inicio y lo que registra el cierre: el ingreso real y la fecha de cierre de una oportunidad ganada; la fecha de cierre de una perdida y el competidor al que se perdió donde el usuario puede elegir competidores; la resolución y el tiempo facturable de un caso; la fecha de cierre de una cotización o un pedido; y una descripción. Confirmado, el registro se cierra mediante el propio mensaje de Dataverse, como WinOpportunity o CloseIncident; cancelado, la tarjeta vuelve a aparecer. Arrastrada de vuelta a un carril abierto, se reabre una oportunidad y se reactiva un caso una vez que el usuario confirma. Pruébalo en la demo de Pipeline. El mismo diálogo está detrás de los botones de cierre en el formulario de un registro, como WinOpportunityButton: véase RecordContext.

Un cierre se considera un cambio en el estado del registro: el usuario debe poder cambiar el registro y sus columnas de estado, y señalar al competidor que nombra. Dataverse archiva el cierre bajo el registro como una actividad propia (opportunityclose, incidentresolution, quoteclose, orderclose), que no necesita acceso a la tabla tuya. El usuario de la aplicación del portal necesita AppendTo en la tabla del registro, Crear y Añadir en actividades, y para una oportunidad AppendTo en competidores: véase Dataverse Connection.

Poner las cartas en orden

Nombra un RankColumn (Reaccionar: rankColumn) y los usuarios colocan las cartas de cada carril en orden por mano. Un carril se ordena por rango, luego por el orden de la vista, y una carta que cae entre dos otras recibe un rango entre los suyos. Normalmente ese rango es todo lo que escribe un drop. Las cartas sin rango ordenan primero, y se clasifican por turno cuando una carta se deja caer entre ellas o justo por debajo; un carril cuyos rangos no tienen espacio entre dos cartas se clasifica de nuevo, en el orden que muestra. Esos rangos se guardan con el movimiento, en una sola transacción. Un carril de más de 5.000 cartas no puede ordenarse a mano, ni se puede dejar caer una carta donde el usuario no puede cambiar una carta. Sin una columna de rango, un carril sigue el orden de la vista, y una carta solo se mueve a otro carril.

La columna de rango es una columna decimal de la tabla del tablero cuyo rango permite números negativos, ya que una carta caída por encima de la primera está clasificada por debajo. Su precisión decide con qué frecuencia se ordena un carril: las cartas empiezan con un millón de diferencias, y cada caída entre dos mitades divide la sala entre ellas, así que una columna de diez decimales necesita unas cincuenta caídas en un lugar antes de que su carril vuelva a estar clasificado, y una de ninguna alrededor de veinte.

Ahorrando movimientos tú mismo

Maneja SaveChange (Reaccionar: onCardMove) para guardar un movimiento a tu manera, en lugar del tablero: a través de un servicio propio, tras pedir al usuario, o no hacerlo en absoluto. Se le da KanbanCardMoveun : las cartas Record, los carriles en los que entró From y se Tofue , está Index ahí y su Rank, el Update que el tablero escribiría, y el OtherUpdates que pertenece a la misma transacción, escrito después — los rangos de otras cartas, o, para una carta que sale de un carril cerrado, su propio rango una vez que su estado la ha reabierto — y, para una carta caída en un carril que la cierra, el Close (Reaccionar: close) que el usuario confirmó, para enviarla después. Vuelve true para mantener la carta donde se dejó caer, o false para devolverla. El tablero no lee nada después de un movimiento que no guardó, así que una página puede conservar un movimiento solo en la página.

Lectores de teclado, táctil y pantalla

Cada carta que puede moverse tiene un ... botón con un menú de Mover a los carriles a los que puede ir, que funciona igual desde el teclado, por tacto y con un lector de pantalla. Una carta también puede moverse directamente desde el teclado: enfocarla, pulsar Espacio para recogerla, las flechas para llevarla a otro carril u otro lugar en su lugar, y Espacio de nuevo para dejarla. En una pantalla táctil, una carta se arrastra por su agarre, así que los carriles siguen desplazarse bajo un dedo. Los lectores de pantalla escuchan cada movimiento — la carta movida a la línea — y un movimiento que falla.

Barra de herramientas

La barra de herramientas está distribuida como la de una cuadrícula: el selector de vistas a la izquierda — o el Title (React: title), cuando solo hay una vista — y a la derecha tus propios controles, Totales, el cuadro de búsqueda, Filtro, Actualizar y Ajustes. Añade tus controles con ToolbarItems (React: los hijos del tablero). A KanbanBoardButton recibe el tablero al hacer clic: su tabla, la vista que muestra, sus carriles en su orden, y RefreshAsync (React: refresh) para leer cada carril de nuevo.

Vistas, búsqueda y filtros

Un tablero muestra los registros de una vista — una de Dataverse o una que define la página — y su tabla es la de la vista. DefaultViewId (React: defaultViewId) es la vista en la que se abre, y ViewIds (React: viewIds) las otras que ofrece el selector de vistas, de la misma tabla. El cuadro de búsqueda encuentra cartas mientras la búsqueda de una cuadrícula encuentra filas: desde el inicio del valor de una columna de búsqueda, o desde cualquier lugar después de un inicio *. Mira en las columnas que muestran las cartas, las nombra en su tooltip y marca las coincidencias en las cartas. Desactivarlo con AllowSearch (React: allowSearch).

Con AllowFiltering (Reaccionar: allowFiltering), el menú de Filtro de la barra de herramientas ofrece filtros de Edición, el diálogo se abre el botón de Filtro de una cuadrícula, cuyos filtros sustituyen a los de la vista hasta que el usuario elige otra vista. Está desactivado por defecto, porque el usuario puede eliminar todos los filtros que tenga la vista.

Con (React: allowSavedViews), un usuario iniciado sesión puede guardar el tablero tal como lo ha organizado — la vista con sus filtros, los campos y ordenación de las cartas, los totales de los carriles, las cartas que AllowSavedViews carga cada carril y los carriles plegados o ocultos — como una vista propia, y elegir su vista predeterminada y ocultar las que no utilize, desde el menú de Filtros. Sin un SavedViewsKey (React: savedViewsKey), un tablero comparte sus vistas con las cuadrículas, calendarios y tableros de su tabla que no tienen ninguna, cada uno manteniendo su propio diseño. Cómo se guardan, cambian y comparten las vistas está en la página de Vistas guardadas.

Una página puede definir vistas propias en código con CustomViewDefinitions (React: customViewDefinitions), las definiciones de vistas de la cuadrícula. Se ofrecen en el selector de al lado ViewIds sin estar listadas allí, DefaultViewId pueden nombrar una, y un tablero puede tenerlas únicamente. Cada una se lee con su propio FetchXML, dentro del acceso a la tabla del usuario, y dispara el tablero como dice: son PageSize las cartas que carga un carril, las de una columna Hidden y DisplayLabel ocultan o renombran su campo de cartas, y son Aggregates los totales de los carriles. Construye la lista una vez, en un campo: una nueva lista inicia el tablero de nuevo.

Mantener su lugar en la URL

Nombra un parámetro de consulta en PersistedStateQueryParameter (React: persistedStateQueryParameter), y el tablero mantiene la vista seleccionada y los carriles colapsados ahí, así que una recarga o un enlace compartido lo abre tal como se dejó. En qué se abriría de todos modos se omite. La búsqueda también se mantiene con IncludeSearchInPersistedState; se omite por defecto, ya que lo que buscan los usuarios puede ser sensible. Cada cambio reemplaza la entrada de historial del navegador, y ambas pilas escriben el mismo valor, así que un enlace hecho en uno abre el mismo tablero en el otro.

Temática

El tablero está dibujado con los controles y fichas de diseño propias de Fluent UI, por lo que sigue tu tema, claro o oscuro, y tu color de acento, y el punto de un carril toma el color de su opción de Dataverse. Los carriles tienen 280 píxeles de ancho, uno al lado del otro, y se desplazan lateralmente cuando no encajan; en un teléfono, cada uno ocupa la mayor parte de la pantalla y encajan en su sitio. Height (React: height) establece la altura del tablero, incluida la barra de herramientas — 600 píxeles por defecto — y cada carril desplaza sus cartas dentro de él. Para rediseñarlo, el tablero, sus carriles y sus cartas llevan sus propias clases, entre ellas ppp-kanban, ppp-kanban-lane, ppp-kanban-lane-header y ppp-kanban-card; Class y Style (React: className y style) añaden las tuyas propias.