Apriso Modern UI样式系列之四卡片组件Tiles

李英杰同学

发布于 2024-04-11 14:14:42

720

发布于 2024-04-11 14:14:42

文章被收录于专栏：智能制造社区智能制造社区

概述

熟悉Apriso的同学可能能发现，在Process Builder中可以设计Form和Grid组件，但是没有类似asp.net中的Repeater组件，对于列表类的数据只能采用Grid组件来进行展示。

正如系列一中介绍的，ModernUI中包含了一些扩展的Javascript、CSS和Operation实体，其中也包含了一些非常有用的窗体组件。

本文介绍其中一个比较实用的Tiles卡片组件，该组件尤其适用于移动端页面开发，该组件包含：

Javascript：ModernUITiles.js
CSS：ModernUITiles.css

主要功能

支持自定义Operation方式获取需要展示的卡片数据
支持自适应布局和分页懒加载
支持标题、内容、脚注、Ribbon区配置，以及回调按钮列表配置
支持样式配置，内置Success、Danger、Warning、Information 、Active五种样式

方法说明

1 初始化参数

requestHandler : function() {},指定请求获取卡片列表数据处理函数
responseHandler : function() {},响应处理回调函数
clickTileCallback : function() {}, 点击事件回调函数
actionTileCallbackList : [] // example: [ {title: 'Complete', action: 'COMPLETE', callback: aprisoFunctionCallback } ]定义回调函数列表
context: null,上下文

2 方法

init: function() {},组件初始化
unload: function() {},卸载
getNoOfTilesOnFirstPage: function() {},获取第一页的卡片数量
checkPeriodically: function() {},设置周期性检查定时器
loadOnScrolling: function() {},处理滚动
resizeListener: function() {},今天大小变化
isScrolledIntoView: function(elem) {},判断是否滚动到可视区域
makeTileObject: function() {},生成卡片对象
setInteractivity: function() {},设置可交互对象
clickTileListener: function() {},监听点击事件
actionTileListener: function() {},监听点Action击事件
gotoTop: function() {},滚动到顶端
refreshFirstPageTiles: function(responseData) {},刷新第一页
fixDataAfterFirstPage: function(responseData) {},固定第一页以后的数据
refreshTiles: function(responseData) {},刷新卡片
reloadTiles: function(force, noOfTiles) {},重新装载
receiveData: function(data) {},接收卡片数据后的处理
checkIfFirstPageDataUpdate: function(responseData){},判断第一页的数据是否有变化

基本用法

▶第一步：编写页面、View：

▶第二步：在主界面的View Operation中引入Javascript文件和css样式文件的引用：

<script src="[Apriso]/ModernUI/Controls/ModernUITiles/ModernUITiles.js"</script>

<link rel="stylesheet" type="text/css" href="[Apriso]/ModernUI/Controls/ModernUITiles/ModernUITiles.css" />

▶第三步编写数据获取Operation：Template_Tiles_GetData，Tiles组件没有提供默认的数据获取Operation，所有数据获取逻辑需要自行编写Operation

参数说明：

输入

NoOfRowsToLoad：加载的行数，Javascript根据页面布局自动计算
NoOfRowsAlreadyLoaded：已经加载的行数，Javascript根据页面布局自动计算

输出：

Key：数据行的Key值
CSSClass：样式
Title：标题
SubTitle：子标题
Content：显示内容Html
Footer1：脚注1 html
Footer2：脚注2 html
Footer3：脚注3 html
Ribbon：Ribbon 内容html

可以根据实际需求，在Sql语句或者User fomula中完成需要显示的html内容生成。

▶第四步：引入Ajax Operation：Template_Tiles_GetData

▶第五步：添加html和Javascript：

1、HTML：定义样式为” tiles-container”的一个DIV，并带view视图load后进行初始化

<div class="tiles-container"></div>
<script>
$View.onLoaded(function() {
Template_TabControls_Generate_Tiles.initialize($Context);
});
$View.onUnloading(function() {
Template_TabControls_Generate_Tiles.finalize();
});
</script>

2、JS

var Template_TabControls_Generate_Tiles = {
initialize: function(context) {
Template_TabControls_Generate_Tiles.context = context;
Template_TabControls_Generate_Tiles.rl = [];
Template_TabControls_Generate_Tiles.allTilesHandle = $('.tiles-container').modernUITiles({
requestHandler: Template_TabControls_Generate_Tiles.requestHandler,
responseHandler: Template_TabControls_Generate_Tiles.responseHandler,
clickTileCallback: Template_TabControls_Generate_Tiles.clickTileCallback,
actionTileCallbackList: Template_TabControls_Generate_Tiles.actionTileCallbackList
});
//Template_TabControls_Generate_Tiles.receiveData(Template_TabControls_Generate_Tiles.context.inputs);
},
finalize: function() {
for(var i = 0; i < Template_TabControls_Generate_Tiles.allTilesHandle.length; i++) {
Template_TabControls_Generate_Tiles.allTilesHandle[i].unload();
}
},
requestHandler: function(inputs) {
if(Template_TabControls_Generate_Tiles.FilteredEmployeeTitle) {
inputs.FilteredEmployeeTitle = Template_TabControls_Generate_Tiles.FilteredEmployeeTitle;
}
Template_TabControls_Generate_Tiles.context.callOperation('Template_Tiles_GetData', inputs, Template_TabControls_Generate_Tiles.receiveData, Template_TabControls_Generate_Tiles.requestFailed);
},
receiveData: function(data) {
var tilesData = [];
for(var i = 0; i < data.Key.length; i++) {
tilesData.push({
Key : data.Key[i],
CSSClass : data.CSSClass[i],
Title : data.Title[i],
SubTitle : data.SubTitle[i],
Content : data.Content[i],
Footer : [ data.Footer1[i], data.Footer2[i], data.Footer3[i] ],
Ribbon : data.Ribbon[i]
});
}
tilesData.PingOnly = data.PingOnly;
for(var i = 0; i < Template_TabControls_Generate_Tiles.allTilesHandle.length; i++) {
Template_TabControls_Generate_Tiles.allTilesHandle[i].receiveData(tilesData);
}
},
requestFailed: function(error) {
console.log('ERROR!!!', error);
},
responseHandler: function(response) {
},
clickTileCallback: function(key) {
Apr.UserMessages.showMessage('You clicked ' + key);
},
actionTileCallbackList: [{
title: 'COMPLETE',
callback: function(key, action) {
Apr.UserMessages.showMessage('You completed ' + key + ' using ' + action);
}
},
{
title: 'SUSPEND',
callback: function(key, action) {
Apr.UserMessages.showMessage('Second action ' + action + ' for ' + key);
}
}]
}

▶第六步：运行并进行验证