在SAP WebClient UI里显示倒数计时的UI
First let’s have a look at what is achieved: Once you click work center “Jerry count down”, the count down is displayed with a small animation.
The steps to build this application are almost the same as Step by step to create Bar Chart in Webclient UI.
(1) Create a new WebUI component with a view main.htm:
Paste the following source code for the created view:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="count/jquery.lwtCountdown-1.0.js"></script>
<link rel="Stylesheet" type="text/css" href="count/main.css"></link>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Countdown demo</title>
</head>
<body>
<div id="container">
<h1>Jerry's count down demo</h1>
<h2 class="subtitle">Time left for year 2017</h2>
<div id="countdown_dashboard">
<div class="dash weeks_dash">
<span class="dash_title">weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">hours</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">minutes</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">seconds</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
<script language="javascript" type="text/javascript">
jQuery(document).ready(function() {
$('#countdown_dashboard').countDown({
targetDate: {
'day': 31,
'month': 11,
'year': 2017,
'hour': 23,
'min': 59,
'sec': 59
}
});
});
</script>
</div>
</body>
</html>
As you see I hard code the last second of year 2017 as the time to count down here, feel free to replace with your own date and time.
(2) Go to tcode SE80, tab MIME Repository, create a new folder named count and import these nine files.
(3) Create a new work center and put the ui component into it.
Please find step by step about how to achieve it from this wiki page How to add an custom UI component into a new work center.
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
相关文章
- SAP UI5 日期类型 sap.ui.model.type.Date 的显示格式问题分析
- 聊聊 SAP 产品 UI 上的消息显示机制
- SAP UI5 formatter的原理和调试截图-当UI字段没有值显示时怎么办
- SAP UI5的support Assistant
- SAP S/4HANA Material 物料主数据的简单介绍
- SAP CRM WebClient UI端到端的字段扩展
- 如何把SAP CRM WebClient UI上某个字段高亮加粗显示
- 动态控制SAP C4C UI元素的显示和隐藏
- SAP 电商云 UI 服务器端渲染的建议架构
- SAP 电商云 Spartacus UI added-to-cart 的端到端测试源代码解析
- SAP 电商云 Spartacus UI Delivery Mode ID 的 validator
- SAP 电商云 Spartacus UI 的 slot,position 和 Component
- SAP Fiori 的 UI 新主题 Horizon
- 使用SAP C4C rule editor动态控制UI上某个按钮是否显示 - SAP Cloud for Customer UI 规则编辑器的使用一例
- SAP Commerce Cloud SmartEdit 的安装
- SAP CRM WebClient UI和CRM Fiori Account里显示Opportunity逻辑
- SAP CRM WebClient UI和CRM Fiori应用里Opportunity的显示过滤逻辑
- SAP CRM configuration product在UI上的显示逻辑
- 如何分析SAP CRM UI label显示成technical name的问题
- 在SAP UI中使用纯JavaScript显示产品主数据的3D模型视图
- How to determine if SAP CRM UI is extensible
- 使用扩展技术将SAP Fiori应用隐藏动态创建的UI字段
- 在SAP UI中使用纯JavaScript显示产品主数据的3D模型视图
- SAP OData 服务在 gateway 层出错,应该如何处理?通过一个错误消息 Query XXX is invalid or contains errors 来举例说明
- SAP Spartacus 电商云 UI Shipping Method 在单元测试环境下没有显示的问题