APEX - APLICAÇÃO COM BARRA DE PESQUISA

Uma funcionalidade interessante que encontramos em algumas aplicações é a barra de pesquisa, que permite fazer pesquisas em toda a aplicação. Existem várias maneiras de implementá-la em apex. Nesse artigo, gostaria de compartilhar uma implementação simples dessa funcionalidade.

Uma aplicação de exemplo pode ser acessada em: APP COM BUSCA

São 3 passos principais:

1. Criar as tabelas e a aplicação. 
2. Criar uma view para a pesquisa.
3. Criar itens e ações dinâmicas na página global.

CRIAR TABELAS E APLICAÇÃO

Para o nosso exemplo, criaremos 3 tabelas , TB_PROFESSORES, TB_TURMAS e TB_ALUNOS. 

TABELAS

Copie o código abaixo e navegue para Sql Workshop -> Sql Scripts -> Create. Dê um nome para   o script em  Script Name. Cole o código que foi copiado e clique em Run. Depois clique em Run Now. Permaneça nesta página, pois agora criaremos nossa aplicação.

Obs: Por favor, certifique-se de copiar o inteiro código para não ter problemas na execução do script.

-- TABELA DE PROFESSORES CREATE TABLE TB_PROFESSORES ( PROFESSOR_ID NUMBER, NM_PROFESSOR VARCHAR2(60), NU_TELEFONE VARCHAR2(14), EMAIL VARCHAR2(40), CONSTRAINT TB_PROFESSORES_PK PRIMARY KEY (PROFESSOR_ID) USING INDEX ENABLE ); / CREATE SEQUENCE SEQ_PROFESSORES MINVALUE 1 MAXVALUE 9999999999 INCREMENT BY 1 START WITH 1 CACHE 20 NOORDER NOCYCLE; / CREATE OR REPLACE EDITIONABLE TRIGGER BI_TB_PROFESSORES BEFORE INSERT ON TB_PROFESSORES FOR EACH ROW BEGIN IF :NEW.PROFESSOR_ID IS NULL THEN SELECT SEQ_PROFESSORES.NEXTVAL INTO :NEW.PROFESSOR_ID FROM SYS.DUAL; END IF; END; / -- TABELA DE TURMAS CREATE TABLE TB_TURMAS ( TURMA_ID NUMBER, DS_TURMA VARCHAR2(60), PROFESSOR_ID NUMBER, CONSTRAINT TB_TURMAS_PK PRIMARY KEY (TURMA_ID) USING INDEX ENABLE ); / ALTER TABLE TB_TURMAS ADD CONSTRAINT TB_TURMAS_FK FOREIGN KEY ("PROFESSOR_ID") REFERENCES TB_PROFESSORES ("PROFESSOR_ID") ENABLE; / CREATE SEQUENCE SEQ_TURMAS MINVALUE 1 MAXVALUE 9999999999 INCREMENT BY 1 START WITH 1 CACHE 20 NOORDER NOCYCLE; / CREATE OR REPLACE EDITIONABLE TRIGGER BI_TB_TURMAS BEFORE INSERT ON TB_TURMAS FOR EACH ROW BEGIN IF :NEW.TURMA_ID IS NULL THEN SELECT SEQ_TURMAS.NEXTVAL INTO :NEW.TURMA_ID FROM SYS.DUAL; END IF; END; / -- TBELA DE ALUNOS CREATE TABLE TB_ALUNOS ( ALUNO_ID NUMBER, NM_ALUNO VARCHAR2(60), NU_TELEFONE VARCHAR2(14), EMAIL VARCHAR2(40), TURMA_ID NUMBER, CONSTRAINT TB_ALUNOS_PK PRIMARY KEY (ALUNO_ID) USING INDEX ENABLE ); / ALTER TABLE TB_ALUNOS ADD CONSTRAINT TB_ALUNOS_FK FOREIGN KEY ("TURMA_ID") REFERENCES TB_TURMAS ("TURMA_ID") ENABLE; / CREATE SEQUENCE SEQ_ALUNOS MINVALUE 1 MAXVALUE 9999999999 INCREMENT BY 1 START WITH 1 CACHE 20 NOORDER NOCYCLE; / CREATE OR REPLACE EDITIONABLE TRIGGER BI_TB_ALUNOS BEFORE INSERT ON TB_ALUNOS FOR EACH ROW BEGIN IF :NEW.ALUNO_ID IS NULL THEN SELECT SEQ_ALUNOS.NEXTVAL INTO :NEW.ALUNO_ID FROM SYS.DUAL; END IF; END; /

APLICAÇÃO

Depois de verificar que o script foi executado com êxito, clique em Create App. Ele criará uma aplicação com base nos objetos que acabamos de criar. Dê uma nome para a aplicação e clique em Create Application.

Logue na aplicação com o seu usuário do Workspace.

Obs: Edite as páginas 2, 4 e 6. Em cada uma vá em Navigation e desabilite a função Warn on Unsaved Changes.

CRIAR VIEW

Antes de criar a view que usaremos para a pesquisa, vamos inserir alguns dados em nossas tabelas. Copie o código abaixo em navegue para Sql Workshop -> Sql Commands. Cole o código que foi copiado e clique em Run.

Obs: Os dados abaixo foram criados com ferramenta de geração de pessoas para fins didáticos.

BEGIN -- TB_PROFESSORES INSERT INTO TB_PROFESSORES (PROFESSOR_ID, NM_PROFESSOR, NU_TELEFONE, EMAIL) VALUES (1,'Débora Brenda Mendes','99597-0688','debora81@badauy.com'); INSERT INTO TB_PROFESSORES (PROFESSOR_ID, NM_PROFESSOR, NU_TELEFONE, EMAIL) VALUES (2,'Yuri Severo Ribeiro','98259-2402','yuri.ribeiro@projetti.com'); INSERT INTO TB_PROFESSORES (PROFESSOR_ID, NM_PROFESSOR, NU_TELEFONE, EMAIL) VALUES (3,'Cristiane Fogaça','98641-0236','cristianef@ambiente.sp.br'); -- TB_TURMAS INSERT INTO TB_TURMAS (TURMA_ID, DS_TURMA, PROFESSOR_ID) VALUES (1,'INGLÊS',1); INSERT INTO TB_TURMAS (TURMA_ID, DS_TURMA, PROFESSOR_ID) VALUES (2,'ESPANHOL',2); INSERT INTO TB_TURMAS (TURMA_ID, DS_TURMA, PROFESSOR_ID) VALUES (3,'ITALIANO', 3); -- TB_ALUNOS INSERT INTO TB_ALUNOS (NM_ALUNO,NU_TELEFONE,EMAIL,TURMA_ID) VALUES ('Renata Malu Aragão','98668-9610','renatamaragao@iesa.com.br',1); INSERT INTO TB_ALUNOS (NM_ALUNO,NU_TELEFONE,EMAIL,TURMA_ID) VALUES ('Kevin Thomas Araújo','98619-3422','kevintaraujo@thibe.com.br',1); INSERT INTO TB_ALUNOS (NM_ALUNO,NU_TELEFONE,EMAIL,TURMA_ID) VALUES ('Sophia Bárbara Lima','99554-1420','sophia_lima@zepto.com.br',1); INSERT INTO TB_ALUNOS (NM_ALUNO,NU_TELEFONE,EMAIL,TURMA_ID) VALUES ('Lorena Caroline Dias','98447-2675','lorena-dias99@danielvasco.com.br',1); INSERT INTO TB_ALUNOS (NM_ALUNO,NU_TELEFONE,EMAIL,TURMA_ID) VALUES ('Lorenzo Bernardes','99820-8173','lorenzo.bernardes@infouai.com',1); INSERT INTO TB_ALUNOS (NM_ALUNO,NU_TELEFONE,EMAIL,TURMA_ID) VALUES ('Laura Luana Drumond','98929-8094','lauradrumond@vnews.com.br',2); INSERT INTO TB_ALUNOS (NM_ALUNO,NU_TELEFONE,EMAIL,TURMA_ID) VALUES ('Isabelle Pinto','98239-4216','isabelle_pinto@jammer.com.br',2); INSERT INTO TB_ALUNOS (NM_ALUNO,NU_TELEFONE,EMAIL,TURMA_ID) VALUES ('Arthur Fernando Pires','98296-2743','arthurpires@salera.com.br',2); INSERT INTO TB_ALUNOS (NM_ALUNO,NU_TELEFONE,EMAIL,TURMA_ID) VALUES ('Antonio Luan Fraga','98783-0720','antonio.fraga@yahoo.se',2); INSERT INTO TB_ALUNOS (NM_ALUNO,NU_TELEFONE,EMAIL,TURMA_ID) VALUES ('Marcela Moraes','99578-8790','marcela.moraes@somma.net.br',2); INSERT INTO TB_ALUNOS (NM_ALUNO,NU_TELEFONE,EMAIL,TURMA_ID) VALUES ('Priscila Souza','98748-5989','priscila_souza@mastria.com.br',3); INSERT INTO TB_ALUNOS (NM_ALUNO,NU_TELEFONE,EMAIL,TURMA_ID) VALUES ('Murilo Enrico Campos','99266-1119','murilo-campos71@destaco.com',3); INSERT INTO TB_ALUNOS (NM_ALUNO,NU_TELEFONE,EMAIL,TURMA_ID) VALUES ('Thiago Brito','99135-2427','thiago-brito95@unianhanguera.edu.br',3); INSERT INTO TB_ALUNOS (NM_ALUNO,NU_TELEFONE,EMAIL,TURMA_ID) VALUES ('Diego Elias da Silva','99282-2377','diego_elias_dasilva@hawk.com.br',3); INSERT INTO TB_ALUNOS (NM_ALUNO,NU_TELEFONE,EMAIL,TURMA_ID) VALUES ('Camila Manuela da Mata','99751-4243','camiladamata@3dmaker.com.br',3); END;

Agora criaremos a view que usaremos como fonte para fazer as pesquisas. Copie o código abaixo em navegue para Sql Workshop -> Sql Commands. Cole o código que foi copiado e clique em Run.

CREATE VIEW VW_BUSCA AS SELECT NOME, PAGINA FROM ( SELECT NM_PROFESSOR NOME, 2 PAGINA FROM TB_PROFESSORES UNION SELECT DS_TURMA NOME, 4 PAGINA FROM TB_TURMAS UNION SELECT NM_ALUNO NOME, 6 PAGINA FROM TB_ALUNOS UNION SELECT PAGE_NAME NOME, PAGE_ID PAGINA FROM APEX_APPLICATION_PAGES WHERE APPLICATION_ID = v('APP_ID') AND PAGE_ACCESS_PROTECTION = 'Unrestricted' )

Obs: As informações da coluna pagina devem corresponder às páginas dos relatórios da aplicação. No exemplo, o relatório de professores está na página 2, o de turmas, ná página 4 e o de alunos, na página 6.

PÁGINA GLOBAL

Criaremos uma região com 3 itens e ações dinâmicas na página global, ou página 0, da nossa aplicação. 

REGIÃO

Identification

• Title: Buscar
• Type: Static Content

Layout

• Position: Before Navigation Bar

Appearance

• Template: Interactive Report
• Template Options:

•         Remove Borders
•         Item Spacing: None
•         Item Width: Strech Form Fields    
•         Label Alignment Right
•         Top Margin: None
•         Bottom Margin: None
•         Left Margin: None
•         Right: None

Advanced

• Static ID: buscar
• Custom Attributes:  style=" background-color: #f0f0f0;  width: 100%;"

ITENS

Na regiao "buscar" que acabamos de criar vamos criar 3  itens: P0_ITEM_BUSCA, P0_PAGINA_BUSCA e P0_CONTEUDO_BUSCA. 

P0_ITEM_BUSCA

Será o item onde será digitada a pesquisa. Terá as seguintes características:

Identification

• Name: P0_ITEM_BUSCA
• Type: Text Field with autocomplete

Label

• Pesquisar ...

Search

• Contains & Ignore Case

Appearance

• Template Optional - Floating
• Template Options

• Stretch Form Item
• Top Margin: None
• Bottom Margin: None
• Left Margin: None
• Right Margin: None

List of Values

• Type: SQL Query
• SQL Query:

• SELECT NOME FROM VW_BUSCA

Advanced

• Post Text:

• <button type="button"  title="Pesquisar" aria-label="Pesquisar" id="btnBuscar" style="height: 100%;" class="t-Button t-Button--noLabel t-Button--icon t-Button--large"><span aria-hidden="true" class="t-Icon fa fa-search"></span></button>

Source

• Type: Null
• Used: Always, replacing any existing value in session state

Security

• Session State Protection: Unrestricted
• Store value encrypted in session state: off
• Escape special characters: on

P0_PAGINA_BUSCA 

Esse item receberá o número da página para a qual o usuário deverá ser redirecionado. Ele terá as seguintes características:

Identification

• Name: P0_PAGINA_BUSCA
• Type: Hidden

Settings

• Value Protected: off

Source

• Type: Null
• Used: Only when current value in session state is null

Security

• Session State Protection: Unrestricted
• Store value encrypted in session state: off

P0_CONTEUDO_BUSCA

A pesquisa feita no item P0_ITEM_BUSCA é perdida quando há redirecionamento para outra página, por isso vamos salvar o seu valor em P0_CONTEUDO_BUSCA. Ela terá as seguintes características:

Identification

• Name: P0_CONTEUDO_BUSCA
• Type: Hidden

Settings

• Value Protected: off

Source

• Type: Null
• Used: Only when current value in session state is null

Security

• Session State Protection: Unrestricted
• Store value encrypted in session state: off

AÇÕES DINÂMICAS

Ainda na página global, vamos criar 2 ações dinâmicas. A primeira será do tipo Click e fará o redirecionamento pra a página onde se encontra o conteúdo pesquisado:

AÇÃO CLICK Identification Name: Buscar When Event: Click Select Type: jQuery Selector jQuery Selector: #btnBuscar Client-side-Condition Type: Item is not null Item: P0_ITEM_BUSCA

Crie uma ação verdadeira com essa características:

Identification

• Action: Execute Server-side Code

Settings

• Language: PL/SQL
• PL/SQL Code:

:P0_CONTEUDO_BUSCA := :P0_ITEM_BUSCA;

        BEGIN

 

   SELECT PAGINA

   INTO   :P0_PAGINA_BUSCA

   FROM   VW_BUSCA

   WHERE  NOME = :P0_ITEM_BUSCA;

EXCEPTION WHEN NO_DATA_FOUND THEN

    :P0_PAGINA_BUSCA := 0;

           END;

• Items to Submit: P0_ITEM_BUSCA
• Items to Return: P0_CONTEUDO_BUSCA,P0_PAGINA_BUSCA

Execution Options 

• Fire on Initialization: off

Crie outra ação verdadeira com essa características:

Identification

• Execute Javascript Code

Settings

• Code
• let pagina = apex.item("P0_PAGINA_BUSCA").getValue();
• if (pagina != 0 && pagina != "") {  window.location.href = " f?p=&APP_ID.:"+pagina+":&APP_SESSION.::NO:: "; }

AÇÃO PAGELOAD

Essa ação filtrará os relatórios. Terá as seguintes características:

Identification  

Name: Filtrar Relatórios                                  When Event: Page Load                                       Client-side-Condition Type: Javascript expression Javascript expression: apex.item("P0_PAGINA_BUSCA").getValue() != "" &&  apex.item("P0_PAGINA_BUSCA").getValue() != 0 &&  apex.item("P0_CONTEUDO_BUSCA").getValue() != "" &&  apex.item("P0_CONTEUDO_BUSCA").getValue().toUpperCase() != document.title.toUpperCase() &&   document.getElementsByClassName('.a-IRR-search-field') != ""

Crie uma ação verdadeira:

Identification

•     Javascript Code

Settings

• Code
• let buscar = apex.item("P0_CONTEUDO_BUSCA").getValue();
• $('.a-IRR-search-field').val(buscar);
• $('.a-IRR-button--search').click();

Crie outra ação verdadeira:

Identification

•    Execute Serve-side Code     
  

Settings

• Language: PL/SQL
• PL/SQL Code
•         :P0_CONTEUDO_BUSCA := NULL;

Agora nossa barra de pesquisa está pronta. Poderemos ser redirecionados para a página desejada, inclusive filtrando a pesquisa dentro de um reltório interativo. Talvez pareça desnecessário em uma aplicação tão pequena. No entanto, essa é apenas uma aplicação de exemplo. As aplicações crescem e essa ferramenta poderá ser realmente útil.