Páginas do Assistente no Jitterbit App Builder

O layout Assistente é uma das opções de layout de página disponíveis no App Builder. Em uma página que utiliza o layout Assistente, o App Builder exibe cada painel como um passo separado, com botões Anterior, Próximo e Concluir para navegar entre eles. Esta página descreve como configurar uma página Assistente, usar seus recursos de navegação integrados e personalizar seus botões de navegação.

Em uma página Assistente, clicar em qualquer campo torna todos os campos editáveis nesse passo disponíveis para edição. Para salvar suas alterações, clique até o último passo e, em seguida, clique em Concluir. Clique no X no canto superior direito para fechar a página sem salvar suas alterações.

As páginas Assistente são úteis sempre que você precisa guiar os usuários por um processo de múltiplos passos, como um formulário de entrada de pedidos que separa cada passo em sua própria tela:

Configurar uma página Assistente

Criar a página

Para criar uma página usando o layout Assistente:

1. Vá para App Workbench e clique em + Página.
2. Insira um Nome da Página, por exemplo Detalhes do Pedido.
3. Clique em Próximo.
4. Em Selecionar um Menu, selecione o menu do qual deseja vincular a página, por exemplo Início.
5. Clique em Próximo.
6. Em Selecionar um Layout, selecione Assistente.
7. Clique em Próximo.
8. Revise as atualizações propostas e clique em Concluir.

Adicionar uma tela

Cada tela em uma página Assistente é um painel, adicionado da mesma forma que qualquer outro painel em uma página:

1. Se você estiver usando o Designer Ao Vivo, clique em + Painel. Se estiver no App Workbench, clique em + Escolher Tipo de Painel no painel Layout do Painel da Página. A caixa de diálogo Criar um Painel é aberta.
2. Selecione o tipo de painel para exibição, por exemplo Grade, e clique em Próximo.
3. Selecione a fonte do painel e clique em Próximo.
4. Selecione se deseja Construir Automaticamente o painel ou Escolher Manualmente, e clique em Próximo.
5. Clique em Concluir.
6. Repita essas etapas para cada tela adicional que deseja adicionar à página Assistente.

Após adicionar uma tela, você pode personalizar seus botões de navegação ou configurar um botão Finalizar.

Navegação da página do Assistente

As páginas do Assistente incluem os seguintes recursos de navegação:

• Barra de progresso: Exibida em cada tela para rastrear a etapa atual na página do Assistente.

• Visibilidade do painel: Controla se um painel aparece como uma etapa na página do Assistente, usando o campo Visibilidade do Painel do painel:

  • Mostrar: O painel é listado como uma etapa, e os usuários navegam até ele normalmente.
  • Oculto: O painel não é listado como uma etapa, e os usuários o ignoram.
  • Desativado: O painel é listado como uma etapa, mas aparece riscado, e os usuários o ignoram.

• Texto de ajuda: O texto de ajuda de um painel aparece abaixo da barra de progresso.

• Link para o Painel: Clicar em um botão configurado com a opção Link para o Painel muda a página do Assistente para a etapa que contém o painel de destino. Esta opção também está disponível em outros layouts de página; consulte Controles de Botão para mais detalhes.

As páginas do Assistente também suportam botões personalizados Anterior, Próximo e Finalizar, permitindo que você promova um botão de um painel para substituir um desses botões na navegação da página. Consulte Personalizar botões de navegação abaixo.

Personalizar botões de navegação

Você pode substituir os botões Anterior, Próximo e Finalizar em uma página do Assistente. Isso permite que você personalize o comportamento do botão, por exemplo, para executar um evento personalizado quando o botão Próximo for clicado, ou para navegar para uma nova página quando o botão Finalizar for clicado.

Para substituir os botões de navegação de uma página do Assistente:

1. Abra a página desejada e selecione Gaveta de Ação > Designer Ao Vivo. Alternativamente, abra a tela de edição da página desejada indo para App Workbench > Páginas.
2. Se você estiver usando o Designer Ao Vivo, selecione o painel onde deseja substituir um botão; suas opções populam o Designer Ao Vivo. Se você estiver no App Workbench, selecione o painel onde deseja substituir um botão e clique no botão Controles.
3. Clique em + Controle. A caixa de diálogo Adicionar um Controle é aberta.
4. Defina o Tipo de Controle como Botão.
5. Insira um Nome para o botão, por exemplo Enviar.

6. No campo Subtipo de Controle, selecione o botão que você deseja direcionar:

7. Próximo: O botão de navegação que avança para a próxima tela.

8. Concluir: O botão de navegação que completa e encerra a página do Assistente.

9. Anterior: O botão de navegação que retorna à tela anterior.

10. Clique em Próximo.

11. Opcionalmente, atribua um evento para executar ou uma página para vincular, em seguida, clique em Próximo.
12. Revise as atualizações propostas e clique em Concluir.

Configurar um botão Concluir

Um botão Concluir é um caso especial: ele só aparece quando está definido no último painel visível de uma página do Assistente. Para configurar ou substituir um botão Concluir, você deve fazê-lo a partir do último painel visível da página do Assistente.

Se a sua página do Assistente tiver caminhos condicionais, você pode definir um botão Concluir em cada painel que pode acabar sendo o último visível, e o App Builder mostrará o botão Próximo ou Concluir, conforme apropriado. Se você precisar que um botão Concluir apareça antes da última tela visível, defina um botão Próximo (ou outro), defina seu Rótulo como Concluir e faça com que ele feche a página do Assistente ou navegue para outra página para alcançar o mesmo efeito.

1. Abra a página desejada e selecione Painel de Ação > Designer Ao Vivo. Alternativamente, abra a tela de edição da página desejada indo para App Workbench > Páginas.
2. Se você estiver usando o Designer Ao Vivo, clique na aba Todos os Painéis, localize o último painel visível e clique no ícone Abrir registro. Se você estiver no App Workbench, localize o último painel visível no painel Layout do Painel da Página e clique no ícone Abrir registro.
3. Clique em + Controle.
4. Defina o Tipo de Controle como Botão.
5. Defina o Subtipo de Controle como Concluir.
6. Insira o Nome que você deseja que apareça no botão, por exemplo Enviar.
7. Clique em Próximo.
8. Se o botão deve executar um evento ou vincular a uma página, defina esses valores.
9. Clique em Próximo.
10. Revise as atualizações propostas e clique em Concluir.