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

deploy: 78fa831aec

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

4
docs/navpatterns/patterns/instructions-in-the-ui/index.html
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>Instructions in the UI | 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>Instructions in the UI | alguidelines.dev - Business Central Design Patterns</title><meta name=description content="Originally by Nikola Kukrika at Microsoft Development Center Copenhagen
Abstract
To mitigate usability problems with learnability or discoverability …"><meta property="og:title" content="Instructions in the UI"><meta property="og:description" content="Originally by Nikola Kukrika at Microsoft Development Center Copenhagen
Abstract To mitigate usability problems with learnability or discoverability of NAV functionality, it is possible to embed instructions in the UI in connection with the task that the user is performing. The goal is to explain how to use the product or feature without impairing the user&rsquo;s productivity after user has learned how to use a feature.
@ -21,7 +21,7 @@ Description Users must often go through a few days of training to learn how to u
</span></span></span></code></pre></div><p>Height and width should be set by using the following functions, since they ensure that the video will be centered on the page.</p><div class=highlight><pre tabindex=0 style=background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-al data-lang=al><span style=display:flex><span><span style=color:#f8f8f8;text-decoration:underline> </span>VideoPlayerAddIn<span style=color:#ce5c00;font-weight:700>.</span>SetHeight<span style=color:#ce5c00;font-weight:700>(</span>Height<span style=color:#ce5c00;font-weight:700>) </span><span style=color:#204a87;font-weight:700>and</span><span style=color:#f8f8f8;text-decoration:underline> </span>VideoPlayerAddIn<span style=color:#ce5c00;font-weight:700>.</span>SetWidth<span style=color:#ce5c00;font-weight:700>(</span>Width<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>If you would like to reuse the <strong>Mini Video Player Page</strong> page (1395), then use:</p><pre><code>SetParameters(Height,Width,Src,Caption), which uses the functions described above.
</code></pre><p>4. As a last step you need to implement the action on the group and assign a video icon</p><p><strong>Note:</strong></p><p>Videos are implemented to be Web Client only. This is done because Flash player control that is used by most of the providers is not working well with WebBrowser control that the Windows Client is using.</p><p>For displaying the videos on the Windows client, the simplest option is to provide an action with a link that opens a video page in a browser or a page hosting all of the instructional videos you have provided. Optionally you can implement a .NET add-in control that would be able to play the video from selected provider.</p><h3 id=to-implement-tiles-for-help-topics>To implement tiles for help topics</h3><p>You only need to add an empty action with a <strong>TileHelp</strong> icon. Platform will render the action and will generate the logic to trigger a help call when user clicks on the icon. On the Help Server create an help topic that matches the URL.</p><h2 id=tooltips-on-actions-and-fields>Tooltips on actions and fields</h2><p>Platform improvements in NAV 2013 R2 provide ability to create tooltips for actions and all kinds of fields in the web client simply by filling the <strong>TooltipML</strong> property on the page object.</p><p><a href=7217.picture-1.png><img src=7217.picture-1.png alt=" "></a></p><p><strong>Note</strong>: In NAV 2013 R2, tooltips (in the 1330-range pages only) are extracted from intro paragraphs in the related field topic and inserted build-time using an infrastructure system.</p><h2 id=task-oriented-page-help>Task-oriented page Help</h2><p>Every page in NAV 2013 R2 has a help icon in top right corner that should open a Task-oriented help topic that should be related to this page. We recommend providing help topics for new task pages that you provide with your solutions.</p><p><a href=7245.Picture-2.png><img src=7245.Picture-2.png alt=" "></a></p><h2 id=nav-usages>NAV Usages</h2><p>Dismissible dialogs - Used in the <strong>Description</strong> field in pages 1305, 1325, 1355, 1373, &mldr;.</p><p>FastTabs with instructional text &ndash; <strong>Navigate</strong> page (344).</p><p>Help Tiles on Role Center &ndash; <strong>Small Business Role Center</strong> page (9022) and <strong>Mini Activities</strong> page (1310).</p><p>Tooltips &ndash; All pages in the 1300 number range.</p><p>Task-oriented page help &ndash; all task pages in 1300 number range</p><h2 id=ideas-for-improvement>Ideas for Improvement</h2><p>Provide the support for the invoking any Help topics (URL on the Help Server from C/AL code. Then we would be able to promote help actions anywhere or launch them from C/AL code if needed.</p><p>Implement tooltips across the application and in all country versions. (Requires a run-time infrastructure system.)</p><div style=position:relative;padding-bottom:56.25%;height:0;overflow:hidden><iframe src=https://www.youtube.com/embed/loobQ1TVO3o style=position:absolute;top:0;left:0;width:100%;height:100%;border:0 allowfullscreen title="YouTube Video"></iframe></div><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>