AULA 1

▪
É ser capaz de entender muito bem os fundamentos do Fiori e ser capaz de implementar
as funcionalidades técnicas.

▪
Atualmente o mercado ABAP está mudando, e o SAP Fiori é uma das maiores exigências
nas vagas. O profissional ABAP precisa ficar atualizado com as exigências do mercado
para alcançar uma boa colocação e conseguir as melhores oportunidades em bons
projetos de S/4HANA. Migrar sua carreira para o SAP Fiori e S/4HANA vai ajudar a
conseguir uma vaga melhor, uma promoção de cargo, um aumento salarial, entre muitas
oportunidades que podem e vão aparecer para quem está capacitado.

Apenas saber programar no ECC, que é o ERP antigo, já não te garante mais segurança
na sua carreira ABAP. E pior, pode realmente te oferecer o risco de se tornar obsoleto e
ser deixado de lado. Uma boa parte das empresas já estão migrando ou já migraram os
seus sistemas pra S/4HANA e necessitam de desenvolvedores ABAP que tenham
conhecimento em SAP FIORI.

Então, com tanta demanda e pouca capacitação,

o mercado está aberto para você!

REVOLUÇÃO DO SAP FIORI 1 MATERIAL DE APOIO AULA #1

INSTALANDO VISUAL STUDIO CODE

- Acesse o site https://code.visualstudio.com/download e faça download do vs code e instale.

- Acesse o site https://nodejs.org/en/download e faça download do node.js e instale.

REVOLUÇÃO DO SAP FIORI 2 MATERIAL DE APOIO AULA #1

- Abra o Visual Studio Code, clique no menu extensions

- Digite "Fiori" e instale o SAP Fiori tools extension pack e as outras extensões de Fiori que
aparecem

REVOLUÇÃO DO SAP FIORI 3 MATERIAL DE APOIO AULA #1

CRIAÇÃO DE APLICATIVO SAPUI5 FREESTYLE

Vamos criar um aplicativo SAPUI5 Freestyle em branco

Será utilizado o Visual Studio Code

Observação: antes de criar um aplicativo, abra uma pasta no explorador do VSCode. Seu
aplicativo será criado dentro desta pasta.

REVOLUÇÃO DO SAP FIORI 4 MATERIAL DE APOIO AULA #1

-Abra o Visual Studio Code, aperte F1

-Selecione Fiori: Open Application Generator

- Em Application Type, selecione SAPUI5 Freestyle

-Selecione floorplan SAPUI5 Application

- Clique em Next

REVOLUÇÃO DO SAP FIORI 5 MATERIAL DE APOIO AULA #1

-Em data source, selecione None

- Clique em next

- Informe o nome da View e clique em Next

REVOLUÇÃO DO SAP FIORI 6 MATERIAL DE APOIO AULA #1

- Em Project Attributes, preencha o module name e o título

- Em application namespace, coloque seu nome como exemplo

- Confirme a pasta que o projeto vai ser salvo

- Clique em Finish e aguarde

REVOLUÇÃO DO SAP FIORI 7 MATERIAL DE APOIO AULA #1

EXECUÇÃO DE APLICATIVO SAPUI5 FREESTYLE

- Para executar um aplicativo, clique em Executar e Depurar, e depois em Iniciar

O aplicativo será aberto em uma nova aba. Por enquanto não tem nada na view

REVOLUÇÃO DO SAP FIORI 8 MATERIAL DE APOIO AULA #1

ADIÇÃO DE CAMPOS DE PESQUISA NA VIEW

No momento nossa view está vazia. Vamos adicionar uma barra de abas, e nas abas vai ter um
campo de busca e uma lista.

- Abra o arquivo Main.view.xml que está na pasta view, e adicione o seguinte código:

Atenção:

Linha verde significa “adicionar linha”

Linha vermelha significa “remover linha”

<mvc:View controllerName="revolucao.controller.Main"
xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
xmlns="sap.m">
<Page id="page" title="{i18n>title}">
</content>
<content>
<FlexBox
justifyContent="Center">

<Input/>
<Button text="Buscar" press="onPressBuscar"/>

</content>
</Page>
</mvc:View>

Atualize a tela do aplicativo e veja o resultado.

REVOLUÇÃO DO SAP FIORI 9 MATERIAL DE APOIO AULA #1

CRIAÇÃO DE EVENTO PARA BOTÃO DE PESQUISA

A lógica do programa é escrita em blocos chamado eventos

Estes eventos são acionados ao interagir com os campos da tela. Vamos implementar o evento
acionado ao apertar o botão na tela

- Abra o arquivo Main.controller.js, e digite o seguinte código:

sap.ui.define([
"sap/ui/core/mvc/Controller"
/**
* @param {typeof sap.ui.core.mvc.Controller} Controller
*/
function (Controller ) {
"use strict";

return Controller.extend("revolucao.controller.Main", {
onInit: function () {

},
onPressBuscar: function(){
alert("começou a revolução do SAP Fiori!!");
}

});
});

Atualize a tela do aplicativo e veja o resultado.

REVOLUÇÃO DO SAP FIORI 10 MATERIAL DE APOIO AULA #1