`
JerryWang_SAP
  • 浏览: 1025965 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

如何在SAP Fiori应用里使用React component

阅读更多

在MyApp.jsx里引入UI5针对React框架的开发的Card web Component:

 

代码如下:

import React from 'react'
import { Card } from "@ui5/webcomponents-react";

export function MyApp() {
  return (
    <div>
      <Card heading="Card"></Card>
    </div>
  );
}

然后和正常的React应用一样,在App.js里引入我们自定义的Component:

 

代码如下:

import React from "react";
import { MyApp } from "./MyApp";
import { ThemeProvider } from "@ui5/webcomponents-react/lib/ThemeProvider";

function App() {
  return (
    <ThemeProvider withToastContainer>
      <MyApp />
    </ThemeProvider>
  );
}

export default App;

 

这个Card Component是SAP发布的针对React框架的标准组件。

 

可以在这个链接里看到明细:

 

Storybook

 

 

开发完毕后,npm start可以看到效果了:

0
1
分享到:
评论

相关推荐

    SAP Fiori---快速指南 共82页 2018年编著 word文档

    SAP Fiori 应用程序主要分为三类:事务应用程序、情况说明书、分析应用程序。 1. **事务应用程序** - 功能:执行具体的业务操作,如请假申请、采购订单处理等。 - 特点:适合在 SAP HANA 数据库上运行,但也可以在...

    sapFiori配置手册[整理].pdf

    在SAP Fiori的配置中,需要激活SAP Fiori Launchpad。激活SAP Fiori Launchpad可以通过SAP NetWeaver-&gt;Gateway-&gt;OData Channel-&gt;Administration-&gt;General Settings-&gt;Activate OData Services来实现。 本手册涵盖了...

    SAP Fiori APP 应用快速实施解决办法

    本文档将详细介绍如何通过手动配置步骤或使用预定义任务列表来实现SAP Fiori应用程序的快速部署。此外,还将针对SAP Fiori的三种应用类型——交易应用程序、分析应用程序以及实况报告报表(Fact Sheets)——提供...

    SAP Fiori 2.0开发指南

    - **启用自动 SAP Fiori 2.0 标题栏适应**: 通过在应用程序描述符中进行简单配置,即可实现标题栏的自动适配。 - **编写符合 SAP Fiori 2.0 规范的应用程序**: 开发者需要遵循一套新的设计准则来确保应用程序的...

    SAP官方Fiori使用说明文件

    它是 SAP Fiori 应用在移动和桌面设备上的入口点。 快速启动板的组成部分 快速启动板由外壳栏、Me 区域、通知区域和主页组成。外壳栏包含切换按钮、主页图标、返回图标和全局搜索。Me 区域位于快速启动板左侧屏幕...

    SAP fiori 简易开发流程

    SAP fiori的简易开发过程指南,从开发者角度出发,分后面ODATA开发环境和前端SAP UI5环境搭建,以及发布进行了讲解

    提高开发SAPFiori应用程序的工作效率.zip

    在开发SAP Fiori应用程序的过程中,提升工作效率是每个开发者关注的重点。SAP Fiori作为SAP公司的现代化用户体验设计框架,提供了丰富的工具和技术来优化开发流程。以下是一些关键的知识点,可以帮助你更高效地开发...

    SAP FIORI OVERVIEW

    SAP Fiori是一种创新的用户界面(UI)设计和交付...综上所述,SAP Fiori是企业IT领域的一个重要里程碑,它通过重新定义用户界面,使得企业应用程序变得更加用户友好,无论是在功能上还是在用户体验上都实现了质的飞跃。

    SAP-Fiori-快速指南

    SAP Fiori 应用程序超过300个,每个都经过精心设计,以确保用户能够快速、轻松地完成工作,无论他们是在桌面、智能手机还是平板电脑上使用。 SAP Fiori 的设计灵感来源于意大利语中的“花”,象征着它的多样性与...

    SAP Fiori 最新现金流案例

    在这个最新的现金流案例中,我们看到SAP Fiori如何帮助用户实时监控和管理公司的财务状况。 测试用例关键点在于验证“现金位置”(Cash Position)瓷砖在SAP Fiori Launchpad中的信息显示是否准确。这个测试用例旨在...

    SAP Fiori Elements Development UX 403

    在本课程中,参与者将学习如何使用 SAP Fiori 元素开发工具来构建高质量的用户体验。课程内容涵盖了 SAP Fiori 元素开发的基本概念、发展历史、设计原则、开发技术、测试方法等方面。此外,本课程还将讨论 SAP Fiori...

    SAP Fiori overview

    SAP 计划将所有应用和 UI 技术统一到 SAP Fiori UX 方向上,这意味着无论是在 HANA 平台上的应用、分析工具还是其他任何类型的 SAP 软件,都将采用统一的设计风格和技术框架。 #### 8. SAP Fiori 用户角色 SAP ...

    SAP Fiori(SAPUI5)简介

    在实际部署方面,SAP Fiori SCP(SAP Cloud Platform)是SAP提供的一种云服务解决方案,它让企业可以构建、扩展和运行各种云应用,包括SAP Fiori应用。此外,SAP Fiori还支持SAP Web Dynpro,这是一个基于Web的应用...

    SAP Fiori应用程序模型中的ABAP编程规范

    内容概要:该文件详细介绍了用于支持SAP Fiori应用开发的ABAP编程模型的关键要素及其应用场景。这涵盖了如何利用核心数据服务(CDS)定义丰富的语义模型以及OData协议的应用方法。主要内容包括如何将不同组件集成到...

    SAP Fiori - Adding a Custom Workflow in 6 Steps

    随着企业应用软件的发展,工作流作为业务流程自动化的重要组成部分,在SAP Fiori中也扮演了关键角色。SAP Fiori Approve Requests是SAP Fiori众多应用场景中的一个,主要提供了一个用于审批请求的应用。本文将详细...

    SAPFiori-快速指南.doc

    SAP Fiori 提供了多种设备应用程序,允许用户在不同的设备上使用 SAP Fiori 应用程序。 SAP Fiori 的优点包括:提高用户体验、提高工作效率、提高业务决策的速度和准确性等。SAP Fiori 的应用场景非常广泛,适用于...

    SAP Fiori 学习概要

    整个教程的目的是为了帮助开发者全面掌握SAP Fiori的应用开发,从基础设置到部署上线,从组件使用到性能优化,从实用技巧到未来趋势,无所不包。通过学习这些内容,开发者可以有效地运用SAP Fiori开发出高质量的企业...

    SAP Fiori 2.0 产品介绍

    **SAP Fiori 2.0** 是SAP SE在2016年推出的一款面向用户需求的企业软件解决方案,其核心设计理念是为用户提供简单、一致且令人愉悦的用户体验。在**第一页**中,我们可以看到SAP对设计思维的理解和应用,即通过将...

    SAP Fiori SAP Fiori SAP Fiori Architecture Architecture

    SAP Fiori SAP Fiori SAP Fiori Architecture Architecture Overview to Deep Overview to Deep Dive -with with focus on S/4 HANA focus on S/4 HANA

Global site tag (gtag.js) - Google Analytics