Financial Management Blogs by Members
Dive into a treasure trove of SAP financial management wisdom shared by a vibrant community of bloggers. Submit a blog post of your own to share knowledge.
cancel
Showing results for 
Search instead for 
Did you mean: 

Recentemente disponibilizei uma página Web com uma visão hierárquica do layout do eSocial, que pode ser acessada via http://sasainet.com/esocial

A página é bem simples, basta selecionar uma opção no DropdownBox e a tabela será alimentada com a visão hierárquica do layout selecionado.

O interessante vem agora... essa página foi criada utilizando openUI5 (a.k.a. SAPUI5), utilizando um projeto MVC, que lê uma planilha do Google Spreadsheet no formato JSON e define dinamicamente a hierarquia dos campos. Ou seja, tudo que for atualizado na planilha do Google, refletirá instantaneamente na página Web.

A planilha utilizada foi criada por renan.wao e disponibilizada nos comentários do blog SAP e-Social (SPED EFD Social).

Importei a planilha no Google Docs, e fiz algumas adaptações. Na primeira sheet, chamada "Eventos", criei duas colunas, uma com o título para ser exibido no DropdownBox e outra com o SheetCode correspondente a cada sheet da planilha, que contêm o layout de cada evento, conforme imagem abaixo:

O "sheet code" foi obtido através do acesso via JSON a lista de worksheets, através da URL https://spreadsheets.google.com/feeds/worksheets/0AtLMr7Smt4TDdHA4T1NaVDE1SURLeERZRUtDZHpyZkE/public....

O padrão para acesso a cada sheet é: "https://spreadsheets.google.com/feeds/list/0AtLMr7Smt4TDdHA4T1NaVDE1SURLeERZRUtDZHpyZkE/<SHEET_CODE>/public/values?alt=json".


Finalmente vamos ao código.


No Eclipse, criei um novo Application Project do tipo SAPUI5 Application Development. Criei uma view inicial do tipo JavaScript. Com isso, serão criados três arquivos automaticamente, um é o index.html, outro é o <view_name>.controller.js e finalmente o <view_name>.view.js. Todo o código foi feito no <view_name>.view.js.


Primeiro, a definição do Titulo e do Toolbar para a Tabela:


  // Define table title
  var oTitle = new sap.ui.commons.TextView("tableTitle", {text: "[BETA] Layouts eSocial MOS v.1.0"});
  // Create Toolbar
  var oToolbar = new sap.ui.commons.Toolbar({
       visible : true,
       width : "auto",
       design : sap.ui.commons.ToolbarDesign.Standard,
  });

Depois a criação do DropdownBox, que será inserido no Toolbar. Antes de criar o DropdownBox, foi definido um JSONModel, contendo o retorno da URL correspondente a lista de eventos, existente na aba "Eventos" da planilha, conforme explicado acima.


  // Event list
  var urlEventList = "https://spreadsheets.google.com/feeds/list/0AtLMr7Smt4TDdHA4T1NaVDE1SURLeERZRUtDZHpyZkE/od6/public/values?alt=json";
  var jsonEventList = new sap.ui.model.json.JSONModel(urlEventList);
  // Create a DropdownBox
  jsonEventList.attachRequestCompleted(function(){
       // Create DropdownBox
       var oDropdownBox = new sap.ui.commons.DropdownBox({
            id: "db_eventList",
            tooltip: "Eventos",
            width: "35%",
            selectedKey: "0",
            change: function(){ }
       });
       oDropdownBox.setModel(jsonEventList);
       var oItemTemplate = new sap.ui.core.ListItem({text:"{gsx$combo/$t}", key:"{gsx$sheetcode/$t}"});
       oDropdownBox.bindItems("/feed/entry", oItemTemplate);
       oToolbar.addItem(oDropdownBox);
       oTable.setBusy(false);
  });

 

Note que o DropdownBox é definido depois que o JSONModel é finalmente carregado, isso é feito pelo event-handler jsonEventList.attachRequestCompleted.

O evento Change será definido mais adiante.


O text do DropdownBox e o key, são alimentados pelos campos gsx$combo/$t e gsx$sheetcode/$t respectivamente. Esses nomes são os retornados pela URL, conforme imagem abaixo:

Com isso, já temos nosso DropdownBox preenchido com a lista dos Eventos e adicionado ao Toolbar (oToolbar.addItem(oDropdownBox);).

A tabela (que será definida em seguida), também fica disponível, através do método oTable.setBusy(false);.

Agora, a definição da TreeTable e das colunas:


var oTable = new sap.ui.table.TreeTable({
     allowColumnReordering: true,
     expandFirstLevel: true,
     title: oTitle,
     toolbar: oToolbar
});
// Add columns
oTable.addColumn(new sap.ui.table.Column({
     width: "300px",
     label: new sap.ui.commons.Label({text: "Campo"}),
     template: new sap.ui.commons.TextView({text:"{campo}"}),
     sortProperty: "Campo",
}));
oTable.addColumn(new sap.ui.table.Column({
     width: "40px",
     label: new sap.ui.commons.Label({text: "Tag"}),
     template: new sap.ui.commons.TextView({text:"{tag}"}),
     sortProperty: "Tag",
}));
oTable.addColumn(new sap.ui.table.Column({
     width: "60px",
     label: new sap.ui.commons.Label({text: "Ocorrência"}),
     template: new sap.ui.commons.TextView({text:"{ocorrencia}"}),
     sortProperty: "Ocorrência",
}));
oTable.addColumn(new sap.ui.table.Column({
     width: "40px",
     label: new sap.ui.commons.Label({text: "Tipo"}),
     template: new sap.ui.commons.TextView({text:"{tipo}"}),
     sortProperty: "Tipo",
     }));
oTable.addColumn(new sap.ui.table.Column({
     width: "40px",
     label: new sap.ui.commons.Label({text: "Tamanho"}),
     template: new sap.ui.commons.TextView({text:"{tamanho}"}),
     sortProperty: "Tamanho",
}));
oTable.addColumn(new sap.ui.table.Column({
     width: "40px",
     label: new sap.ui.commons.Label({text: "Decimal"}),
     template: new sap.ui.commons.TextView({text:"{decimal}"}),
     sortProperty: "Decimal",
}));
oTable.addColumn(new sap.ui.table.Column({
     label: new sap.ui.commons.Label({text: "Detalhe"}),
     template: new sap.ui.commons.TextView({text:"{detalhe}"}),
     sortProperty: "Detalhe",
}));
// Set table as busy
oTable.setBusy(true);

A tabela é definida como indisponível, através do método oTable.setBusy(true);. Isso porque ela ficará disponível somente após o DropdownBox estiver sido carregado.

Ok, agora temos a TreeTable definida, o DropdownBox contendo a lista dos Eventos, é preciso agora preencher a TreeTable depois que um Evento for selecionado no DropdownBox. Para isso, basta definir o evento Change do objeto oDropdownBox, segue código abaixo:


change: function(){
     oTable.setBusy(true);
     var sheetCode = oDropdownBox.getSelectedKey();
     var url = "https://spreadsheets.google.com/feeds/list/0AtLMr7Smt4TDdHA4T1NaVDE1SURLeERZRUtDZHpyZkE/" + sheetCode + "/public/values?alt=json";
     var json = new sap.ui.model.json.JSONModel(url);
     json.attachRequestCompleted(function(){
          var nLength = json.getData().feed.entry.length;
          var oData = json.getData().feed.entry;
          var oDataTree = Array;
          ...
     }

Através da key do DropdownBox, é possível montar dinamicamente a URL da sheet correspondente da planilha e carregá-la em um JSONModel.

A lógica para montar a hierarquia deve ser criada no event-handler attachRequestCompleted, para que a tabela seja carregada após o JSONModel ter sido carregado completamente.

Eu criei um novo Array, com a visão hierárquica dos campos, no formato JSON. Os campos do JSON são os utilizados na definição das colunas da TreeTable.

Depois disso, basta criar um novo JSONModel, definir o Array como os dados do modelo e atribuí-lo a tabela. Redefini também a quantidade de linhas visiveis na tabela com a mesma quantidade de campos do layout (oTable.setVisibleRowCount(nLength);).


     var oModel = new sap.ui.model.json.JSONModel();
     oModel.setData(oDataTree);
     oTable.setModel(oModel);
     oTable.bindRows("/");
     oTable.setVisibleRowCount(nLength);
     oTable.setBusy(false);

Finalmente é só retornar a TreeTable e executar o arquivo index.html para teste.


return oTable;

Essa é minha pequena contribuição para a comunidade SAP em português sobre openUI5.

8 Comments