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.

Web Dynpro - ALV 1

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.

Web Dynpro - ALV 2

Salve como Objeto Local.

O programa é criado com a estrutura abaixo:

Web Dynpro - ALV 3

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.

Web Dynpro - ALV 4

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

Web Dynpro - ALV 5

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

Web Dynpro - ALV 6

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

Web Dynpro - ALV 7

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

Web Dynpro - ALV 8

Web Dynpro - ALV 9

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.

Web Dynpro - ALV 10

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

Web Dynpro - ALV 11

Ficará assim:

Web Dynpro - ALV 12

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

Web Dynpro - ALV 13

Web Dynpro - ALV 14

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

Web Dynpro - ALV 15

Adicione agora um botão para a pesquisa.

Web Dynpro - ALV 16

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.
Web Dynpro - ALV 17

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

Web Dynpro - ALV 18

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

Web Dynpro - ALV 19

Web Dynpro - ALV 20

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.

Web Dynpro - ALV 21

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

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.

Web Dynpro - ALV 22

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

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

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.

Web Dynpro - ALV 23

Web Dynpro - ALV 24

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

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

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.

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.

Web Dynpro - ALV 25

Selecione o component ALV / TABLE.

Web Dynpro - ALV 26

Web Dynpro - ALV 27

Salve e Ative.

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

Web Dynpro - ALV 28

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

Web Dynpro - ALV 29

Criando a aplicação Web Dynpro

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

Web Dynpro - ALV 30

 

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!

Web Dynpro - ALV 32

 

Resultado do ALV no Web Dynpro

O resultado da aplicação é apresentado abaixo.

Web Dynpro - ALV 33

 

Gostou?

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

Aline Cristina

Formada em Sistemas de Informação pelo Centro Universitário do Leste De Minas Gerais – Unileste-MG. Comecei com PHP, passei pelo C# e atualmente atuo como consultora ABAP, na equipe de desenvolvimento de sistemas de uma grande indústria no leste de MG.

You may also like...

5 Responses

  1. Ricardo Astolfi says:

    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.

  2. 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!

  3. Ricardo Astolfi says:

    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!

  4. Ótimo! É assim mesmo.. WebDynpro não é só código… se esquece essas configurações já era.. rsrs
    Obrigada 🙂

  5. Preda says:

    Se gostei? ficou duca! Tinha usado um exemplo do Saptechnicals e só deu pau, o seu fiz de prima e ficou show. Parabéns!