ALV em Web Dynpro: Um guia passo a passoBYALINE CRISTINA JUNE 9, 2014

Compartilhe!Fbio Pagoti: Ol pessoal, depois de escrever oexcelente postMdulo de funo para enviar e-mailque ficou na home do ABAP101.com por bastante tempo, aAline(nossa mais nova autora) escreveu mais um. Este novo focado emWeb Dynpro. Se voc procura um exemplo de aplicao nesta tecnologia que est presente na nossamatriz de conhecimentos de ABAP Jnior, Pleno e Sniorno 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 oprograma que ser formada por dois grupos (ComponenteGroup) 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 DynproTransao SE80-> Selecione o itemComponente 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 docontextoSelecione 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 usurioSelecione 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 lgicaVamos criar uma Ao para o boto.Clique no boto do evento OnAction informe os dados abaixo e confirme.Action: Busca_dadosDescription: Busca dados tabela SFLIGHT.

Altere a propriedade texto para Pesquisar.Vamos adicionar o componente para o ALV.Selecione o componente ZWD_TESTE_ASAdicione 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.

123456*** Tabela de sadaDATA: ti_saida TYPE STANDARD TABLE OF sflight.*** MensagensDATA: 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 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.

123456789101112131415161718192021method 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 fromtovia lead selectionlo_nd_selecao = wd_context->get_child_node( name = wd_this->wdctx_selecao ).* get element via lead selectionlo_el_selecao = lo_nd_selecao->get_element( ).* @TODO handle not set lead selectionIF lo_el_selecao IS INITIAL.ENDIF.* get all declared attributeslo_el_selecao->get_static_attributes(IMPORTINGstatic_attributes = ls_selecao ).endmethod.

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

12SELECT * FROM sflight INTO TABLE ti_saidaWHERE 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.

1DATA lv_exibe_relatorio TYPE wd_this->element_context-exibe_relatorio.

Adicione os tipos necessrios para a sada do relatrio:

12345*** Tela de SadaDATA 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 cdigo abaixo aps o select.Nele feita a validao, caso no existam dados ser exibida uma mensagem de erro.

12345678910111213141516171819202122232425262728293031323334IF ti_saida IS INITIAL.lo_api_controller ?= wd_this->wd_get_api( ).CALL METHOD lo_api_controller->get_message_managerRECEIVINGmessage_manager = lo_message_manager.* report messageCALL METHOD lo_message_manager->report_messageEXPORTINGmessage_text = 'No Foram encontrados Dados'RECEIVINGmessage_id = message_id.lv_exibe_relatorio = 1.ELSE.* navigate fromtovia lead selectionlo_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 selectionlo_el_context = wd_context->get_element( ).* set single attributelo_el_context->set_attribute(name = `EXIBE_RELATORIO`value = lv_exibe_relatorio ).

Definindonavegao de visesSelecione 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 DynproVamos 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 DynproO resultado da aplicao apresentado abaixo.