I've created a qbo3 custom dashboard with:
Loan Search panel at the top, andTask Search panel beneath the loanWhen a user clicks on a loan in the top panel, she should see the tasks associated with a loan in the bottom panel.
However, the standard Loan Search panel hyperlink for the loans navigate to the Loan Summary page.
Do I need to create a custom UI component for the Loan Search panel?
A custom dashboard can leverage the standard Loan Search panel and intercept the click event on the loan hyperlink with this snippet:
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
});
})
A full version:
<?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>