Um ALV simples na tela, utilizando a tabela SCARR (Linhas Aéreas).
Então, vamos lá.
Ah, antes que me esqueça, sempre grave os procedimentos entre um passo e outro, ok?
1º Passo - Criar o componente Web Dynpro
Acessar a transação SE80;
Escolher a opção Web Dynpro Comp./Intf.;
Dar o nome ao Web Dynpro (Z_ABAP_LAB);
Confirmar a criação do novo objeto;
Colocar a descrição que quiser;
Na janela colocar o W_MAIN (W = Janela/Window, MAIN = Principal);
Na visão colocar o V_MAIN (V = Visão/View, MAIN = Principal);
Gravar em uma request ou como objeto local (irei gravar como objeto local pois é apenas um tutorial).
2º Passo - Criar uma View Container
Duplo-clique em V_MAIN para abrir a view e deixar em modo de alteração.
Clicar com o botão direito em ROOTUIELEMENTCONTAINER e selecionar "Insert Element".
No pop-up que abrir colocar o ID que quiser (VC_ALV) e o Type será ViewContainerUIElement.
3º Passo - Criar o Nó do ALV
Agora vamos precisar criar um Nó que vamos utilizar para gerar o ALV com os campos que quisermos exibir.
Duplo-clique em COMPONENTCONTROLLER;
Botão direito em CONTEXT e seleciocar "Create>>Node";
No pop-up preencher com os seguintes dados:
Node Name será o nome do seu Nó (NODE_ALV);
Dictionary Strutucture é a estrutura que você utilizará como base (SCARR);
Cardinality é a cardinalidade de dados (0..n);
Clicar em "Add Attributes from Structure".
Selecionar as colunas que quiser para aparecer no ALV.
Tela do Context do COMPONENTCONTROLLER:
4º Passo - Popular o Nó utilizado pelo ALV com a View
Duplo-clique na V_MAIN;
Abrir a aba "Context";
Arrastar o NODE_ALV que está na coluna da direita para o CONTEXT da coluna da esquerda;
5º Passo - Atribuir o uso do componente ALV
Duplo-clique no objeto (Z_ABAP_LAB);
Em "Used Components" adicionar os seguintes dados:
Component Use será o nome que você dará ao seu componente (ALV_COMP);
Component é o nome do componente utilizado da SAP (SALV_WD_TABLE).
6º Passo - Atribuir o uso do componente à interface de controle
Duplo-clique em INTERFACECONTROLLER_USAGE.
Clicar no botão "Controller Usage";
Selecionar o COMPONENTCONTROLLER do seu Web Dynpro;
A tela ficará assim:
Arrastar o NODE_ALV, que está na coluna esquerda, para o nó DATA da coluna da direita.
Se fizer tudo certo o ícone DATA irá mudar para uma flecha que aponta para os dois lados.
7º Passo - Embutir o ALV no View Container
Duplo-clique em W_MAIN.
Na tela que abrir, expandir sua W_MAIN e a V_MAIN até aparecer o VC_ALV.
Clicar com o botão direito na VC_ALV e escolher a opção "Embed View";
No pop-up que abrir, clicar no Match-Code da "View to Be Embedded".
Selecionar o ALV_COMP em que a "View / Interface View" é igual a TABLE.
Dar ok no pop-up.
A tela ficará assim:
8º Passo - Codificar para popular o ALV
Duplo-clique em V_MAIN;
Na aba "Methods", duplo cliquem em WDDOINIT (Esse método seria o equivalente ao INITIALIZATION).
Adicionar o código fonte abaixo
METHOD wddoinit .
* Criar uma variável para acessar o NODE_ALV
DATA: node_alv TYPE REF TO if_wd_context_node,
* Criar uma tabela do tipo da estrutura do ALV
lt_scarr TYPE STANDARD TABLE OF if_v_main=>element_node_alv.
* Selecionar dados
SELECT *
FROM scarr
INTO TABLE lt_scarr.
* Vincular os dados selecionados ao Nó do ALV
node_alv = wd_context->get_child_node( name = 'NODE_ALV').
node_alv->bind_table( it_scarr ).
ENDMETHOD.
---Fim do código-fonte
9º Passo - Criar a aplicação e testar
Clicar com o botão direito no objeto (Z_ABAP_LAB);
Selecionar Create>>Web Dynpro Application;
No pop-up que abrir, colocar a descrição (essa descrição é o nome que irá aparecer na TAB do navegador).
Ativar o Web Dynpro inteiro;
Duplo-clique em Z_ABAP_LAB.
Clicar em testa ou F8.
Resultado no Browser:
Considerações:
Como podem ver o ALV trouxe os campo na order que escolhi e a coluna MANDT veio após.
Para esconder a(s) coluna(s) que quiser do ALV clique aqui para aprender.
Para ver um exemplo de ALV com Parameter na mesma tela clique aqui.
Para colocar um Select-Options na mesma tela e filtar os dados clique aqui.
Escolher a opção Web Dynpro Comp./Intf.;
Dar o nome ao Web Dynpro (Z_ABAP_LAB);
Confirmar a criação do novo objeto;
Colocar a descrição que quiser;
Na janela colocar o W_MAIN (W = Janela/Window, MAIN = Principal);
Na visão colocar o V_MAIN (V = Visão/View, MAIN = Principal);
Gravar em uma request ou como objeto local (irei gravar como objeto local pois é apenas um tutorial).
2º Passo - Criar uma View Container
Duplo-clique em V_MAIN para abrir a view e deixar em modo de alteração.
Clicar com o botão direito em ROOTUIELEMENTCONTAINER e selecionar "Insert Element".
No pop-up que abrir colocar o ID que quiser (VC_ALV) e o Type será ViewContainerUIElement.
3º Passo - Criar o Nó do ALV
Agora vamos precisar criar um Nó que vamos utilizar para gerar o ALV com os campos que quisermos exibir.
Duplo-clique em COMPONENTCONTROLLER;
Botão direito em CONTEXT e seleciocar "Create>>Node";
No pop-up preencher com os seguintes dados:
Node Name será o nome do seu Nó (NODE_ALV);
Dictionary Strutucture é a estrutura que você utilizará como base (SCARR);
Cardinality é a cardinalidade de dados (0..n);
Clicar em "Add Attributes from Structure".
Selecionar as colunas que quiser para aparecer no ALV.
Tela do Context do COMPONENTCONTROLLER:
4º Passo - Popular o Nó utilizado pelo ALV com a View
Duplo-clique na V_MAIN;
Abrir a aba "Context";
Arrastar o NODE_ALV que está na coluna da direita para o CONTEXT da coluna da esquerda;
5º Passo - Atribuir o uso do componente ALV
Duplo-clique no objeto (Z_ABAP_LAB);
Em "Used Components" adicionar os seguintes dados:
Component Use será o nome que você dará ao seu componente (ALV_COMP);
Component é o nome do componente utilizado da SAP (SALV_WD_TABLE).
6º Passo - Atribuir o uso do componente à interface de controle
Duplo-clique em INTERFACECONTROLLER_USAGE.
Clicar no botão "Controller Usage";
Selecionar o COMPONENTCONTROLLER do seu Web Dynpro;
A tela ficará assim:
Arrastar o NODE_ALV, que está na coluna esquerda, para o nó DATA da coluna da direita.
Se fizer tudo certo o ícone DATA irá mudar para uma flecha que aponta para os dois lados.
7º Passo - Embutir o ALV no View Container
Duplo-clique em W_MAIN.
Na tela que abrir, expandir sua W_MAIN e a V_MAIN até aparecer o VC_ALV.
Clicar com o botão direito na VC_ALV e escolher a opção "Embed View";
No pop-up que abrir, clicar no Match-Code da "View to Be Embedded".
Selecionar o ALV_COMP em que a "View / Interface View" é igual a TABLE.
Dar ok no pop-up.
A tela ficará assim:
8º Passo - Codificar para popular o ALV
Duplo-clique em V_MAIN;
Na aba "Methods", duplo cliquem em WDDOINIT (Esse método seria o equivalente ao INITIALIZATION).
Adicionar o código fonte abaixo
METHOD wddoinit .
* Criar uma variável para acessar o NODE_ALV
DATA: node_alv TYPE REF TO if_wd_context_node,
* Criar uma tabela do tipo da estrutura do ALV
lt_scarr TYPE STANDARD TABLE OF if_v_main=>element_node_alv.
* Selecionar dados
SELECT *
FROM scarr
INTO TABLE lt_scarr.
* Vincular os dados selecionados ao Nó do ALV
node_alv = wd_context->get_child_node( name = 'NODE_ALV').
node_alv->bind_table( it_scarr ).
ENDMETHOD.
---Fim do código-fonte
9º Passo - Criar a aplicação e testar
Clicar com o botão direito no objeto (Z_ABAP_LAB);
Selecionar Create>>Web Dynpro Application;
No pop-up que abrir, colocar a descrição (essa descrição é o nome que irá aparecer na TAB do navegador).
Ativar o Web Dynpro inteiro;
Duplo-clique em Z_ABAP_LAB.
Clicar em testa ou F8.
Resultado no Browser:
Considerações:
Como podem ver o ALV trouxe os campo na order que escolhi e a coluna MANDT veio após.
Para esconder a(s) coluna(s) que quiser do ALV clique aqui para aprender.
Para ver um exemplo de ALV com Parameter na mesma tela clique aqui.
Para colocar um Select-Options na mesma tela e filtar os dados clique aqui.
Nenhum comentário:
Postar um comentário