SAP Fiori图标(icon)设计原理:一个可以查看 SAP UI5 所有可用图标的工具
When you are creating a new button and assign an icon to it, there is no way for you to know exactly what does this “add” icon look like.
Even if you use the star symbol in launchpad designer, there is still no convenient way to find this add icon.
Since all icons are listed in F4 help, there is no filter there:
Instead we can use this useful tool to find the icon you need efficiently:
SAP UI5 图标查看器
Currently there are 535 icons available.
We can easily find the icon we need by search button.
And in the right-bottom part of the page, there is an id “e000” displayed for icon “accidental-leave”. We will explain the meaning of this id in the end part of this blog.
How is icon rendered in Fiori
Originally I thought that the binary content of all icons are stored in the server side. And in the runtime when an icon is to be rendered, there is a conversion done, transferring the internal url like “sap-icon://XXX” to absolute path like “https://XXXX” which points to the icon stored in the server. However I am wrong.
Figure: how the traditional image is displayed in Fiori
If you use the element inspection function in Chrome development tool, you will find the corresponding html element for image in the final html source code does not contain any attribute like src. Instead, it has an attribute defined by SAP which seems to have something to do with image content: data-sap-ui-icon-content.
The value of this attribute is filled by IconRenderer when the icon is to be displayed in UI. The variable oIconInfo.content stores the actual value.
Check the source code of this js file, where all the supported icons together with their icon name and icon code are hard coded.
So the icon id for icon “accidental-leave” we find in icon browser page, e000, is just its corresponding code hard coded in IconPool.js.
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
相关文章
- 38. 使用 Chrome 开发者工具查看 SAP UI5 程序执行出错时的上下文信息
- 36. 使用 Chrome 开发者工具 Elements 标签动态修改 SAP UI5 应用的 CSS 类
- 关于 SAP UI5 SimpleForm 控件里的 ColumnsL 和 labelSpanXL 的测试
- when is SAP UI5 formatter called
- SAP ABAP Netweaver 里的用户会话概念
- SAP gateway 后台OData model data查看工具
- 显示SAP CRM Product hierarchy的一个小工具
- SAP OData性能分析工具
- SAP CRM产品主数据页面的data loss实现逻辑
- SAP BSP(Business Server Page)的源代码搜索工具
- SAP Spartacus 和 CDC 集成的 HTTP 请求明细
- SAP Spartacus cms.service.ts getComponentData
- SAP CRM中间件下载出错的错误排查
- SAP CRM content management工具类
- SAP Analytics Cloud exception aggregation type设置成LAST的效果
- 使用SAP Analytics Cloud显示全球新冠肺炎确诊人数和发展趋势的预测
- SAP UI5 视图控制器 View Controller 的生命周期方法 - Lifecycle methods
- 如何操作SAP UI5应用Footer区域工具栏按钮的背景颜色
- SAP ABAP OData 服务诊断工具 /IWFND/ERROR_LOG 的使用方法试读版
- 使用ABAP SAT工具分析SAP OData service实现明细
- 6. 使用 Postman 工具高效管理和测试 SAP ABAP OData 服务