O SAP Web IDE possui um assistente de criação de projetos a partir de modelos, que facilita a criação rápida de novos aplicativos. Neste tutorial, você criará um aplicativo que lê informações de Ordens de Venda de uma fonte de dados OData e as exibe em um aplicativo da Web responsivo.
O que é um template
Por mais que cada empresa tenha seu ramo, dados e tarefas específicas, as atividades seguem um padrão: visualizar objetos de negócio em uma lista (ex:produtos, clientes, pedidos), acessar os detalhes de um objeto específico, modificar os dados, aprovar, reprovar, etc.
Os templates são aplicativos com layout e funcionalidades já construídas, cabendo ao programador adaptá-lo ao cenário da empresa. No SAP Web IDE, os templates seguem os conceitos do SAP Fiori Design Guidelines, que é um conjunto de regras de design para fornecer uma Experiência de Usuário inovadora em aplicativos empresariais.
Como criar app usando template
- Abra SAP Web IDE (clique aqui para aprender a configurá-lo), e na tela inicial clique em New Project From Template.
- Em Environment selecione Neo.
- Selecione SAP Fiori Master-Detail Application e clique em Next.
- Preencha nome, descrição e namespace, e clique em Next.
- Na aba Data Connection, em Source selecione Service Catalog. Escolha o sistema ES5 (clique aqui para aprender a cadastrar esse ambiente). em Services, filtre por "GWSAMPLE", e selecione o serviço que aparece no resultado. Clique em Next.
- Na aba Template Customization, é feita a relação entre os campos pré-definidos da tela e a fonte de dados. Do lado direito da lista de campos, há um mapa de localização dos campos na tela. Clique na imagem para abri-la em tamanho maior e conferir a localização de cada campo.
Preencha os campos conforme mostrado abaixo e clique em Finish.
CurrencyCode
Verifique que uma nova pasta Ordens foi adicionada na sua área de trabalho, contendo as pastas e arquivos do aplicativo inicial.
Executando o aplicativo
Clique com o botão direito no arquivo webapp/index.html e escolha Run à Run as à Web Application para executar o aplicativo.
Uma prévia do aplicativo é aberta em uma janela separada para fins de teste. Aguarde o carregamento, a primeira execução pode demorar alguns segundos a mais.
Esta é a versão inicial fornecida pelo modelo.
Você pode clicar em um pedido para ver os itens de linha do pedido na página de detalhes.
Repare que este layout é dinâmico, oferecendo opções para alterá-lo. Confira clicando nesses botões.
Bons estudos e nos vemos no próximo artigo!
O que é um template
Por mais que cada empresa tenha seu ramo, dados e tarefas específicas, as atividades seguem um padrão: visualizar objetos de negócio em uma lista (ex:produtos, clientes, pedidos), acessar os detalhes de um objeto específico, modificar os dados, aprovar, reprovar, etc.
Os templates são aplicativos com layout e funcionalidades já construídas, cabendo ao programador adaptá-lo ao cenário da empresa. No SAP Web IDE, os templates seguem os conceitos do SAP Fiori Design Guidelines, que é um conjunto de regras de design para fornecer uma Experiência de Usuário inovadora em aplicativos empresariais.
Como criar app usando template
- Abra SAP Web IDE (clique aqui para aprender a configurá-lo), e na tela inicial clique em New Project From Template.
- Em Environment selecione Neo.
- Selecione SAP Fiori Master-Detail Application e clique em Next.
- Preencha nome, descrição e namespace, e clique em Next.
- Na aba Data Connection, em Source selecione Service Catalog. Escolha o sistema ES5 (clique aqui para aprender a cadastrar esse ambiente). em Services, filtre por "GWSAMPLE", e selecione o serviço que aparece no resultado. Clique em Next.
- Na aba Template Customization, é feita a relação entre os campos pré-definidos da tela e a fonte de dados. Do lado direito da lista de campos, há um mapa de localização dos campos na tela. Clique na imagem para abri-la em tamanho maior e conferir a localização de cada campo.
Preencha os campos conforme mostrado abaixo e clique em Finish.
App Type:
Standalone App
Standalone App
Object Collection:
SalesOrderSet
SalesOrderSet
Object Collection ID:
SalesOrderID
SalesOrderID
Object Title:
CustomerName
CustomerName
Object Numeric Attribute:
NetAmount
NetAmount
Object Unit of Measure:
CurrencyCode
CurrencyCode
Line Item Collection:
ToLineItems
ToLineItems
Line Item Collection ID:
ItemPosition
ItemPosition
Line Item Title:
ProductID
ProductID
Line Item Numeric Attribute:
NetAmount
Line Item Unit of
Measure:NetAmount
CurrencyCode
Verifique que uma nova pasta Ordens foi adicionada na sua área de trabalho, contendo as pastas e arquivos do aplicativo inicial.
Executando o aplicativo
Clique com o botão direito no arquivo webapp/index.html e escolha Run à Run as à Web Application para executar o aplicativo.
Uma prévia do aplicativo é aberta em uma janela separada para fins de teste. Aguarde o carregamento, a primeira execução pode demorar alguns segundos a mais.
Esta é a versão inicial fornecida pelo modelo.
Você pode clicar em um pedido para ver os itens de linha do pedido na página de detalhes.
Repare que este layout é dinâmico, oferecendo opções para alterá-lo. Confira clicando nesses botões.
Bons estudos e nos vemos no próximo artigo!
Comentários
Postar um comentário