qbo3 Custom Dashboard Panel interaction

Question

qbo3 Custom Dashboard Panel interaction

16 Views Asked by Eric Patrick At 09 September 2021 at 13:29

I've created a qbo3 custom dashboard with:

A Loan Search panel at the top, and
A Task Search panel beneath the loan

When 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?

Original Q&A

There are 1 best solutions below

**Eric Patrick** · Answer 1 · 2021-09-09T13:29:36.053000

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>

qbo3 Custom Dashboard Panel interaction

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in QBO3

Trending Questions

Popular # Hahtags

Popular Questions