qbo3自定义仪表板面板交互



我已经创建了一个qbo3自定义仪表板:

  • 顶部的Loan Search面板,和
  • 贷款下的Task Search面板

当用户单击顶部面板中的贷款时,她应该在底部面板中看到与该贷款相关的任务。

但是,贷款的标准Loan Search面板超链接导航到Loan Summary页面。

我需要为Loan Search面板创建一个自定义UI组件吗?

自定义仪表板可以利用标准Loan Search面板,并使用以下代码段拦截贷款超链接上的单击事件:

document.id('Loans').addEvent('click:relay(a)', function(e, t) {
e.preventDefault();
let p = t.href.substring(t.href.indexOf('?')+1).parseQueryString();
qbo3.getObject('Tasks').refresh({
'Object': 'Loan',
'ObjectID': p.ID
});
})

完整版本:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:import href="Theme.xslt"/>
<xsl:output method="html" indent="yes" doctype-system="html"/>
<xsl:template match="/">
<html>
<head>
<xsl:call-template name="Head"/>
</head>
<body>
<xsl:call-template name="MainMenu">
<xsl:with-param name="Object">Loan</xsl:with-param>
</xsl:call-template>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="tab-content">
<div id="Loans" class="tab-pane" data-behavior="ObjectBind"
data-objectbind-options="{{'class': 'qbo3.LoanObject', 'method': 'Search', 'render': false, 'listen': ['search'] }}"
>
<p>...</p>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="tab-content">
<div id="Tasks" class="tab-pane" data-behavior="ObjectBind"
data-objectbind-options="{{'class': 'qbo3.ImportFormObject', 'method': 'Search', 'render': false }}"
>
<p>...</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
document.id('Loans').addEvent('click:relay(a)', function(e, t) {
e.preventDefault();
let p = t.href.substring(t.href.indexOf('?')+1).parseQueryString();
qbo3.getObject('Tasks').refresh({
'Object': 'Loan',
'ObjectID': p.ID
});
})
</script>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

最新更新