Skip to content

Latest commit

 

History

History
235 lines (170 loc) · 7.54 KB

File metadata and controls

235 lines (170 loc) · 7.54 KB

📋 Guia de Instalação - Plugin APEX Dropdown Button

🎯 Visão Geral

Este plug-in transforma múltiplos botões em um único dropdown do Bootstrap, economizando espaço na interface e organizando ações relacionadas.

✅ Requisitos

  • Oracle APEX 5.0 ou superior
  • Bootstrap 3, 4 ou 5 (já incluído no APEX 5+)
  • O plugin detecta automaticamente a versão do Bootstrap em uso

🎯 Instalação via Aplicação MESTRE (Recomendada)

⚠️ IMPORTANTE: O plugin está disponível na Aplicação 2000 - MESTRE. Esta é a forma recomendada de instalação para manter o plugin sempre atualizado.

Como Copiar e Subscrever

  1. Faça login no Oracle APEX
  2. Abra sua aplicação (não a MESTRE)
  3. Navegue até Shared Components
  4. Clique em Plug-ins
  5. Clique no botão Create >
  6. Selecione As a Copy of an Existing Plug-in
  7. Em Copy From Application, selecione: 2000 - MESTRE
  8. Selecione o plugin: Convert Buttons to Dropdown
  9. ☑️ Marque a opção Subscribe (isso permite receber atualizações automáticas)
  10. Clique em Copy Plug-in

Pronto! O plugin está instalado e subscrito. Quando houver atualizações na aplicação MESTRE, você poderá sincronizar facilmente.

Atualizar Plugin Subscrito

Para receber atualizações do plugin da aplicação MESTRE:

  1. Acesse Shared Components > Plug-ins
  2. Clique no plugin Convert Buttons to Dropdown
  3. Role até a seção Subscription
  4. Se houver atualizações disponíveis, clique em Refresh

🚀 Instalação via Importação (Alternativa)

Se você não tem acesso à aplicação 2000 - MESTRE, pode importar o arquivo SQL:

Passo 1: Importar o Arquivo SQL

  1. Faça login no Oracle APEX
  2. Abra sua aplicação
  3. Navegue até Shared Components
  4. Clique em Plug-ins
  5. Clique no botão Import >
  6. Selecione o arquivo dist/plugin_apex_dropdown_button.sql
  7. Clique em Next e depois em Install Plug-in

Pronto! O plugin está instalado e pronto para uso.

📦 Instalação Manual (Avançada)

Para desenvolvimento ou customização, você pode criar o plugin manualmente:

Passo 1: Acessar o APEX Builder

  1. Faça login no Oracle APEX
  2. Abra sua aplicação
  3. Navegue até Shared Components

Passo 2: Criar o Plug-in

  1. Clique em Plug-ins
  2. Clique no botão Create >
  3. Selecione From Scratch

Passo 3: Configurar Informações Básicas

Name:

Convert Buttons to Dropdown

Internal Name:

COM.TESOURO.APEX.DROPDOWN_BUTTON

Type:

Dynamic Action

Category:

Component

Passo 4: Adicionar o Código JavaScript

  1. Role até a seção Source
  2. Em JavaScript Code, cole o conteúdo do arquivo src/js/apex-dropdown-button.js

Passo 5: Configurar Atributos Customizados

Crie os 3 Custom Attributes conforme especificado no arquivo src/sql/plugin-definition.sql:

Custom Attribute 1: IDs dos Botões

  • Type: Textarea
  • Name: BUTTON_IDS
  • Label: IDs dos Botões (separados por vírgula)
  • Required: Yes
  • Help Text: Informe os IDs dos botões separados por vírgula. Exemplo: btn1,btn2,btn3

Custom Attribute 2: Texto do Dropdown

  • Type: Text
  • Name: DROPDOWN_TEXT
  • Label: Texto do Dropdown
  • Default Value: Ações
  • Required: Yes
  • Translatable: Yes

Custom Attribute 3: Estilo do Botão

  • Type: Select List
  • Name: DROPDOWN_STYLE
  • Label: Estilo do Botão
  • Default Value: btn-primary
  • Required: Yes
  • LOV: STATIC:Primary (Azul)=btn-primary,Secondary (Cinza)=btn-secondary,Success (Verde)=btn-success,Danger (Vermelho)=btn-danger,Warning (Amarelo)=btn-warning,Info (Azul Claro)=btn-info,Dark (Preto)=btn-dark,Light (Branco)=btn-light,Estilo do Primeiro Botão=btn-first-button

Passo 6: Salvar

Clique em Create Plug-in ou Apply Changes

🚀 Como Usar

Exemplo 1: Botões com IDs Específicos

  1. Crie uma Dynamic Action
  2. Event: Page Load (ou outro evento)
  3. True Action:
    • Action: Convert Buttons to Dropdown [Plug-in]
    • IDs dos Botões: btn-editar,btn-excluir,btn-duplicar
    • Texto do Dropdown: Opções
    • Estilo do Botão: Primary (Azul)

Exemplo 2: Usando Botões de uma Região

  1. Certifique-se que os botões têm IDs únicos
  2. Crie uma Dynamic Action
  3. Event: Page Load
  4. True Action:
    • Action: Convert Buttons to Dropdown [Plug-in]
    • IDs dos Botões: btn1,btn2,btn3
    • Texto do Dropdown: Ações
    • Estilo do Botão: Success (Verde)

Exemplo 3: Copiar Estilo do Primeiro Botão

  1. Crie uma Dynamic Action
  2. Event: Page Load
  3. True Action:
    • Action: Convert Buttons to Dropdown [Plug-in]
    • IDs dos Botões: btn-custom-1,btn-custom-2,btn-custom-3
    • Texto do Dropdown: Ações
    • Estilo do Botão: Estilo do Primeiro Botão

Este exemplo copiará todas as classes CSS do btn-custom-1 para o botão do dropdown, mantendo o estilo consistente.

Exemplo 4: Botões em Interactive Report

Para botões em um Interactive Report:

  1. Adicione IDs únicos aos botões (Edit Attributes no IR)
  2. Crie uma Dynamic Action com evento After Refresh
  3. Selection Type: Region (selecione o Interactive Report)
  4. True Action:
    • Action: Convert Buttons to Dropdown [Plug-in]
    • IDs dos Botões: IR_BTN_EDIT,IR_BTN_DELETE
    • Texto do Dropdown: Ações
    • Estilo do Botão: btn-primary

📝 Notas Importantes

  • ✅ Os eventos onclick dos botões originais são preservados
  • ✅ O dropdown é inserido no local do primeiro botão
  • ✅ As classes APEX dos botões são automaticamente removidas
  • Detecta automaticamente a versão do Bootstrap (3, 4 ou 5) e aplica as configurações corretas
  • Bootstrap 3:
    • Usa estrutura btn-group com caret
    • Aplica CSS customizado para botões em dropdown
    • Posicionamento absoluto para evitar cortes em regiões com overflow:hidden
  • Bootstrap 4/5: Usa dropdown com classes modernas
  • ✅ Compatível com Bootstrap 3, 4 e 5
  • ⚠️ Todos os botões devem ter IDs únicos e válidos

🐛 Troubleshooting

Os botões não foram convertidos

  1. Verifique o Developer Console (F12) para mensagens de erro
  2. Confirme que os IDs dos botões estão corretos e separados por vírgula
  3. Verifique se o evento da Dynamic Action está sendo disparado
  4. Certifique-se que os botões existem no momento da execução

O dropdown não abre

  • Certifique-se que o Bootstrap está carregado na página
  • Verifique a versão do Bootstrap (APEX 5+ já inclui)
  • Verifique no console se há erros JavaScript

O dropdown é cortado pela região (Bootstrap 3)

O plugin já inclui solução automática para Bootstrap 3:

  • O menu é movido para document.body
  • Usa posicionamento absoluto
  • Atualiza posição em scroll/resize

Os eventos dos botões não funcionam

  • Os eventos devem estar anexados via onclick ou já registrados antes da conversão
  • Use apex.debug.info() para verificar se os eventos estão presentes
  • Verifique se não há erros JavaScript no console

Plugin subscrito não atualiza

  1. Verifique se a subscrição está ativa (ícone de link no plugin)
  2. Clique em Refresh na seção Subscription do plugin
  3. Se necessário, compare a versão com a da aplicação MESTRE

📞 Suporte

Para reportar problemas ou sugerir melhorias:

  • Abra uma issue no repositório GitHub
  • Contate o time de desenvolvimento da aplicação MESTRE

📄 Licença

MIT License - Livre para uso comercial e pessoal