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:
- Criar as tabelas e a aplicação.
- Criar uma view para a pesquisa.
- Criar itens e ações dinâmicas na página global.
CRIAR TABELAS E APLICAÇÃO
TABELAS
Obs: Por favor, certifique-se de copiar o inteiro código para não ter problemas na execução do script.
APLICAÇÃO
CRIAR VIEW
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.
PÁGINA GLOBAL
REGIÃO
Identification
- Title: Buscar
- Type: Static Content
Layout
- Position: Before Navigation Bar
Appearance
- Template: Interactive Report
- Template Options:
- Remove Borders
- Heading Level: Default
- Item Spacing: None
- Item Size: Default
- Item Width: Strech Form Fields
- Label Alignment Right
- Label Position: Inline - Default
- 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 ...
Settings
- Search: Contains & Ignore Case
Appearance
- Template Optional - Floating
- Template Options
- Stretch Form Item
- Size: Default
- Item Pre Text: Default
- Item Post Text Default
- Top Margin: None
- Bottom Margin: None
- Left Margin: None
- Right Margin: None
- Item Group Display: Default
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
- 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
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
Identification
When
Client-side-Condition
|
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();
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.
|
|