Skip to Content

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.

/wp-content/uploads/2014/01/dropdownbox_355957.png

/wp-content/uploads/2014/01/tabletree_355973.png

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 William Alves de Oliveira 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:

Eventos.png

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/basic?alt=json.

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:

/wp-content/uploads/2014/01/fields_356526.png

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.

To report this post you need to login first.

8 Comments

You must be Logged on to comment or reply to a post.

    1. Thiago Sasai Post author

      Pode ser alguma restrição para execução de JavaScript nas configurações do IE8. Vou fazer alguns testes no IE8 para ver se identifico a configuração ideal.

      (0) 

Leave a Reply