Este plug-in transforma múltiplos botões em um único dropdown do Bootstrap, economizando espaço na interface e organizando ações relacionadas.
- 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
- Faça login no Oracle APEX
- Abra sua aplicação (não a MESTRE)
- Navegue até Shared Components
- Clique em Plug-ins
- Clique no botão Create >
- Selecione As a Copy of an Existing Plug-in
- Em Copy From Application, selecione: 2000 - MESTRE
- Selecione o plugin: Convert Buttons to Dropdown
- ☑️ Marque a opção Subscribe (isso permite receber atualizações automáticas)
- Clique em Copy Plug-in
✅ Pronto! O plugin está instalado e subscrito. Quando houver atualizações na aplicação MESTRE, você poderá sincronizar facilmente.
Para receber atualizações do plugin da aplicação MESTRE:
- Acesse Shared Components > Plug-ins
- Clique no plugin Convert Buttons to Dropdown
- Role até a seção Subscription
- Se houver atualizações disponíveis, clique em Refresh
Se você não tem acesso à aplicação 2000 - MESTRE, pode importar o arquivo SQL:
- Faça login no Oracle APEX
- Abra sua aplicação
- Navegue até Shared Components
- Clique em Plug-ins
- Clique no botão Import >
- Selecione o arquivo
dist/plugin_apex_dropdown_button.sql - Clique em Next e depois em Install Plug-in
✅ Pronto! O plugin está instalado e pronto para uso.
Para desenvolvimento ou customização, você pode criar o plugin manualmente:
- Faça login no Oracle APEX
- Abra sua aplicação
- Navegue até Shared Components
- Clique em Plug-ins
- Clique no botão Create >
- Selecione From Scratch
Name:
Convert Buttons to Dropdown
Internal Name:
COM.TESOURO.APEX.DROPDOWN_BUTTON
Type:
Dynamic Action
Category:
Component
- Role até a seção Source
- Em JavaScript Code, cole o conteúdo do arquivo
src/js/apex-dropdown-button.js
Crie os 3 Custom Attributes conforme especificado no arquivo src/sql/plugin-definition.sql:
- 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
- Type: Text
- Name: DROPDOWN_TEXT
- Label: Texto do Dropdown
- Default Value: Ações
- Required: Yes
- Translatable: Yes
- 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
Clique em Create Plug-in ou Apply Changes
- Crie uma Dynamic Action
- Event: Page Load (ou outro evento)
- 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)
- Certifique-se que os botões têm IDs únicos
- Crie uma Dynamic Action
- Event: Page Load
- 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)
- Crie uma Dynamic Action
- Event: Page Load
- 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.
Para botões em um Interactive Report:
- Adicione IDs únicos aos botões (Edit Attributes no IR)
- Crie uma Dynamic Action com evento After Refresh
- Selection Type: Region (selecione o Interactive Report)
- 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
- ✅ Os eventos
onclickdos 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-groupcom caret - Aplica CSS customizado para botões em dropdown
- Posicionamento absoluto para evitar cortes em regiões com overflow:hidden
- Usa estrutura
- ✅ Bootstrap 4/5: Usa
dropdowncom classes modernas - ✅ Compatível com Bootstrap 3, 4 e 5
⚠️ Todos os botões devem ter IDs únicos e válidos
- Verifique o Developer Console (F12) para mensagens de erro
- Confirme que os IDs dos botões estão corretos e separados por vírgula
- Verifique se o evento da Dynamic Action está sendo disparado
- Certifique-se que os botões existem no momento da execução
- 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 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 devem estar anexados via
onclickou 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
- Verifique se a subscrição está ativa (ícone de link no plugin)
- Clique em Refresh na seção Subscription do plugin
- Se necessário, compare a versão com a da aplicação MESTRE
Para reportar problemas ou sugerir melhorias:
- Abra uma issue no repositório GitHub
- Contate o time de desenvolvimento da aplicação MESTRE
MIT License - Livre para uso comercial e pessoal