A set of step-by-step learning tutorials for SAP ui5 beginners

Tutorial directory

• Establishment of SAP ui5 local development environment
• One of SAP ui5 application development tutorials: Hello World
• SAP ui5 application development tutorial 2: bootstrap of SAP ui5 boot process
• SAP ui5 application development tutorial 3: start touching the first SAP ui5 control
• SAP ui5 Application Development Tutorial 4: XML view
• SAP ui5 application development tutorial 5: a preliminary study of view controller
• SAP ui5 application development tutorial 6 – understand the module concept of SAP ui5
• SAP ui5 application development tutorial 7 – JSON model
• SAP ui5 application development tutorial 8 – Multilingual Support
• SAP ui5 Application Development Tutorial 9 – create the first component
• SAP ui5 application development tutorial 10 – what is the descriptor of SAP ui5 application
• SAP ui5 application development tutorial 11: SAP ui5 container controls page and panel
• SAP ui5 application development tutorial 12 – further beautify the UI with CSS classes
• SAP ui5 application development tutorial 13 – how to add custom CSS classes
• SAP ui5 application development tutorial 14 – how to use embedded views
• SAP ui5 application development tutorial 15 – how to use dialog boxes and fragments
• SAP ui5 application development tutorial 16 – use of Icon
• SAP ui5 application development tutorial 17 – use of aggregate binding in ui5 composite control
• SAP ui5 application development tutorial 18 – special symbols in SAP ui5 data binding syntax, and detailed explanation of absolute binding and relative binding concepts
• SAP ui5 application development tutorial 19 – SAP ui5 data types and complex data binding
• SAP ui5 application development tutorial 20 – explanation of expression binding usage of SAP ui5
• SAP ui5 application development tutorial 21 – Custom formatter of SAP ui5
• SAP ui5 application development tutorial 22 – development and use of filter
• SAP ui5 application development tutorial 23 – sorting sort and grouping group of list controls
• SAP ui5 application development tutorial 24 – how to use OData data model
• SAP ui5 application development tutorial 25 – using proxy server to solve the cross domain problem of SAP ui5 application accessing remote OData service
• 26 of SAP ui5 application development tutorial – detailed explanation of the use steps of OData service with mock server
• Tutorial 27 of SAP ui5 application development – Introduction to quNit, a unit testing tool for SAP ui5 applications
• 28 of SAP ui5 application development tutorial – Introduction to the integration test tool OPA of SAP ui5 application
• SAP ui5 application development tutorial 29 – Introduction to routing and navigation functions of SAP ui5
• SAP ui5 application development tutorial 30 – parameter transfer in the routing process of SAP ui5
• SAP ui5 application development tutorial 31 – routing history and routing back and history of SAP ui5
• SAP ui5 application development tutorial 32 – how to create a custom SAP ui5 control
• Part 33 of SAP ui5 application development tutorial – responsiveness of SAP ui5 applications
• Tutorial 34 of SAP ui5 application development – device adaptation of SAP ui5 application based on device type
• SAP ui5 application development tutorial 35 – how to deploy locally developed SAP ui5 applications to ABAP server
• Tutorial for developers to use the UI CSS tab of SAP chrome 5
• SAP ui5 application development tutorial 37 – element review using the chrome developer tool console panel
• SAP ui5 application development tutorial 38 – use chrome developer tools to view the context information of program execution errors
• 39 of SAP ui5 application development tutorial – some common errors and analysis methods of white screen in SAP ui5 application
• SAP ui5 application development tutorial No. 40 – how to make it, including component preload SAP ui5 release including JS
• SAP ui5 application development tutorial 41 – offline installation and use of chrome extended ui5 inspector
• Application development tutorial 42 of SAP ui5 – Introduction to the use of diagnostics diagnostic tool of SAP ui5
• SAP ui5 application development tutorial 43 – how to use the support assistant tool provided with SAP ui5
• Forty four of SAP ui5 application development tutorial – cause analysis and solution of label and input control text not aligned horizontally
• SAP ui5 application development tutorial 45 – how to use jQuery and native DOM API in SAP ui5 application
• SAP ui5 application development tutorial 46 – using message manager to realize out of the box validation information throwing
• SAP ui5 application development tutorial 47 – how to customize the verification logic of SAP ui5 string type input field
• SAP ui5 application development tutorial 48 – how to develop barcode scanning function in SAP ui5 application
• SAP ui5 application development tutorial 49 – how to debug SAP ui5 applications running on mobile phones on desktop computers
• SAP ui5 application development tutorial 50 – how to use Cordova to generate SAP ui5 applications into a hybrid application that can be installed on Android Phones
• SAP ui5 application development tutorial 51 – how to use chrome to debug SAP ui5 Cordova hybrid applications running on mobile phones
• SAP ui5 application development tutorial 52 – how to use the standard controls of SAP ui5 combined with Cordova plug-in to call the mobile camera for barcode scanning
• SAP ui5 application development tutorial 53 – how to customize SAP ui5 data type
• SAP ui5 application development tutorial 54 – how to configure local SAP ui5 applications into local Fiori launchpad
• SAP ui5 application development tutorial 55 – how to apply local SAP ui5 applications through node JS express deployed to the public network
• SAP ui5 application development tutorial 56 – development of SAP ui5 tree control (tree)
• SAP ui5 application development tutorial No. 57 – learning how to use smart field based on OData annotation

explain

Jerry began to contact SAP ui5 after joining the CRM Fiori development team of SAP Chengdu Research Institute in 2014. He has published many articles on the working principle and source code analysis of SAP ui5 on the sap community and “WangZiXi” wechat official account.

In Jerry’s articleFor novices who know nothing about SAP ui5, what materials are better to start with?It was mentioned that Jerry came all the way from SAP ui5 rookie and knew that it was not easy for developers with only ABAP development background to transform into SAP ui5 development field. Therefore, I designed this learning tutorial suitable for SAP ui5 beginners in my spare time to divide the process of developing a complete SAP ui5 application into several steps and strive to cover the knowledge points involved in each step. These knowledge points may not be as deep as my ui5 source code analysis series, but they should be easy to understand and easy for SAP ui5 beginners to understand.

The source code of each step of this tutorial is stored in myGithubOn, they are identified by folders 01, 02, 03, etc.

Each step is based on the previous step, and several new features are added. It is recommended that beginners with zero foundation or little knowledge of SAP ui5 learn step by step from the first step in order, download these codes locally, cooperate with the text explanation of the tutorial, and do it yourself to deepen their understanding.

If you have any questions about each step of the tutorial, please comment and leave a message in the corresponding step article of the tutorial.

SAP Fiori launchpad (launch version) is a standard entry for users to access UI applications, including many standard products such as SAP s / 4hana and SAP CRM. The interface is shown in the following figure:

Rectangular boxes in Fiori launchpad are called tiles. After clicking, it will jump to the configured SAP ui5 application. The mapping relationship between tile and SAP ui5 applications is set in the background of SAP standard products.

So far in this tutorial, we have run it locallynpm install, thenui5 serveThen, access the URL printed out by the tool, such as the following figurehttp://localhost:8081, and then manually paste it into the browser address bar to access the application:

Click index HTML to access the application of the corresponding step:

Is there any way to configure the application developed in each step as a tile of Fiori launchpad, just like the sap standard product?

This step describes the specific approach.

The following is a rendering:

After clicking app 1 tile, Fiori launchpad will jump to the barcode barcode scanning application we completed in step 48 above:

SAP ui5 application development tutorial 48 – how to develop barcode scanning function in SAP ui5 application

The browser address bar is also fromShell-homeBecomebarcode-scan.

belowIs the detailed implementation steps.