Bacharel em Sistemas de Informação

pela EACH/USP

ABAP | Fiori | UI5 | HANA | CP

Escritor do site abap101.com

Instrutor da

Do Protótipo a Implementação

Fiori

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

• Não tem visões
• Não tem controllers
• Tem modelo(s)
• Modelos oData
  • Vocabulário UI
  • Annotations
• Exemplo de Fiori Element
  • Não disponível no OpenUI5 :-(

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

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

Fiori Overview Pages

Do Protótipo a Implementação