ALV em Web Dynpro: Um guia passo a passo
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!
Olá Aline,
eu segui o tutorial mas estou com dificuldade para fazer o ALV em WebDynpro. Para a saída do relatório meu código esta dando syntax error, ele diz que o tipo element_relatorio é unknown.
Você poderia por gentileza verificar o código do método ONACTIONBUSCA_DADOS.
Obrigado.
Olá!
Desculpe a demora em responder… Mas revi o código.. está ok..
Reveja a parte de criação do node em -> Definindo nós do contexto -> Adicione agora o Node Relatório com todos os campos da tabela sflight.
Pode ser que faltou algum item dessa parte, pois é o element_relatorio é do tipo desse node.
Qualquer dúvida estou a disposição!
Realmente eu não tinha arrastado o node RELATORIO do Context COMPONENTCONTROLLER para o Context da MAIN.
Agora está meu primeiro ALV em WebDynpro está funcionando =)
Muito obrigado pela ajuda e parabéns pelo post!
Ótimo! É assim mesmo.. WebDynpro não é só código… se esquece essas configurações já era.. rsrs
Obrigada 🙂
Se gostei? ficou duca! Tinha usado um exemplo do Saptechnicals e só deu pau, o seu fiz de prima e ficou show. Parabéns!