OVS – SELECT OPTIONS em Web Dynpro

Neste post descrevo passo a passo a criação de um relatório Web Dynpro usando o componente ALV, com SELECT OPTIONS como filtro de pesquisa, criaremos também uma ajuda de pesquisa para o SELECT OPTIONS usando o componente OVS.

Referência para definições do componente OVS

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_XXX.

web dynpro - select options - 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 - select options - 2

Salve como Objeto Local.

O programa é criado com a estrutura abaixo:

web dynpro - select options - 3

Definindo o 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 - select options - 4

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

web dynpro - select options - 5

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

web dynpro - select options - 6

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

web dynpro - select options - 7

Selecione a View MAIN na aba Context.

Clique e arraste o node SELECAO do Context COMPONENTCONTROLLER para o Context da MAIN

web dynpro - select options - 8

web dynpro - select options - 9

Desenhando o Layout

Selecione a aba Layout.

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

web dynpro - select options - 10

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

web dynpro - select options - 11

Ficará assim:

web dynpro - select options - 12

Adicione 2 TransparentContainer

web dynpro - select options - 13

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.

Para o carrid iremos montar um Select Options. Adicione um componente ViewContainerUIElement com o nome CARRID no primeiro TC1.

Adicione o componente LABEL com o nome lbl_connid no TC2.

Para o nº do voo adicione também o componente INPUTFIELD com o nome connid.

Altere a propriedade VALUE dos INPUTFIELD clique no botão do lado e selecione os respectivos atributos no contexto criado

web dynpro - select options - 14

Altere a propriedade Layout Data do lbl_connid para MatrixHeadData.

web dynpro - select options - 15

Adicione agora um botão para a pesquisa.

web dynpro - select options - 16

Ficará assim:

web dynpro - select options - 17

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 - select options - 18

Altere a propriedade texto para “Pesquisar”.

Usando o componente OVS no Web Dynpro

Vamos adicionar o componentes que serão utilizados.

Selecione o componente ZWD_TESTE_AS. Adicione o componentes:

  • SALV_WD_TABLE dando a ele o nome de ALV.
  • WDR_OVS dando a ele o nome de OVS
  • WDR_SELECT_OPTIONS dando a ele o nome de SELECT_OPTIONS.

web dynpro - select options - 19

Selecione a MAIN Aba propriedades clique no botão para adicionar o componente ALV.

Selecione o SALV_WD_TABLE – INTERFACE CONTROLLER.

web dynpro - select options - 20

web dynpro - select options - 21

Faça o mesmo para os componentes OVS e SELECT_OPTIONS.

web dynpro - select options - 22

Vamos alterar o campo do Context para OVS.

web dynpro - select options - 23

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

Codificação Web Dynpro

Vamos ao código!

Abra o método BUSCAR_DADOS. Basta dar 2 cliques no evento OnAction.

web dynpro - select options - 24

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 - select options - 25

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

Para montar o select options devemos adicionar os atributos:

  • M_HANDLER                                     Tipo      IF_WD_SELECT_OPTIONS
  • M_WD_SELECT_OPTIONS        Tipo      IWCI_WDR_SELECT_OPTIONS

web dynpro - select options - 26

Vamos agora selecionar os dados na tabela. Adicione o código que contém a leitura do select option e a seleção dos dados.

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 - select options - 27

web dynpro - select options - 28

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 a após o select.

O código completo do método Busca Dados.

Vamos agora criar o método que irá configurar o ALV definindo por exemplo, zebrado nas linhas do ALV, número de linhas que serão exibidas, etc.

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

web dynpro - select options - 29

Selecione o component ALV / TABLE.

web dynpro - select options - 30

web dynpro - select options - 31

Salve e Ative.

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

web dynpro - select options - 32

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

web dynpro - select options - 33

Crie o método SELECT_OPTIONS e adicione o código abaixo:

Nesse trecho i_value_help_type if_wd_value_help_handler=>co_prefix_ovs ). definimos que o select opions irá usar o nosso OVS.

Devemos incluir no método modify view a chamada do select option:

Devemos também incluir o método ON_OVS que irá montar a ajuda de pesquisa.

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

web dynpro - select options - 34

Selecione o component SELECT_OPTIONS.

web dynpro - select options - 35

web dynpro - select options - 36

Adicione o método ON_OVS Type 1

Selecione o componente SELECT_OPTIONS -> ON_OVS.

web dynpro - select options - 37

Deverá ficar assim:

web dynpro - select options - 38

Criando aplicação Web Dynpro

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

web dynpro - select options - 39

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 - select options - 40

 

 

Resultado: Web Dynpro com select-options

web dynpro - select options - 41 web dynpro - select options - 42 web dynpro - select options - 43 web dynpro - select options - 44

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

%d bloggers like this: