Controle de botão no Jitterbit App Builder

Um Botão controle coloca um botão clicável em um painel. Clicar em um botão pode executar um evento, vincular a outra página ou vincular a outro painel, dependendo de como você o configura. Esta página descreve como adicionar um controle de Botão, configurar o que acontece quando ele é clicado, controlar onde ele aparece no painel e aplicar estilos a ele.

Adicionar um controle de Botão

Para adicionar um controle de Botão a um painel:

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 adicionar o botão; suas opções populam o Designer Ao Vivo. Se você estiver no App Workbench, selecione o painel onde deseja adicionar o botão e clique no botão Controles.

3. Clique em + Controle. A caixa de diálogo Adicionar um Controle é aberta:

   

4. (Opcional) Se o botão deve estar associado a uma coluna subjacente, selecione-a no campo Coluna.

5. Defina o Tipo de Controle como Botão.
6. Insira um Nome. Este valor aparece como o rótulo do botão.

7. No campo Subtipo de Controle, selecione se o botão deve aparecer como Primário ou Secundário:

   • Primário: Exibe como um botão principal no painel.
   • Secundário: Exibe como um botão secundário no painel, com uma aparência mais leve do que um botão Primário.

8. Clique em Próximo.

9. Configure o que o botão faz quando clicado. Veja Configurar o comportamento do clique do botão abaixo.
10. Clique em Próximo, revise as alterações propostas pelo App Builder e clique em Concluir.

Após criar o botão, você pode definir sua localização ou aplicar estilos a partir de suas configurações.

Configurar o comportamento do clique do botão

Na segunda etapa da caixa de diálogo Adicionar um Controle, escolha o que acontece quando um usuário clica no botão:

• Executar um Evento: Selecione um evento para executar.
• Link para Página: Selecione uma página para navegar.

• Link para Painel: Selecione um painel de destino na mesma página para trazer à vista.

  Nota

  A disponibilidade da opção Link para Painel depende da versão do App Builder:

  • No App Builder 4.64 e versões anteriores, Link para Painel está disponível apenas em páginas com o layout Assistente.
  • No App Builder 4.65 e versões posteriores, Link para Painel está disponível em qualquer layout de página.

  Link para Painel também se comporta de maneira diferente dependendo do layout do painel:

  • Em uma página Assistente, clicar no botão muda para a etapa que contém o painel de destino. Veja Páginas do Assistente para mais detalhes.
  • Se o painel de destino estiver em uma aba não selecionada dentro de um grupo de painéis que usa o layout Aba, clicar no botão também seleciona essa aba, revelando o painel. Veja Grupos de Painéis para mais informações sobre grupos de painéis Aba.

Localização do Botão

Os controles de Botão podem ser colocados em uma das quatro áreas de um painel. Para definir isso:

1. Se você estiver usando o Designer Ao Vivo, selecione o painel contendo o botão e clique no ícone Abrir registro. Se você estiver no App Workbench, selecione o painel contendo o botão e clique no ícone Abrir registro.
2. Abra a aba Propriedades do Controle.

3. No campo Localização, selecione uma das seguintes opções:

   • Corpo: (Padrão.) Exibe inline no painel.
   • Cabeçalho: Exibe na região do cabeçalho do painel, padrão para o lado direito.
   • Painel (Menu): Exibe em um menu aninhado no painel, na região superior direita.
   • Barra de Ferramentas: Exibe na região da barra de ferramentas do painel, padrão para a direita de quaisquer botões de método de atualização existentes (por exemplo, Criar ou Auditar).

   As quatro possíveis localizações dos botões estão ilustradas abaixo:

   

4. Clique em Salvar.

Estilizar um botão

Use Estilos para personalizar ainda mais a aparência de um controle Botão, como seu tamanho, cor e peso da fonte. Você pode personalizar um estilo se precisar de um controle mais granular.

1. Abra a página onde o botão está e selecione Painel de Ação > Designer Ao Vivo. Alternativamente, abra a tela de edição da página indo para App Workbench > Páginas.
2. Se você estiver usando o Designer Ao Vivo, selecione o botão; suas opções serão preenchidas no Designer Ao Vivo. Se você estiver no App Workbench, selecione o painel onde o botão está e clique no botão Controles, em seguida, clique no ícone Abrir registro do botão.
3. Vá para Mais > Estilos. A caixa de diálogo Estilos será aberta.
4. Clique em + Estilo.
5. Selecione Botões em Categorias de Estilo.
6. Localize o estilo desejado e clique no botão + Adicionar.
7. Saia das telas de estilos e edição, em seguida, atualize o navegador para confirmar a atualização.