Microsoft/alguidelines
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

deploy: 81ffc9da10

Browse source
This commit is contained in:
JesperSchulz 2021-11-08 15:53:12 +00:00
parent 158b902b20
commit cb4e8e2194
131 changed files with 3191 additions and 3076 deletions
Download patch file Download diff file Expand all files Collapse all files

77
navpatterns/1-patterns/creating-custom-charts/index.html
View file

@ -2,19 +2,19 @@
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta name=generator content="Hugo 0.89.0">
<meta name=generator content="Hugo 0.89.1">
<meta name=description content>
<title>Creating Custom Charts :: BC AL Help</title>
<link href=/css/nucleus.css?1636104707 rel=stylesheet>
<link href=/css/fontawesome-all.min.css?1636104707 rel=stylesheet>
<link href=/css/featherlight.min.css?1636104707 rel=stylesheet>
<link href=/css/perfect-scrollbar.min.css?1636104707 rel=stylesheet>
<link href=/css/auto-complete.css?1636104707 rel=stylesheet>
<link href=/css/theme.css?1636104707 rel=stylesheet>
<link href=/css/theme-blue.css?1636104707 rel=stylesheet>
<link href=/css/variant.css?1636104707 rel=stylesheet>
<link href=/css/print.css?1636104707 rel=stylesheet media=print>
<script src=/js/jquery.min.js?1636104707></script>
<link href=/css/nucleus.css?1636386789 rel=stylesheet>
<link href=/css/fontawesome-all.min.css?1636386789 rel=stylesheet>
<link href=/css/featherlight.min.css?1636386789 rel=stylesheet>
<link href=/css/perfect-scrollbar.min.css?1636386789 rel=stylesheet>
<link href=/css/auto-complete.css?1636386789 rel=stylesheet>
<link href=/css/theme.css?1636386789 rel=stylesheet>
<link href=/css/theme-blue.css?1636386789 rel=stylesheet>
<link href=/css/variant.css?1636386789 rel=stylesheet>
<link href=/css/print.css?1636386789 rel=stylesheet media=print>
<script src=/js/jquery.min.js?1636386789></script>
<style>:root #header+#content>#left>#rlblock_left{display:none!important}</style>
</head>
<body data-url=/navpatterns/1-patterns/creating-custom-charts/>
@ -32,9 +32,9 @@ BC AL Help . dev
<input data-search-input id=search-by type=search placeholder=Search...>
<span data-search-clear><i class="fas fa-times"></i></span>
</div>
<script src=/js/lunr.min.js?1636104707></script>
<script src=/js/auto-complete.js?1636104707></script>
<script src=/js/search.js?1636104707></script>
<script src=/js/lunr.min.js?1636386789></script>
<script src=/js/auto-complete.js?1636386789></script>
<script src=/js/search.js?1636386789></script>
</div>
<div class=highlightable>
<ul class=topics>
@ -267,7 +267,7 @@ BC AL Help . dev
<li><strong>Set Period</strong>, <strong>Work Date</strong></li>
<li>Actions to filter the data set</li>
<li><strong>Refresh</strong></li>
<li>**Chart Information **&ndash; a tooltip with a description of the chart and how data is calculated.</li>
<li><strong>Chart Information</strong> &ndash; a tooltip with a description of the chart and how data is calculated.</li>
</ul>
<h3 id=optional-preserving-user-personalization>Optional: Preserving User Personalization</h3>
<p>One of the most common functionalities is personalization. If the chart can be customized by the user, you should store the settings that the user has entered and apply them the next time the chart is loaded.</p>
@ -290,21 +290,26 @@ BC AL Help . dev
<p>If you need a setup record and codeunit, then it is a good idea to encapsulate this logic within a method.</p>
<h3 id=nav-specific-example-1>NAV Specific Example 1</h3>
<p>Implementation of the <strong>Finance Performance Chart</strong> page (762)</p>
<p><strong>BusinessChart::AddInReady()</strong></p>
<p>UpdateChart(Period::" &ldquo;);</p>
<p><strong>LOCAL UpdateChart(Period : &lsquo;,Next,Previous&rsquo;)</strong></p>
<p>MoveAndUpdateChart(Period,0);</p>
<p><strong>LOCAL MoveAndUpdateChart(Period : &lsquo;,Next,Previous&rsquo;;Move : Integer)</strong></p>
<p>AccSchedChartManagement.GetSetupRecordset(AccountSchedulesChartSetup,AccountSchedulesChartSetup.Name,Move);</p>
<p>AccSchedChartManagement.UpdateData(Rec,Period,AccountSchedulesChartSetup);</p>
<p>Update(CurrPage.BusinessChart);</p>
<p>StatusText := GetCurrentSelectionText(&ldquo;Period Filter Start Date&rdquo;,&ldquo;Period Filter End Date&rdquo;);</p>
<p>In the MoveAndUpdateChart method, the AccSchedChartManagement codeunit gets a setup record and updates it if necessary. Then, it initializes the chart with setup data and sets the StatusText to show the period for which data is displayed. The same method is used by the actions to move and update the chart so that there is no code duplication.</p>
<div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-al data-lang=al>BusinessChart::AddInReady<span style=color:#f92672>()
</span><span style=color:#f92672> </span>UpdateChart<span style=color:#f92672>(</span>Period::&#34; &#34;<span style=color:#f92672>)</span>;
<span style=color:#66d9ef>LOCAL</span> UpdateChart<span style=color:#f92672>(</span>Period : <span style=color:#e6db74>&#39;,Next,Previous&#39;</span><span style=color:#f92672>)
</span><span style=color:#f92672> </span>MoveAndUpdateChart<span style=color:#f92672>(</span>Period,<span style=color:#ae81ff>0</span><span style=color:#f92672>)</span>;
<span style=color:#66d9ef>LOCAL</span> MoveAndUpdateChart<span style=color:#f92672>(</span>Period : <span style=color:#e6db74>&#39;,Next,Previous&#39;</span>;Move : <span style=color:#66d9ef>Integer</span><span style=color:#f92672>)
</span><span style=color:#f92672> </span>AccSchedChartManagement<span style=color:#f92672>.</span>GetSetupRecordset<span style=color:#f92672>(</span>AccountSchedulesChartSetup,AccountSchedulesChartSetup<span style=color:#f92672>.</span>Name,Move<span style=color:#f92672>)</span>;
AccSchedChartManagement<span style=color:#f92672>.</span>UpdateData<span style=color:#f92672>(</span>Rec,Period,AccountSchedulesChartSetup<span style=color:#f92672>)</span>;
Update<span style=color:#f92672>(</span>CurrPage<span style=color:#f92672>.</span>BusinessChart<span style=color:#f92672>)</span>;
StatusText <span style=color:#f92672>:=</span> GetCurrentSelectionText<span style=color:#f92672>(</span>&#34;Period Filter Start Date&#34;,&#34;Period Filter End Date&#34;<span style=color:#f92672>)</span>;
</code></pre></div><p>In the MoveAndUpdateChart method, the AccSchedChartManagement codeunit gets a setup record and updates it if necessary. Then, it initializes the chart with setup data and sets the StatusText to show the period for which data is displayed. The same method is used by the actions to move and update the chart so that there is no code duplication.</p>
<p>The following code is used to implement <strong>DataPointClicked</strong></p>
<p>****<strong>BusinessChart::DataPointClicked(point : DotNet &ldquo;Microsoft.Dynamics.Nav.Client.BusinessChart.BusinessChartDataPoint&rdquo;)</strong></p>
<p>SetDrillDownIndexes(point);</p>
<p>AccSchedChartManagement.DrillDown(Rec,AccountSchedulesChartSetup);</p>
<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>
<div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-al data-lang=al>BusinessChart::DataPointClicked<span style=color:#f92672>(</span>point : <span style=color:#66d9ef>DotNet</span> &#34;Microsoft.Dynamics.Nav.Client.BusinessChart.BusinessChartDataPoint&#34;<span style=color:#f92672>)
</span><span style=color:#f92672> </span>SetDrillDownIndexes<span style=color:#f92672>(</span>point<span style=color:#f92672>)</span>;
AccSchedChartManagement<span style=color:#f92672>.</span>DrillDown<span style=color:#f92672>(</span>Rec,AccountSchedulesChartSetup<span style=color:#f92672>)</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 **DataPointDoubleClicked **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>
@ -355,12 +360,12 @@ BC AL Help . dev
<div style=left:-1000px;overflow:scroll;position:absolute;top:-1000px;border:none;box-sizing:content-box;height:200px;margin:0;padding:0;width:200px>
<div style=border:none;box-sizing:content-box;height:200px;margin:0;padding:0;width:200px></div>
</div>
<script src=/js/clipboard.min.js?1636104707></script>
<script src=/js/perfect-scrollbar.min.js?1636104707></script>
<script src=/js/perfect-scrollbar.jquery.min.js?1636104707></script>
<script src=/js/jquery.svg.pan.zoom.js?1636104707></script>
<script src=/js/featherlight.min.js?1636104707></script>
<script src=/js/modernizr.custom-3.6.0.js?1636104707></script>
<script src=/js/relearn.js?1636104707></script>
<script src=/js/clipboard.min.js?1636386789></script>
<script src=/js/perfect-scrollbar.min.js?1636386789></script>
<script src=/js/perfect-scrollbar.jquery.min.js?1636386789></script>
<script src=/js/jquery.svg.pan.zoom.js?1636386789></script>
<script src=/js/featherlight.min.js?1636386789></script>
<script src=/js/modernizr.custom-3.6.0.js?1636386789></script>
<script src=/js/relearn.js?1636386789></script>
</body>
</html>