Introduction to the use of SAP Fiori application index tool and SAP Fiori tools

Fiori Application index (Fiori Application Reference) seeing the name of a thing one thinks of its function , This is a SAP official Released a Fiori Apply search tools , All standards issued Fiori Application details can be found in this tool .

As of the time of writing this article , This website shows that it already exists 11949 individual Fiori The standard applies ：

2015 year Fiori 1.0 Time ,UI Style is called Blue Crystall, At that time, the author was still SAP From Chengdu Research Institute CRM Fiori Development team work , We took it from our Indian colleagues 8 individual CRM Fiori application , And carry out the next continuous development .

How to Fiori Use the index to find them ？
Click on the top left SAP Fiori apps for SAP Business Suite：

Then select according to Application Component To filter ：

This Component Customers or Partners, In implementation and use Fiori When applied , If problems are found , to SAP newspaper incident It needs to be filled in Component Field .

such as Component CRM-FIO-BTX-OPP There is a Fiori application , namely My Opportunities:

You can see its details here , For example, the backstage needs at least CRM EHP3, The application type is Transactional, Support any DB, In the Desktop and Tablet Visit ,App ID by F0012：

All the others CRM Fiori Applications can also be found here ：

As mentioned above 8 individual CRM Fiori application , Its source code is the work of Indian colleagues and authors SAP The developers of Chengdu Research Institute wrote it line by line . We said Fiori It is not a specific front-end technology or programming language , It's a design language , Represents a kind of UI Design style , In fact, except for CRM Fiori That's pure UI5 Native development , There are also the following three schemes ：

(1) SAPGUI It can be done by SAP ITS(Internet Transaction Server) Used in the browser , For details, please refer to the article published by the author before ： I used it in those years SAP IDE. Again , Use SAP ITS Run... In a browser SAPGUI Those traditional transaction codes implemented , adopt SAP Interaction designers and UI Efforts of framework development engineers , It can also ensure that when users use these traditional transaction codes in the browser , Feel and use UI5 Originally developed Fiori Application is as smooth and easy to operate user experience .

(2) use SAP UI5 Other than technology UI Development technology , such as WebDynpro,WebClient UI Developed Web application , adopt SAP Interaction designers and UI Used by framework development engineers Visual Harmonization, It can also make these Web The user experience of the app , Can achieve and Fiori The effect of native application is comparable .

(3) use SAP S/4HANA CDS view Add a lot of comments (annotation) Metadata driven development , Now? SAP Officially, this development method is called Fiori Elements.

For end users , No matter one Fiori Which of the above four methods is used to develop the application , There is no difference in the use experience . let me put it another way , These four development methods get Fiori application , The implementation details are completely transparent to users .

For implementation Fiori For the technicians of , If it is necessary to go deep into these technical implementation details , Can be in Fiori Application index encyclopedia , according to Application Type Field to filter .

use WebClient UI Technically realized Fiori The only application is 119 individual , It's just... Of the total 1% about .

It includes the author's previous articles Hello World, S/4HANA for Customer Management 1.0 Mentioned in tradition SAP CRM Used to create service orders in WebClient UI application , Now through Visual Harmonization, Joined the S/4HANA Fiori Application family .

S/4HANA Create service orders in ID by TBT116MCR：

In transaction code CRMC_UI_NBLINKS You can find the corresponding WebUI component by BT116M_SRVO:

Help document address ：https://help.sap.com/viewer/product/SAP_FIORI_tools/Latest/en-US

except Fiori Application Reference outside ,SAP It also provides many functions to improve the use SAP Fiori Elements perhaps SAPUI5 Freestyle method development SAP Fiori Application efficiency .

SAP Fiori Tools and SAP Fiori Elements Together, it reduces development time 、 Maintenance cost , And uses metadata driven UI The advantages of .
SAP Fiori Tools include the following extensions ：

• Wizard for initial application creation .
• Service modeler for viewing the data model .
• Used to maintain comments XML And form based editors ( Limited to SAP Fiori Elements）
• Application page structure and configuration SAPUI5 The ability to set flexibility ( Limited to SAP Fiori Elements）
• Guided development for implementing functions ( Limited to SAP Fiori Elements)

If the Visual Studio Code As SAP UI5 development tool , We can install one called SAP Fiori Tools -Extension Pack An extension of , To install SAP Fiori Tools：

More specifically Visual Studio Code To build SAP UI5 The steps of the local development environment , Please refer to my article ：SAP UI5 The construction of local development environment .

This tool also has a command line interface ,Command Line Interface Abbreviation for CLI.

npm The warehouse address is as follows ：https://www.npmjs.com/package/@sap/ux-ui5-tooling

SAP Fiori Tools - UI5 Tooling Contains a series of commands that can be used with ui5 serve Custom middleware used together , And can be used with commands ui5 build Custom tasks used together .

Besides , The module discloses fiori This named line , for example fiori run The order is ui5 serve The wrapper for the command , Some additional parameters and fiori add deploy-config and fiori add flp-config To expand existing projects .

If you run the command line locally npm run deploy Then something went wrong ：

fiori is not recognized as an internal or external command

Check SAP UI5 In the project package.json In the file dependencies, See if... Is defined Fiori Tools CLI Corresponding dependence ：

"@sap/ux-ui5-tooling": "1.0.10"

Run after adding npm install, then fiori add deploy-config, Encountered a new error message ：

Error: Cannot find module ‘@ui5/fs’

It will be “@ui5/fs”: “2.0.1” Add to devDependencies Area ：

And then I saw Fiori tools CLI A reminder of , explain Fiori Tools CLI Already available ：

summary

This article in turn shares Fiori Application Reference and Fiori Tools These two practical tools play an important role in the author's practical work .