Quadro Kanban

Ele KanbanBoard mostra os registros de uma tabela como cartas em faixas lado a lado, uma faixa para cada valor de uma coluna: a avaliação de uma oportunidade, o motivo do status da tarefa, a conta à qual pertence um registro. Cada faixa é lida separadamente por meio de uma visualização, página por vez, com a mesma consulta e segurança de uma grade, e mostra sua contagem e totais em seu cabeçalho. No Editable tabuleiro, uma carta se move para outra faixa arrastando-a, do teclado ou pelo menu Mover para o menu, e o movimento é salvo imediatamente; com uma coluna de classificação, as cartas também são ordenadas à mão. Ela é desenhada no tema da sua interface Fluente.

Faixas

LaneColumn (Reagir: laneColumn) nomeia a coluna da tabela da vista de onde vêm as faixas. Uma escolha indica uma faixa para cada uma de suas opções, um motivo de status para cada motivo, uma coluna Sim/Não para cada um de seus dois valores, uma consulta para cada registro nomeado, e uma data das faixas em que ela cai, conforme descreve o site Date lanes abaixo. Qualquer outra coluna mostra uma mensagem no lugar do tabuleiro. As faixas seguem a ordem do Dataverse e deixam de fora opções ocultas, e a cor de uma opção aparece como um ponto ao lado do nome da sua faixa. Uma coluna que um registro pode deixar vazia adiciona uma última faixa, (Sem valor), para as cartas sem uma.

Lanes (Reagir: lanes) escolhe quais faixas são mostradas e em que ordem, por chave: o valor de uma opção, 1 e 0 para Sim e Não, o id de um registro, ou uma chave vazia para a faixa sem valor. As faixas de uma consulta são os registros que as cartas da visualização nomeiam, lidas em uma consulta agrupada; nome-as em LookupLanes (Reagir: lookupLanes) para fixá-las e sua ordem, uma faixa sem cartas incluídas.

Uma faixa sem cartas é mostrada, então uma carta pode ser deixada nela. Defina ShowEmptyLanes (Reagir: showEmptyLanes) para false ocultá-la assim que sua contagem for conhecida. Os usuários podem colapsar uma faixa em uma faixa estreita com seu nome e contar com o botão no cabeçalho, e esconder as faixas no menu Filtro da barra de ferramentas, que as lista em Mostrar.

Faixas de encontro

Uma coluna de data mostra as faixas de quando sua data cai, contadas em dias do próprio fuso horário do usuário, com a semana começando no primeiro dia da língua dele, e calculadas novamente cada vez que o quadro lê suas faixas. Sem nenhuma nomeada, elas são Atrasadas, Hoje, Amanhã, Esta semana — do dia depois de amanhã até o fim da semana, então vazias perto do fim da semana — Próxima semana, Até Tarde e Sem data.

DateLanes(Reagir: dateLanes) nomeia as faixas em vez disso, em ordem de data. Um preset estabelece uma faixa a partir da data atual: Yesterday, Today e Tomorrow; LastWeek, ThisWeek e NextWeek; LastMonth; NextMonthThisMonth e ; os trimestres e anos do calendário, como ThisCalendarQuarter e NextCalendarYear, e os fiscais, como ThisFiscalQuarter e LastFiscalYear, que seguem o ano fiscal da organização conforme o Dataverse o mantém; Overdue, antes de hoje; Earlier e Later, que tomam o que ocorre antes e depois das faixas ao redor; e NoDate. Uma faixa sua conta dias exatos, ou dias contados dos períodos de hoje, sob um título próprio: Between, Before e Starting (Reagir: between, before e starting). Um preset também recebe um título próprio. Experimente na demonstração de datas de fechamento.

Cada carta cai em uma faixa, pois uma faixa começa não antes de onde a anterior termina: listada após ThisWeek, ThisMonth segura o restante do mês, e uma faixa que as anteriores já cobrem mostra vazia e não aceita carta. Uma data em que nenhuma faixa vale — entre duas faixas de dias exatos — coloca sua carta em nenhuma, então comece com Earlier e termine com Later para manter todas as cartas.

Uma carta movida para outra faixa de data recebe o primeiro dia dessa faixa, mantendo seu horário — uma faixa atrás de hoje também, o que lhe dá uma data passada — e movida para Sem data, perde sua data. Uma faixa sem um primeiro dia, como Atrasado, um primeiro Antes ou uma faixa vazia, não aceita carta. Defina DateLaneDrop (Reaja ) dateLaneDrope None as faixas não recebem cartas umas das outras: elas só aparecem quando cartas caem.

DateLaneOrder (Reagir: dateLaneOrder) ordena as cartas de uma lane de data. Rank , o padrão, ordena pela coluna de valor, como todas as outras lane: uma carta movida dentro de sua lane muda seu valor sozinha. Date ordena por data, sem coluna de valor: uma carta caída abaixo de outra fica no dia daquela carta, mantendo seu próprio tempo, e uma caída no topo fica no primeiro dia da lane; cartas do mesmo dia permanecem na ordem dos tempos. Tente na demo de datas de vencimento.

Contagens e totais

O cabeçalho de cada faixa mostra quantas cartas ela possui — 5000+ além de 5.000 — e os totais nomeados em LaneAggregates (Reagir: laneAggregates): a soma, média, menor ou maior parte de um número, coluna de dinheiro ou data, ou uma contagem de qualquer coluna, sobre cada carta da faixa, não apenas aquelas carregadas. LaneAggregateFormats (Reagir: laneAggregateFormats) dá um formato para as figuras de cada coluna, como C0 ou N1. Esses são os totais com que o tabuleiro começa: o botão Totais permite que os usuários escolham suas próprias colunas que as cartas mostram, e uma visualização salva as mantém. Contagens e totais são lidos novamente após cada movimento salvo pelo tabuleiro.

Limites das faixas

LaneLimits (Reagir: laneLimits) dá às rotas, por chave, o maior número de cartas que elas devem ter. O cabeçalho de uma rota limitada mostra sua contagem contra o limite, como 7/5, marcada após a contagem passar. A contagem é de todas as cartas da rota, o que o usuário procurar ou filtrar. Um limite só avisa a menos que EnforceLaneLimits (Reagir: enforceLaneLimits) seja definido: aí uma rota cheia não pega nenhuma carta de outra, não é oferecida em Mover para e não tem botão Adicionar. É regra do tabuleiro, não do servidor: mantenha um limite para cada forma como um registro é salvo com um interceptor.

Cartas

Uma carta mostra a primeira coluna da vista como seu título e as outras colunas da vista sob seus títulos, como as cartas da grade, deixando de fora a coluna da faixa e a coluna de rank. CardImageColumn (Reagir: cardImageColumn) adiciona uma coluna de imagem como avatar ao lado do título. Cada faixa carrega PageSize (Reagir: pageSize) cartas por vez, 20 por padrão, com Carregar mais em seu base. Nas Configurações, os usuários mudam os campos que as cartas mostram, como as cartas de uma faixa são ordenadas e quantas cada faixa carrega.

Desenhe as cartas do seu jeito com CardTemplate (Reagir: cardRenderer). Ele recebe o registro e a lane de cada carta; Field , Label e DisplayValue (Reagir: field, label e displayValue) mostram uma coluna como a carta padrão, e OpenAsync e MoveToAsync (Reagir: open e moveTo) abrir o registro e mover a carta, onde CanOpen e CanMove digam que podem. Um clique no cartão ainda abre seu registro, e seu menu Mover para o Movimento fica ao lado do seu conteúdo. As colunas que um modelo mostra devem ser as da visualização, então o quadro as lê com cada carta.

Quando a tabela do tabuleiro tem uma página registrada para seus registros (veja Páginas de Registro) e o tabuleiro não Form tem (Reagir: form), o título de uma carta faz link para ela, e abrir a carta vai para lá; ShowRecordLinks (Reagir: showRecordLinks) desativa isso. Caso contrário, clicar em uma carta abre seu registro em um diálogo no centro ou, com FormLocation (Reagir: formLocation), em um painel lateral à esquerda ou à direita. A forma é KanbanDefaultForm — as colunas da vista da tabela do tabuleiro e da coluna da faixa, cada uma com o editor que seu tipo ocupa — ou seu próprio componente de editores em Form (Reagir: form). O registro é lido como uma página de registro o lê, através do mesmo acesso à tabela e segurança da coluna, e só pode ser alterado em um Editable quadro, por um usuário que pode alterá-lo.

Cartas móveis

Em um Editable tabuleiro (React: editable), os usuários movem uma carta para outra faixa arrastando-a, do teclado ou pelo menu Mover para o menu da carta. A carta se move de uma vez, e o tabuleiro salva o que mudou: a coluna da rota — por um motivo de status, apenas o motivo, já que o servidor move o estado do registro junto com ela — e o valor da carta, onde o tabuleiro mantém uma. Um save que falha coloca a carta de volta e diz isso.

Uma carta só se move onde o usuário pode alterá-la: Escreva em seu registro, através do acesso à tabela do portal e na coluna de faixa, que deve ser uma que uma atualização pode configurar e essa coluna que a segurança não retenha. Colocar cartas em ordem também precisa Escrever na coluna de rank. Uma carta que o usuário não pode mover permanece onde está, sem Mover para o menu.

As faixas de razão de status seguem seus estados e as mudanças de estado que a tabela permite, com as quais o servidor se AddStateTransitions registra (veja RecordContext). Oportunidades, casos, cotações e ordens as têm por padrão: uma carta não é tomada por uma faixa que seu registro não pode alcançar a partir de si mesmo, e o Move to lista apenas as rotas que pode. Uma mudança de status feita por uma atualização — uma oportunidade reaberta, um caso cancelado ou reativado, uma cotação ativada, uma ordem enviada — pede ao usuário que confirme primeiro, e uma ação própria do Dataverse abre o diálogo de fechar, como os registros de fechamento abaixo descrevem. As cartas de status fechado não são colocadas em outra ordem entre si. Uma tabela sem transições se move livremente: uma tarefa movida para Concluído é concluída e movida de volta, aberta novamente.

Adição de cartas

O cabeçalho de cada faixa em um Editable quadro possui um botão Adicionar que abre um novo registro já naquela faixa, na forma do quadro: o ( Form Reagir: form) ou KanbanDefaultForm. Ele mostra apenas para os usuários que podem criar os registros da tabela e definir sua coluna de faixa, e nunca em uma faixa de registros fechados, pois um registro é criado aberto. Uma vez salvo, o cartão aparece no topo de sua faixa. Desligue-o com AllowNew (Reagir: allowNew). Handle PrepareNewRecord (React: prepareNewRecord) para dar mais valores ao novo registro antes de sua forma abrir: ele recebe o registro, o valor da faixa já nele e a faixa. Um botão de barra de ferramentas também pode adicionar uma carta: CanCreate e NewAsync no KanbanBoardContext (React: canCreate e newCard) digam se uma lane pega uma nova carta e abre sua forma — sem nenhuma lane nomeada, na primeira que aceita uma.

Registros de encerramento

Em um quadro por razão de status, uma carta dropada em uma faixa na qual o Dataverse fecha registros com uma ação própria — Ganho ou Perdido de uma oportunidade, Resolvido de um caso, Ganho ou Fechado de uma cotação, Cumprido ou Cancelado de uma ordem — abre uma caixa de diálogo com o motivo de status, a faixa inicial e o que o fechamento registra: a receita real e a data de fechamento de uma oportunidade ganha; a data de fechamento de uma perdida, e o concorrente para o qual foi perdida onde o usuário pode escolher concorrentes; a resolução e o tempo faturável de um caso; a data de fechamento de uma cotação ou uma ordem; e uma descrição. Confirmado, o registro é fechado por meio da própria mensagem do Dataverse, como WinOpportunity ou CloseIncident; cancelado, o cartão volta para trás. Arrastado de volta para uma faixa aberta, uma oportunidade é reaberta e um caso reativado assim que o usuário confirma. Tente na demo do Pipeline. O mesmo diálogo está atrás dos botões de fechar no formulário de um registro, como WinOpportunityButton: veja RecordContext.

Um fechamento é julgado como uma alteração do status do registro: o usuário deve poder alterar o registro e suas colunas de status, além de apontar para o concorrente que nomear. O Dataverse arquiva o fechamento sob o registro como uma atividade própria (opportunityclose, incidentresolution, quoteclose, orderclose), que não precisa de acesso à tabela sua. O usuário da aplicação do portal precisa de AppendTo na tabela do registro, Criar e Anexar nas atividades, e para uma oportunidade AppendTo em concorrentes: veja Dataverse Connection.

Colocando as cartas em ordem

Nomeie uma RankColumn (Reagir: rankColumn) e os usuários colocam as cartas de cada faixa em ordem manualmente. Uma faixa é ordenada pelo valor, depois pela ordenação da vista, e uma carta caída entre duas outras recebe um valor entre as deles. Normalmente, esse valor é tudo o que um drop escreve. Cartas sem valor se classificam primeiro, e são ranqueadas por turno quando uma carta é largada entre elas ou logo abaixo delas; uma faixa cujos valores não têm espaço entre duas cartas é classificada de novo, na ordem em que mostra. Essas posições são salvas com o movimento, em uma única transação. Uma faixa com mais de 5.000 cartas não pode ser ordenada manualmente, nem uma carta pode ser descartada onde ela colocaria uma que o usuário não pode mudar. Sem uma coluna de classificação, uma faixa segue a ordem da visualização, e uma carta se move apenas para outra faixa.

A coluna de valor é uma coluna decimal da tabela do tabuleiro cujo alcance permite números negativos, já que uma carta caída acima da primeira está classificada abaixo dela. Sua precisão determina com que frequência uma rota é classificada de novo: cartas começam com um milhão de diferença, e cada queda entre duas metades divide a sala entre elas, então uma coluna de dez casas decimais precisa de cerca de cinquenta quedas em um lugar antes de sua faixa ser classificada novamente, e uma de nenhuma cerca de vinte.

Salvando movimentos você mesmo

Handle SaveChange (Reagir: onCardMove) para salvar um movimento do seu jeito, no lugar do tabuleiro: por meio de um serviço seu, após pedir ao usuário, ou não fazer nada. Recebe um KanbanCardMove: as cartas Recordda carta , as rotas em que ela veio From e saiu To, está Index lá e é Rank, o Update tabuleiro escreveria, e o OtherUpdates que pertence à mesma transação, escrito depois dela — os valores de outras cartas, ou, para uma carta que sai de uma faixa fechada, seu próprio valor quando seu status a reabriu — e, para uma carta caída em uma faixa que a fecha, o Close (Reagir: close) o usuário confirmou, para enviar depois dele. Volte true para manter a carta onde foi deixada, ou false para colocá-la de volta. O quadro não lê nada novamente após um movimento que não salvou, então uma página pode manter um movimento apenas na página.

Leitores de teclado, toque e tela

Cada carta que pode se mover tem um ... botão com um menu Mover para as pistas para onde pode ir, que funciona da mesma forma pelo teclado, por toque e com leitor de tela. Uma carta também pode ser movida diretamente do teclado: foque-a, pressione Espaço para pegar, as setas para levá-la para outra faixa ou outro lugar em si mesma, e Espaço novamente para colocá-la. Em uma tela sensível ao toque, uma carta é arrastada pela empunhadura, então as faixas ainda rolam sob um dedo. Os leitores de tela ouvem cada movimento — Carta movida para Faixa — e um movimento que falha.

Barra de Ferramentas

A barra de ferramentas é organizada como uma grade: o seletor de visualização à esquerda — ou o Title (React: title), quando há apenas uma visualização — e à direita seus próprios controles, Totais, a caixa de busca, Filtro, Atualizar e Configurações. Adicione seus controles com ToolbarItems (React: os filhos do tabuleiro). A KanbanBoardButton recebe o quadro ao clicar: sua tabela, a visão que mostra, suas faixas em ordem e RefreshAsync (React: refresh) para ler todas as faixas novamente.

Visualizações, busca e filtros

Um quadro mostra os registros de uma visualização — uma do Dataverse ou uma que a página define — e sua tabela é a da visualização. DefaultViewId (Reagir: defaultViewId) é a visualização em que ela se abre, e ViewIds (Reagir: viewIds) as outras que o seletor de visualização oferece, da mesma tabela. A caixa de busca encontra cartas enquanto a busca de uma grade encontra linhas: desde o início do valor de uma coluna de busca, ou em qualquer lugar após um início *. Ela olha nas colunas que as cartas mostram, nomeia-as em sua dica de ferramenta e marca as correspondências nas cartas. Desligue com AllowSearch (Reagir: allowSearch).

Com AllowFiltering (Reagir: allowFiltering), o menu Filtro da barra de ferramentas oferece filtros de Editar, o botão de Filtro da grade de diálogo se abre, cujos filtros substituem os da visualização até que o usuário escolha outra visualização. Ele está desativado por padrão, porque o usuário pode remover todos os filtros que a visualização possui.

Com (Reagir: allowSavedViews), um usuário logado pode salvar o tabuleiro como organizou — a visualização com seus filtros, os campos e ordenação das cartas, os totais das faixas, as cartas que AllowSavedViews cada faixa carrega e as faixas colapsadas ou ocultas — como uma visualização própria, e escolher a visualização padrão e esconder as que não usar, no menu Filtro. Sem um SavedViewsKey (Reagir: savedViewsKey), um tabuleiro compartilha suas visualizações com as grades, calendários e tabuleiros da sua mesa que não têm nenhuma, cada um mantendo seu próprio layout delas. Como as visualizações são salvas, alteradas e compartilhadas está na página de Visualizações Salvas.

Uma página pode definir suas próprias visualizações em código com CustomViewDefinitions (React: customViewDefinitions), as definições de visualização da grade. Elas são oferecidas no seletor ao lado ViewIds sem estarem listadas lá, DefaultViewId pode nomear uma, e um tabuleiro pode ter apenas essas imagens. Cada uma é lida por seu próprio FetchXML, dentro do acesso à tabela do usuário, e dispõe o tabuleiro como diz: são PageSize as cartas que uma lane carrega, as Hidden de uma coluna e DisplayLabel esconder ou renomear seu campo de cartas, e são Aggregates os totais das lanes. Construa a lista uma vez, em um campo: uma nova lista inicia o tabuleiro novamente.

Mantendo seu lugar na URL

Nomeie um parâmetro de consulta em PersistedStateQueryParameter (React: persistedStateQueryParameter), e o quadro mantém a visualização escolhida e as faixas colapsadas ali, então uma recarga ou um link compartilhado abre como foi deixado. O que ele abriria de qualquer forma fica de fora. A busca também é mantida com IncludeSearchInPersistedState; ela é omitida por padrão, já que o que os usuários procuram pode ser sensível. Cada alteração substitui a entrada do histórico do navegador, e ambas as pilhas escrevem o mesmo valor, então um link feito em uma abre o mesmo quadro na outra.

Temática

O tabuleiro é desenhado com os próprios controles e tokens de design do Fluent UI, então segue seu tema, claro ou escuro, e sua cor de destaque, e o ponto de uma faixa pega a cor da opção do Dataverse. As pistas têm 280 pixels de largura, lado a lado, e rolam lateralmente quando não encaixam; no celular, cada uma ocupa a maior parte da tela e encaixa no lugar. Height (React: height) define a altura do tabuleiro, barra de ferramentas incluída — 600 pixels por padrão — e cada lane rola suas cartas dentro dele. Para restyling, o tabuleiro, suas faixas e suas cartas carregam classes próprias, entre ppp-kanbanelas , ppp-kanban-lane, ppp-kanban-lane-header e ppp-kanban-card; Class e Style (React: className e style) adicionam as suas próprias.