How to enhance Business Central Role centers with the power of Widget Containers and jQuery
How to enhance Business Central Role centers with the power of Widget Containers and jQuery
Using the ControlAddins and power of jQuery it is possible to add container widgets to roles centers to extend their functionality, using the page parts in which to publish the widgets.
Surely, this is interesting for demos as other products do the same thing, giving the idea that Business Central Online is completely customizable using internet services.
To achieve this, it can be done in several ways; in this example, jQuery is used for loading data into widgets.
Widgets for
- Weather
- Stocks
- Exchange
Other Scenarios
For example, you could add multiple custom Power BI containers in multiple sections of the role center by sizing them as you want or view production data in real time or read directly from machine centers creating dedicated widget panels etc. etc.
What is jQuery?
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
Widget example
The standard Business Manager Role Center
Purpose:
We want to extend the role center by inserting three widgets loaded by Addin through jQuery
The role center is extended by adding the 3 widgets that we declare as page parts
Widget Container example
div for widget
<div class=”tradingview-widget-container row”>
<div id=”tradingview_460f8″></div>
<div class=”tradingview-widget-copyright”><a href=”https://www.tradingview.com/symbols/AAPL/” rel=”noopener” target=”_blank”><span class=”blue-text”>Apple</span></a> by TradingView</div>
</div>
Scripts =
‘https://code.jquery.com/jquery-3.6.0.min.js’,// jquery
‘https://s3.tradingview.com/tv.js’,
‘src\ControlAddins\stocks\js\stocks.js’
;
StyleSheets = ‘https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css’,// bootstrap
‘https://pro.fontawesome.com/releases/v5.10.0/css/all.css’;// fontawesome
In this case, we can use Bootstrap as a Stylesheet
EXAMPLE: “THE METEO” WIDGET
The AL code can be found at the link below
AT THE END…
After having published the APP we see that the Role Center has been extended and displays the new 3 widgets, obviously others of common interest can be added.
As mentioned, for those who do not already know it, useful for presentations to prospects.
Source
https://github.com/rstefanetti/AL-Code-Samples-Education/tree/AL-Widgets/AL-Widgets
I have a one question. How we can change the on load business central name as shown above. In your widgets screenshot shows Business Central but in my system shows Dynamics 365 Buiness Central.
Please give me any idea.