This commit is contained in:
waldo1001 2023-02-22 12:17:42 +00:00
parent 52fa2ea99a
commit 35e175dacf
208 changed files with 416 additions and 416 deletions

View file

@ -1,4 +1,4 @@
<!doctype html><html lang=en class=no-js><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=generator content="Hugo 0.107.0"><meta name=robots content="index, follow"><link rel="shortcut icon" href=/favicons/favicon.ico><link rel=apple-touch-icon href=/favicons/apple-touch-icon-180x180.png sizes=180x180><link rel=icon type=image/png href=/favicons/favicon-16x16.png sizes=16x16><link rel=icon type=image/png href=/favicons/favicon-32x32.png sizes=32x32><link rel=icon type=image/png href=/favicons/android-36x36.png sizes=36x36><link rel=icon type=image/png href=/favicons/android-48x48.png sizes=48x48><link rel=icon type=image/png href=/favicons/android-72x72.png sizes=72x72><link rel=icon type=image/png href=/favicons/android-96x96.png sizes=96x96><link rel=icon type=image/png href=/favicons/android-144x144.png sizes=144x144><link rel=icon type=image/png href=/favicons/android-192x192.png sizes=192x192><title>Creating Custom Charts | alguidelines.dev - Business Central Design Patterns</title><meta name=description content="Originally by Nikola Kukrika at Microsoft Development Center Copenhagen
<!doctype html><html lang=en class=no-js><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=generator content="Hugo 0.110.0"><meta name=robots content="index, follow"><link rel="shortcut icon" href=/favicons/favicon.ico><link rel=apple-touch-icon href=/favicons/apple-touch-icon-180x180.png sizes=180x180><link rel=icon type=image/png href=/favicons/favicon-16x16.png sizes=16x16><link rel=icon type=image/png href=/favicons/favicon-32x32.png sizes=32x32><link rel=icon type=image/png href=/favicons/android-36x36.png sizes=36x36><link rel=icon type=image/png href=/favicons/android-48x48.png sizes=48x48><link rel=icon type=image/png href=/favicons/android-72x72.png sizes=72x72><link rel=icon type=image/png href=/favicons/android-96x96.png sizes=96x96><link rel=icon type=image/png href=/favicons/android-144x144.png sizes=144x144><link rel=icon type=image/png href=/favicons/android-192x192.png sizes=192x192><title>Creating Custom Charts | alguidelines.dev - Business Central Design Patterns</title><meta name=description content="Originally by Nikola Kukrika at Microsoft Development Center Copenhagen
Abstract
The goal of this solution is to enable you to:
@ -40,7 +40,7 @@ Use charts in the web client. Create charts with custom functionality. Descripti
</span></span></span><span style=display:flex><span><span style=color:#f8f8f8;text-decoration:underline>
</span></span></span><span style=display:flex><span><span style=color:#f8f8f8;text-decoration:underline></span>AccSchedChartManagement<span style=color:#ce5c00;font-weight:700>.</span>DrillDown<span style=color:#ce5c00;font-weight:700>(</span>Rec<span style=color:#000;font-weight:700>,</span>AccountSchedulesChartSetup<span style=color:#ce5c00;font-weight:700>)</span><span style=color:#000;font-weight:700>;</span><span style=color:#f8f8f8;text-decoration:underline>
</span></span></span></code></pre></div><p>SetDrillDownindexes is a method from the <strong>Business Chart Buffer</strong> table that maps the DotNet point variable to C/AL data, so it must be used. The next method that you must implement is the action to be performed on Drilldown.</p><p>The <strong>DataPointDoubleClicked</strong> trigger has the same implementation logic as the DataPointClicked trigger.</p><h3 id=nav-specific-example-2>NAV Specific Example 2</h3><p>Implementation of chart part 1390 on the <strong>Small Business Role Center</strong> page (9022)</p><p><a href=1541.Picture7.png><img src=1541.Picture7.png alt=" "></a></p><p>This chart part contains data from multiple charts within a single part. The <strong>Status Text</strong> field shows the name of the chart and the current period. Users can browse through the charts with <strong>Next Chart</strong> and <strong>Previous Chart</strong> or use <strong>Select Chart</strong> to choose from a list of available charts.</p><p><a href=2553.Picture8.png><img src=2553.Picture8.png alt=" "></a></p><p>On this dialog, users can choose if a chart should be enabled or disabled. If the chart is not enabled, it will be skipped on the <strong>Previous Chart</strong> and <strong>Next Chart</strong> actions. Charts used by this part use different codeunits and setup records. If the user changes the selected chart, this option will be saved and applied next time role center is opened.</p><p>Users can also change the period length.</p><p><a href=5545.Picture9.png><img src=5545.Picture9.png alt=" "></a></p><p>Choosing the <strong>Chart Information</strong> button opens a short description of the chart.</p><p><a href=5582.Picture10.png><img src=5582.Picture10.png alt=" "></a></p><h2 id=nav-usages>NAV Usages</h2><p>Implementation of multiple charts within a single part:</p><ul><li>Page 1390, <strong>Mini Generic Chart</strong></li></ul><p>Charts that use a setup record and select the chart with <strong>Customize Chart Setup</strong> pages:</p><ul><li>Page 772, <strong>Inventory Performance</strong></li><li>Page 771, <strong>Purchase Performance</strong></li><li>Page 770, <strong>Sales Performance</strong></li><li>Page 762, <strong>Finance Performance</strong></li></ul><p>Chart that uses the <strong>Business Chart User Setup</strong> table:</p><ul><li>Page 768, <strong>Aged Acc. Receivable Chart</strong></li></ul><p>Other implementations:</p><ul><li>Page 972, <strong>Time Sheet Chart</strong></li><li>Page 869, <strong>Cash Flow Chart</strong></li><li>Page 760, <strong>Trailing Sales Orders Chart</strong></li></ul><h2 id=ideas-for-improvement>Ideas for improvement</h2><p>We should consider making a generic table for the last chart that the user has used.</p><p>We should investigate if we could make generic code for selecting periods and other common functionality by using RecordRefs.</p><p>Add-In improvements &ndash; Different ways to visualize the data and to pick colors for categories.</p><p>As a nice-to-have feature, we could implement functionality to cycle through the charts with a timer.</p><div class="text-muted mt-5 pt-3 border-top">Last modified February 24, 2022: <a href=https://github.com/microsoft/alguidelines/commit/5ee0436639455a35835c5ce88241d3fad662ee06>Added tags & categories + cleanup (5ee04366)</a>
by waldo1001</div></div></main></div></div><footer class="bg-dark py-5 row d-print-none"><div class="container-fluid mx-sm-5"><div class=row><div class="col-6 col-sm-4 text-xs-center order-sm-2"><ul class="list-inline mb-0"><li class="list-inline-item mx-2 h3" data-toggle=tooltip data-placement=top title=GitHub aria-label=GitHub><a class=text-white target=_blank rel=noopener href=https://github.com/microsoft/alguidelines aria-label=GitHub><i class="fab fa-github"></i></a></li><li class="list-inline-item mx-2 h3" data-toggle=tooltip data-placement=top title=Twitter aria-label=Twitter><a class=text-white target=_blank rel=noopener href="https://twitter.com/search?q=%23bcalhelp" aria-label=Twitter><i class="fab fa-twitter"></i></a></li><li class="list-inline-item mx-2 h3" data-toggle=tooltip data-placement=top title=Discord aria-label=Discord><a class=text-white target=_blank rel=noopener href=https://discord.gg/4wbfNv3 aria-label=Discord><i class="fab fa-discord"></i></a></li></ul></div><div class="col-6 col-sm-4 text-right text-xs-center order-sm-3"></div><div class="col-12 col-sm-4 text-center py-2 order-sm-2"><small class=text-white>&copy; 2022 alguidelines.dev Project All Rights Reserved</small></div></div></div></footer></div><script src=https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js integrity=sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN crossorigin=anonymous></script>
by waldo1001</div></div></main></div></div><footer class="bg-dark py-5 row d-print-none"><div class="container-fluid mx-sm-5"><div class=row><div class="col-6 col-sm-4 text-xs-center order-sm-2"><ul class="list-inline mb-0"><li class="list-inline-item mx-2 h3" data-toggle=tooltip data-placement=top title=GitHub aria-label=GitHub><a class=text-white target=_blank rel=noopener href=https://github.com/microsoft/alguidelines aria-label=GitHub><i class="fab fa-github"></i></a></li><li class="list-inline-item mx-2 h3" data-toggle=tooltip data-placement=top title=Twitter aria-label=Twitter><a class=text-white target=_blank rel=noopener href="https://twitter.com/search?q=%23bcalhelp" aria-label=Twitter><i class="fab fa-twitter"></i></a></li><li class="list-inline-item mx-2 h3" data-toggle=tooltip data-placement=top title=Discord aria-label=Discord><a class=text-white target=_blank rel=noopener href=https://discord.gg/4wbfNv3 aria-label=Discord><i class="fab fa-discord"></i></a></li></ul></div><div class="col-6 col-sm-4 text-right text-xs-center order-sm-3"></div><div class="col-12 col-sm-4 text-center py-2 order-sm-2"><small class=text-white>&copy; 2023 alguidelines.dev Project All Rights Reserved</small></div></div></div></footer></div><script src=https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js integrity=sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN crossorigin=anonymous></script>
<script src=https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin=anonymous></script>
<script src=https://cdn.jsdelivr.net/npm/mermaid@8.13.4/dist/mermaid.min.js integrity="sha512-JERecFUBbsm75UpkVheAuDOE8NdHjQBrPACfEQYPwvPG+fjgCpHAz1Jw2ci9EXmd3DdfiWth3O3CQvcfEg8gsA==" crossorigin=anonymous></script>
<script src=/js/tabpane-persist.js></script>