ALV em Web Dynpro: Um guia passo a

passo
BY ALINE CRISTINA JUNE 9, 2014

Compartilhe!

Fbio Pagoti: Ol pessoal, depois de escrever o excelente post Mdulo de

funo 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 aplicao nesta tecnologia
que est presente na nossa matriz de conhecimentos de ABAP Jnior, Pleno e
Snior no deixe de conferir este post.
(O post contm muitas imagens para facilitar o acompanhamento. Caso o post
demore para carregar tenha um pouco de pacincia )
Aline Cristina:
Neste post descrevo passo a passo a criao de um relatrio Web Dynpro
usando o componente ALV.
Criaremos uma tela de seleo para o programa que ser formada por dois
grupos (Componente Group) Seleo de Dados e Relatrio. No primeiro o
usurio informa a Companhia Area e o Nmero do Voo. Quando o boto
Pesquisar clicado, os dados referentes ao filtro informado so carregados no
grupo Relatrio em um ViewContainerUIElement ou ALV.
Vamos ao passo a passo!

Criando o Componente Web Dynpro

Transao SE80-> Selecione o item Componente Web Dynpro/Interface.
Informe o nome do componente: ZWD_TESTE_AS.

Informe uma descrio para o componente.

Observe que sugerida a criao de uma viso com o Nome MAIN.
Altere o nome se preferir e confirme.

Salve como Objeto Local.

O programa criado com a estrutura abaixo:

Definindo ns do contexto
Selecione o COMPONENTCONTROLLER. Vamos criar os itens do CONTEXT, onde
definimos o campos usados no relatrio. Clique com o boto 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 Relatrio com todos os campos da tabela sflight. E altere
a cardinalidade para 0n.

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 usurio

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

Vamos criar inicialmente 2 componentes do tipo GROUP que sero divididos em

Seleo de Dados e Relatrio.

Ficar assim:

Altere a propriedade WIDTH do grupo Relatrio para 100% para que ele ocupe
toda a tela.
Agora iremos adicionar os itens de seleo de dados.
Adicione os componentes LABEL com os nomes lbl_carrid e lbl_connid.
Para cada um adicione tambm o componente INPUTFIELD com os nomes carrid
e connid.
Altere a propriedade VALUE dos INPUTFIELD clique no boto do lado e selecione
os respectivos atributos no contexto criado

Altere a propriedade state dos InputFields para required (Obrigatrio)

Altere a propriedade Layout Data do lbl_connid para MatrixHeadData.

Adicione agora um boto para a pesquisa.

Ligando a interface com a lgica

Vamos criar uma Ao para o boto.

Clique no boto 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 boto 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 cdigo!
Abra o mtodo BUSCAR_DADOS. Basta dar 2 cliques no evento OnAction.

Inicialmente vamos declarar nossa tabela de sada e tambm os tipos

necessrios para a exibio de mensagem.

1 *** Tabela de sada

2 DATA: ti_saida TYPE STANDARD TABLE OF sflight.

3 *** Mensagens
4 DATA: lo_api_controller TYPE REF TO if_wd_controller,
5 lo_message_manager TYPE REF TO if_wd_message_manager,
6 message_id TYPE string.

Agora vamos ler os 2 parmetros que criamos.

Clique no boto Web Dynpro Code Wizard Varinha mgica! Que cria o cdigo
para ns!
Clique em Context e selecione o Node Seleo.

Ser gerado o cdigo abaixo no mtodo busca_dados.

1 method ONACTIONBUSCA_DADOS .
2 DATA: ti_saida TYPE STANDARD TABLE OF sflight.
3
4 DATA lo_nd_selecao TYPE REF TO if_wd_context_node.
5 DATA lo_el_selecao TYPE REF TO if_wd_context_element.
6 DATA ls_selecao TYPE wd_this->element_selecao.
7
8 * navigate from to via lead selection
9 lo_nd_selecao = wd_context->get_child_node( name = wd_this->wdctx_selecao ).
10
11 * get element via lead selection
12 lo_el_selecao = lo_nd_selecao->get_element( ).
13 * @TODO handle not set lead selection
14 IF lo_el_selecao IS INITIAL.
15 ENDIF.
16
17 * get all declared attributes
18 lo_el_selecao->get_static_attributes(
19 IMPORTING
20 static_attributes = ls_selecao ).
21 endmethod.

Vamos agora selecionar os dados na tabela. Adicione o select abaixo no fim do

cdigo acima.

1 SELECT * FROM sflight INTO TABLE ti_saida

2 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 varivel no cdigo do boto.

1 DATA lv_exibe_relatorio TYPE wd_this->element_context-exibe_relatorio.

Adicione os tipos necessrios para a sada do relatrio:

1 *** Tela de Sada

2 DATA lo_nd_relatorio TYPE REF TO if_wd_context_node.
3 DATA lo_el_relatorio TYPE REF TO if_wd_context_element.
4 DATA ls_relatorio TYPE wd_this->element_relatorio.
5 DATA lo_el_context TYPE REF TO if_wd_context_element.

E adicione o cdigo abaixo aps o select.

Nele feita a validao, caso no existam dados ser exibida uma mensagem
de erro.

1 IF ti_saida IS INITIAL.
2
3 lo_api_controller ?= wd_this->wd_get_api( ).
4
5 CALL METHOD lo_api_controller->get_message_manager
6 RECEIVING
7 message_manager = lo_message_manager.
8
9 * report message
10 CALL METHOD lo_message_manager->report_message
11 EXPORTING
12 message_text = 'No Foram encontrados Dados'
13 RECEIVING
14 message_id = message_id.
15
16 lv_exibe_relatorio = 1.
17
18 ELSE.
19 * navigate from to via lead selection
20 lo_nd_relatorio = wd_context->get_child_node( name = wd_this->wdctx_relatorio ).
21
22 lo_nd_relatorio->bind_table( new_items = ti_saida set_initial_elements = abap_true ).
23
24 lv_exibe_relatorio = 2.
25
26 ENDIF.
27
28 * get element via lead selection
29 lo_el_context = wd_context->get_element( ).
30
31 * set single attribute
32 lo_el_context->set_attribute(
33 name = `EXIBE_RELATORIO`
34 value = lv_exibe_relatorio ).

Definindo navegao de vises

Selecione a Window ZWD_TESTE_AS clique com o boto direito no ALV e em

Incorporar viso/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 aplicao Web Dynpro

Vamos criar agora a aplicao do programa. Onde veremos o resultado:

Salve-a como Objeto local.

Salve e Ative toda a aplicao.
Vamos testar o programa.

Clique com o boto direito na aplicao criada e em Testar. O navegador

aberto, selecione o filtro e pesquise!

Resultado do ALV no Web Dynpro

O resultado da aplicao apresentado abaixo.