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 .