如何将自定义XML视图注入SAP Fiori Elements应用
Recently I need to put my own XML view into the application generated automatically by Smart Template. And I already found there is a question posted in forum Smart Templates:Custom View on Object Page asking for how to achieve it. So I write this blog for step by step guide.
Better to read first
It would be good if you have a draft understanding about how your application generated by Smart Template is rendered at runtime. You can read this blog My understanding about how object page in Smart Template is rendered for detail.
I just use an example to demonstrate. In the screenshot below, the red facet is automatically generated by Smart Template. The blue fact is actually rendered by my custom XML view.
Data binding in custom view
In my XML view I have a text with label “Long Text” and text bound to path = “to_LongText” and value = “long_text”.
What do these two properties mean? In SEGW you can get answer: to_LongText is navigation property and “long_text” is one of the property of the target type Z_I_Order_longtextType.
And the content of this property is stored in database table ZORDER_LONGTEXT, field LONG_TEXT, so you finally see the content “Jerry long text” in UI.
Register your custom view into manifest.json
You should declare your custom view usage in manifest.json file.
The most important part is the line marked in purple since it is responsible to tell framework exactly which postion your custom view should be put.
The naming convention is : + + .
Let me illustrate them further using example. For the screenshot above, if we translate “AfterFacet|Z_C_Order|GENEJERRY” into human readable sentence, it should be: put my custom view AFTER ( indicated by extension point: AfterFacet ) the automatically generated facet with id “GENEJERRY”. The binding context for custom view is “Z_C_Order”.
For the facet id “GENEJERRY”, you could find from annotation.xml in WebIDE.
How we can know which kinds of extension point are available in object page template? Switch your application to debug mode via Ctrl+Alt+Shift+P, refresh the application and you could observe lots of XML fragments are loaded.
Among them there is one fragment Sections.fragment.xml which is the place holder for all facets displayed in object page view.
Then you can find SAP has defined the AfterFacet extension point with naming convention format “AfterFacet|{entitySet>name}|{path: ‘firstLevelFacet>” which enables partner & customer to include their own view there.
event handling in custom view In my custom XML view, I have declared a function onPressed to semantic event press, which is implemented in corresponding controller of custom view.
The implementation of this press event is to simply increase the counter displayed in custom view.
Source code involved in this blog
I attach all source codes here for your reference.
controller
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"
], function(Controller, JSONModel) {
"use strict";
return Controller.extend("zsandbox.ext.controller.note", {
onInit: function() {
}
},
onPressed: function() {
var label = this.getView().byId("Jerry_label2");
var currentText = label.getText();
currentText = currentText || 0;
currentText = parseInt(currentText) + 1;
var data = { count: currentText};
label.setModel(new sap.ui.model.json.JSONModel(data),"json");
}
});
});
xml view
<core:View xmlns:core="sap.ui.core" xmlns:ui="sap.ui.layout" xmlns:layout="sap.ui.layout" xmlns:ca="sap.ca.ui" xmlns="sap.m"
xmlns:form="sap.ui.layout.form" xmlns:crm="sap.cus.crm.lib.reuse.controls" controllerName="zsandbox.ext.controller.note">
<ui:form.SimpleForm id="jerryform" layout="ResponsiveGridLayout">
<ui:content>
<Label id="Jerry_label1" text="Long Text"></Label>
<Text id="Jerry_Text1" binding = "{to_LongText}" text="{long_text}"></Text>
<Label id="Jerry_label2" text="{json>/count}"></Label>
<Button id="Jerrybutton" text="Click me" press = "onPressed"></Button>
</ui:content>
</ui:form.SimpleForm>
</core:View>
manifest.json
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 手写dubbo框架7-SPI(dubbo和jdk的区别)
- Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
- YII框架学习笔记之命名空间、操作响应与视图操作示例
- python实现批量命名照片
- 手写dubbo框架8-SPI 自适应扩展机制
- thinkphp5框架扩展redis类方法示例
- 详解php中生成标准uuid(guid)的方法
- 基于Python爬取fofa网页端数据过程解析
- Python logging日志模块 配置文件方式
- PHP XML Expat解析器知识点总结
- PHP实现唤起微信支付功能
- PHP封装的mysqli数据库操作类示例
- PHP-FPM 的管理和配置详解
- PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
- 实例讲解PHP表单验证功能