Introduction to the use of SAP UI5 Simple Form control trial version

头像
注销
     四川
    阅读 1 分钟
    中文

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

    本专栏计划的文章数300篇左右，到2022年9月16日 ，目前131篇，专栏43.6%

    About the Author

    Jerry Wang, joined the SAP Chengdu Research Institute after graduating from the University of Electronic Science and Technology of China with a master's degree in computer science in 2007. Jerry is a SAP Community Mentor and a SAP China Technology Ambassador. In his 15-year career in SAP standard product development, Jerry has participated in the research and development of standard products such as SAP Business ByDesign, SAP CRM, SAP Cloud for Customer, SAP S/4HANA, and SAP Commerce Cloud (e-commerce cloud).

    Jerry uses ABAP, Java, JavaScript and TypeScript for development, and has in-depth research on various SAP self-developed frameworks including SAP UI5.

    Tutorial Directory

    illustrate

    Jerry has been in contact with SAP UI5 since 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 in the SAP community and the WeChat public account "Wang Zixi".

    In Jerry's article , a novice who knows nothing about SAP UI5, which materials are better to start with? It was mentioned that Jerry has come all the way from SAP UI5 rookie. He knows that it is not easy for developers with only ABAP development background to transform to SAP UI5 development field, so I designed this suit in my spare time SAP UI5 不同水平 The learner's learning tutorial, which divides the process of developing a complete SAP UI5 application into several steps, and strives to cover all the knowledge points involved in each step.

    These knowledge points may not be as in-depth as my UI5 source code analysis series articles, but I strive to explain the profound things in simple language. The important knowledge points are accompanied by detailed screenshots to assist the introduction of the text, which is convenient for the understanding of the tutorial learners.

    The source code of each step of this tutorial is stored on my Github , identified by folders 01, 02, 03, etc. For example, the source code of step 1 is here .

    Each step builds on the previous step with several new features added. It is recommended to have zero foundation or little knowledge of SAP SAP UI5 初学者 , learn step by step from the first step in order, download these codes to the local, cooperate with the text explanation of the tutorial, and do it yourself to deepen your understanding .

    For SAP UI5 developers who have already 有一定基础 , you can skip the basic chapters in the previous part through the table of contents of this article, and directly select chapters related to your own work projects, or include some knowledge points that you have not yet mastered. Targeted learning.

    If you have any questions about each step of the tutorial, you are welcome to comment and leave a message in the article corresponding to the steps of the tutorial. Although I am usually very busy with development work, I promise to check the comments you leave me on a regular basis. For the technical questions involved, I will definitely 抽时间做出解答 .

    In the first 4 steps of this tutorial, we have introduced one of the members of the SAP UI5 Smart Controls family, SmartField:

    The SmartField controls we defined in the example, as shown in the following figure, are all wrapped in SmartForm controls. Before learning the SmartForm control, we need to be familiar with the use of the Simple Form control, which is the purpose of this step.

    Let's take a look at the effect of this step: we see a Form form with 4 fields:

    After clicking the Edit button, the four fields of the form become available for input:

    The following are the specific implementation steps.

    In the next steps of this tutorial, we will detail how the following properties used in this step work, that is, how they control the display width of the form control at runtime:

    • labelSpanXL
    • labelSpanL
    • labelSpanM
    • labelSpanS
    • emptySpanXL
    • emptySpanL
    • emptySpanM
    • emptySpanS
    • columnsXL
    • columnsL
    • columnsM columns

    Summarize

    This step introduces the most basic usage of the SimpleForm control under the command space sap.ui.layout.form, and leads to the question of how its labelSpan, emptySpan and columns properties affect the display width of the elements in the SimpleForm form at runtime. The next steps in this tutorial detail how these properties work.

    javascripttypescript前端sapsaprfc
    注销
    1k 声望1.6k 粉丝

    invalid

    « 上一篇
    SAP UI5 Cross Application Navigation (跨应用间跳转)的本地模拟实现
    下一篇 »
    SAP UI5 Form 和 Simple Form 的设计规范

    引用和评论

    推荐阅读
    头像
    什么是 Up front design

    注销阅读 910

    头像
    2025年最新反编译微信小程序的教程及工具

    TANKING赞 9阅读 6.5k

    头像
    手写一个动态海洋和天空效果的vue hooks

    夕水赞 7阅读 2.1k

    头像
    你可能不知道的图片加载相关知识

    夕水赞 7阅读 5.4k

    头像
    原生JS大揭秘—JS代码执行原理解刨

    Damon赞 6阅读 5.8k评论 2

    头像
    使用CSS给标题添加书名号并超出省略

    XboxYan赞 3阅读 2.6k

    头像
    原生electron起步-从零到一完成构建和打包

    兔子先森赞 3阅读 3.5k评论 1

    0 条评论
    得票最新