https://slides.com/fabiopagoti/sitcps2018/

Bacharel em Sistemas de Informação

pela EACH/USP

 

ABAP | Fiori | UI5 | HANA | CP

 

Escritor do site abap101.com

 

Instrutor da

verview

Do Protótipo a Implementação

Fiori

pages

Exemplo de app "OVP"

Https://github.com/jasper07/Teched17

Antes de usar tentar...

  • Específicas do Fiori 2.0
  • BEM limitadas nas versões ~1.36
  • Mais estável na versão 1.44+
  • Meio de campo entre app analítica e transacional

Características especiais

Prototipando uma app OVP

...no SAP BUILD...

que está fora do ar neste exato momento

Criando o Projeto

Tipos de Cards

Adicionando Cards

Modelagem oData

Data Binding

30 min depois...

Resultado

Código UI5

{

“sap.app”: { },
“Sap.ui”: {},
“Sap.ui5”: {}, 
"sap.ovp": {
    “cards”: {
        // configurações globais
	“card01”: { 
   	    "template": “sap.ovp.cards.list”,
	    “settings”: {
	        “title”: “Acidentados”
            }
        }
    }
}

}

Exemplo de Card

"sap.ovp": {
    ...
    "disableTableCardFlexibility": false,
    ...
    "card02": {
	"model": "salesOrder",
	"template": "sap.ovp.cards.table",
	"settings": {
    	   "title": "Sales Orders With Analytical Header",
       	   "subTitle": "Sales Orders With Analytical Header",
           "listFlavor": "bar",
    	   "listType": "extended",
    	   "entitySet": "SalesOrderSet",
           "dataPointAnnotationPath": 
                "com.sap.vocabularies.UI.v1.DataPoint#line_without_trend",
    	   "selectionAnnotationPath": 
                "com.sap.vocabularies.UI.v1.SelectionVariant#line1",
    	   "presentationAnnotationPath": 
                "com.sap.vocabularies.UI.v1.PresentationVariant#line"
	  }
    },
      ...
  }
}

Origem dos Annotations

  • Serviços criados via SEGW
    • Incorporado no projeto
      • Criados usando classes MPC (Model Provider Class)
    • Projeto segregado com anotações 
      • Criados usando classes APC (Annotation Provider Class)
      • Transação /IWBEP/REG_VOCAN
  • CDS Annotations do Vocabulário UI
    • Criados automaticamente via SADL
  • Arquivos .xml dentro da aplicação UI5
    • Sobrescreve annotations anteriores
    • Criados via Annotation Modeler na Web IDE
    • Modo recomendado para fazer extensões 

Annotations na SEGW

Vantagens

Flexibilidade pela API disponível no Gateway

 

Oferece UI para gerar código nas classes APC e MPC

 

Permite criar seus próprios vocabulários 

 

Independente da Web IDE / SAP Cloud / UI5

Desvantagens

Método trabalhoso

 

Suporte limitadíssimo para oData v4

 

SEGW não é mais atualizada com novas funcionalidades

 

OSS Notes, dumps...

SEGW

Annotations via CDS

@AbapCatalog.sqlViewName: 'ZVc_Te_Flight'
@EndUserText.label: 'Flight consumption view'
@OData.publish: true 

@UI.headerInfo: { 
  title: { value: 'CarrierName'  },
  typeName: 'Flight',
  typeNamePlural: 'Flights', 
  imageUrl: 'logo' 
 }  

define view Zc_Te_Flight as select from Zi_Te_Flight 
{

    @UI.selectionField.position: 10
    @UI.lineItem: [{ position:10},{position:10,qualifier:'Tab1'}]
    @Consumption.valueHelp: '_Carrier'
    key CarrierId, 

    @UI.selectionField.position: 20
    @UI.lineItem: [{ position:10},{position:10,qualifier:'Tab1'}]
    key ConnectionId,

    @UI.selectionField.position: 30
    @UI.lineItem: [{ position:10},{position:10,qualifier:'Tab1'}]
    @UI.fieldGroup:[{qualifier:'DateTime',groupLabel:'Date',position:10}]
    key FlightDate,

}

Vantagens

Um artefato só 

 

Permite múltiplas annotations para cada coluna

 

Recursos cada vez melhores

 

SAP está investindo

Desvantagens

Não permite criar vocabulários

 

NetWeaver impõe limitações (7.50 é muito limitado) 

 

Como cada visão é um serviço, UI5 tem que ligar com múltiplos modelos 

 

Não tem classe MPC

CDS

Annotation Modeler (Web IDE) 

Vantagens

Front end se faz no front end

 

Recursos cada vez melhores

 

Maioria dos exemplos está neste formato

 

Não depende limitado pelo NetWeaver 

Desvantagens

Não permite criar vocabulários (ainda)

 

Usabilidade da ferramenta não está ideal

 

Web IDE Local não tem um suporte semelhante a versão cloud

Annotation Modeler

Considerações Finais

  • A tendência é que fique cada vez mais fácil e rápido criar OVP
  • Uma mistura de skills é altamente recomendada
    • Mesmo com quase nenhum código UI5, é fundamental conhecer (para debugar internamente a raiz dos problemas)
  • Documentação está longe do ideia e está distribuída em fontes diferentes
    • mas leia tudo antes de começar!
  • Camada de personalização do Fiori tem especifidades para OVP
  • Trabalhar com filtros pode ser muito torturante - não menospreze este esforço

brigado

Fiori Overview Pages

Do Protótipo a Implementação

Fiori Overview Pages - Do protótipo a implementação

By Fabio Luiz Esperati Pagoti

Fiori Overview Pages - Do protótipo a implementação

Palestra sobre Fiori Overview Pages apresentada durante o SAP Inside Track Campinas 2018, realizado na UNISAL

  • 1,423