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