Fábio Pagoti: Olá pessoal, depois de escrever o excelente post Módulo de função para enviar e-mail que ficou na home do ABAP101.com por bastante tempo, a Aline (nossa mais nova autora) escreveu mais um. Este novo focado em Web Dynpro. Se você procura um exemplo de aplicação nesta tecnologia que está presente na nossa matriz de conhecimentos de ABAP Júnior, Pleno e Sênior não deixe de conferir este post.

(O post contém muitas imagens para facilitar o acompanhamento. Caso o post demore para carregar tenha um pouco de paciência 🙂 )

Aline Cristina:

Neste post descrevo passo a passo a criação de um relatório Web Dynpro usando o componente ALV.

Criaremos uma tela de seleção para o programa que será formada por dois grupos (Componente Group) Seleção de Dados e Relatório. No primeiro o usuário informa a Companhia Aérea e o Número do Voo. Quando o botão Pesquisar é clicado, os dados referentes ao filtro informado são carregados no grupo Relatório em um ViewContainerUIElement ou ALV.

Vamos ao passo a passo!

 

Criando o Componente Web Dynpro

Transação SE80-> Selecione o item Componente Web Dynpro/Interface.

Informe o nome do componente: ZWD_TESTE_AS.

Informe uma descrição para o componente.
Observe que é sugerida a criação de uma visão com o Nome MAIN.
Altere o nome se preferir e confirme.

Salve como Objeto Local.

O programa é criado com a estrutura abaixo:

Definindo nós do contexto

Selecione o COMPONENTCONTROLLER. Vamos criar os itens do CONTEXT, onde definimos o campos usados no relatório. Clique com o botão direito em CONTEXT -> Create -> Node.

Informe o nome SELECAO para o node e no Dictionary structure informe a tabela SFLIGHT.

Clique em ADD Atributes… Selecione os campos CARRID e CONNID e confirme.

Adicione agora o Node Relatório com todos os campos da tabela sflight. E altere a cardinalidade para 0…n.

Selecione a View MAIN na aba Context.
Clique e arraste o node SELECAO do Context COMPONENTCONTROLLER para o Context da MAIN

Desenhando a interface com o usuário

Selecione a aba Layout.
Clique com o botão direito em ROOTUIELEMENTCONTAINER e selecione Element einfugn para adicionar um elemento na tela.

Vamos criar inicialmente 2 componentes do tipo GROUP que serão divididos em Seleção de Dados e Relatório.

Ficará assim:

Altere a propriedade WIDTH do grupo Relatório para 100% para que ele ocupe toda a tela.

Agora iremos adicionar os itens de seleção de dados.
Adicione os componentes LABEL com os nomes lbl_carrid e lbl_connid.
Para cada um adicione também o componente INPUTFIELD com os nomes carrid e connid.
Altere a propriedade VALUE dos INPUTFIELD clique no botão do lado e selecione os respectivos atributos no contexto criado

Altere a propriedade state dos InputFields para “required” (Obrigatório)
Altere a propriedade Layout Data do lbl_connid para MatrixHeadData.

Adicione agora um botão para a pesquisa.

Ligando a interface com a lógica

Vamos criar uma Ação para o botão.
Clique no botão do evento OnAction informe os dados abaixo e confirme.
Action: Busca_dados
Description: Busca dados tabela SFLIGHT.

Altere a propriedade texto para “Pesquisar”.
Vamos adicionar o componente para o ALV.
Selecione o componente ZWD_TESTE_AS
Adicione o componente SALV_WD_TABLE dando a ele o nome de ALV

Selecione a MAIN Aba propriedades clique no botão para adicionar o componente ALV.
Selecione o SALV_WD_TABLE – INTERFACE CONTROLLER.

Selecione a aba Layout. Vamos adicionar agora o componente ViewContainerUiElement no Grupo 2.
Nome: ALV.

Vamos ao código!
Abra o método BUSCAR_DADOS. Basta dar 2 cliques no evento OnAction.

Inicialmente vamos declarar nossa tabela de saída e também os tipos necessários para a exibição de mensagem.

*** Tabela de saída
DATA: ti_saida TYPE STANDARD TABLE OF sflight.
*** Mensagens
DATA: lo_api_controller TYPE REF TO if_wd_controller,
lo_message_manager TYPE REF TO if_wd_message_manager,
message_id TYPE string.

Agora vamos ler os 2 parâmetros que criamos.
Clique no botão Web Dynpro Code Wizard “Varinha mágica! Que cria o código para nós!”
Clique em Context e selecione o Node Seleção.

Será gerado o código abaixo no método busca_dados.

method ONACTIONBUSCA_DADOS .
DATA: ti_saida TYPE STANDARD TABLE OF sflight.

DATA lo_nd_selecao TYPE REF TO if_wd_context_node.
DATA lo_el_selecao TYPE REF TO if_wd_context_element.
DATA ls_selecao TYPE wd_this->element_selecao.

* navigate from  to  via lead selection
lo_nd_selecao = wd_context->get_child_node( name = wd_this->wdctx_selecao ).

* get element via lead selection
lo_el_selecao = lo_nd_selecao->get_element( ).
* @TODO handle not set lead selection
IF lo_el_selecao IS INITIAL.
ENDIF.

* get all declared attributes
lo_el_selecao->get_static_attributes(
IMPORTING
static_attributes = ls_selecao ).
endmethod.

Vamos agora selecionar os dados na tabela. Adicione o select abaixo no fim do código acima.

SELECT * FROM sflight INTO TABLE ti_saida
WHERE carrid = ls_selecao-carrid AND connid = ls_selecao-connid.

Vá ao context da MAIN e crie o atributo EXIBE_RELATORIO do tipo WDUI_VISIBILITY coloque 1 como valor default. Selcione o Componete na aba layout e altera propriedade visible para o atributo criado.

E declare a variável no código do botão.

DATA lv_exibe_relatorio TYPE wd_this->element_context-exibe_relatorio.

Adicione os tipos necessários para a saída do relatório:

*** Tela de Saída
DATA lo_nd_relatorio TYPE REF TO if_wd_context_node.
DATA lo_el_relatorio TYPE REF TO if_wd_context_element.
DATA ls_relatorio TYPE wd_this->element_relatorio.
DATA lo_el_context TYPE REF TO if_wd_context_element.

E adicione o código abaixo após o select.

Nele é feita a validação, caso não existam dados será exibida uma mensagem de erro.

IF ti_saida IS INITIAL.

lo_api_controller ?= wd_this->wd_get_api( ).

CALL METHOD lo_api_controller->get_message_manager
RECEIVING
message_manager = lo_message_manager.

* report message
CALL METHOD lo_message_manager->report_message
EXPORTING
message_text = 'Não Foram encontrados Dados'
RECEIVING
message_id = message_id.

lv_exibe_relatorio = 1.

ELSE.
* navigate from  to  via lead selection
lo_nd_relatorio = wd_context->get_child_node( name = wd_this->wdctx_relatorio ).

lo_nd_relatorio->bind_table( new_items = ti_saida set_initial_elements = abap_true ).

lv_exibe_relatorio = 2.

ENDIF.

* get element via lead selection
lo_el_context = wd_context->get_element( ).

* set single attribute
lo_el_context->set_attribute(
name = `EXIBE_RELATORIO`
value = lv_exibe_relatorio ).

Definindo navegação de visões

Selecione a Window ZWD_TESTE_AS clique com o botão direito no ALV e em Incorporar visão/Embed View.

Selecione o component ALV / TABLE.

Salve e Ative.

Selecione o item INTERFACECONTROLLER_USAGE do componente ALV. Clique em Controler Usage e selecione o componente ZWD_TESTE_AS

Clique no node RELATORIO e arraste para o node DATA do INTERFACECONTROLLER

Criando a aplicação Web Dynpro

Vamos criar agora a aplicação do programa. Onde veremos o resultado:

 

Salve-a como Objeto local.
Salve e Ative toda a aplicação.
Vamos testar o programa.
Clique com o botão direito na aplicação criada e em Testar. O navegador é aberto, selecione o filtro e pesquise!

 

Resultado do ALV no Web Dynpro

O resultado da aplicação é apresentado abaixo.

 

Gostou?

Não esqueça de deixar suas sugestões em forma de comentário! Até a próxima!