Web Widget in Business Central. Getting a lot doing almost nothing

Jalmaraz

667

Like ( 1 )

Report

One week later 22/03/20

When I began the post, I only intended to relate a widget with a master table record. I though something like linking a customer with his city weather or map widget. Later I noticed that when I wanted to try quickly some HTML code with JavaScript, I can do it with this add-in, without doing a complete new add-in. This way the generic widget became a kind of “add-in of add-ins”.

What is a Web Widget?

If you don´t know what a Widget is, the Wikipedia entry is very useful: https://en.wikipedia.org/wiki/Web_widget

To sum up, we can say, a Widget is a piece of code from a main page that can be embedded in another Web page, providing the host page features of the original web. In this post the Host is a Business Central Page, and the original web site could be a Maps Site, a social media(Facebook, Twitter, LinkedIn), a weather site (Accuweather), videos, Podcast, search tools, etc.

A lot of sites provide us a mini functionality to embed in our page. An example, I use the Spanish weather site ElTiempo.es. When I need a Widget from this page I only visit this page: https://www.eltiempo.es/widget, fill the city and format options and at the end all Widget generators have a button “Get HTML Code” and you get a very small piece of JavaScript and HTML code like this:

In other sites we can look for an <embed> button and use it to get the HTML code (you-tube).

If you can embed this code in a Business Central page it looks this way (the Widget is the Fact-box part placed in the right of the Page):

The widget in the right give us a lot of features from the original site (today, and the next three days forecast weather) and is linked with the original site, if you click, you will go to the original site.

How to embed it ?

As you guessed this works with a control add-in in JavaScript. And the Script has only a function with this code:

function WriteWidget(TextWidGet=''){

document.body.innerHTML = '';

if ((TextWidGet != null) && (TextWidGet != '')) {

document.write(TextWidGet);}

The input parameter is the code of the widget we got from the original web site.

Generic Widget elements

We created an app to store widgets and show a preview of these stored widget, with these elements:

First a “Widget” table with Code and Description as usual, and a blob field called “HTML Widget”. In this blob we are going to store the HTML code of the Widget. Is only text, but remember, maximum length in table text fields are 250 characters and sometimes seems a little short for store all HTML string. The HTML Widgets aren´t very big, but bigger than 250 characters.

field(4; "HTML Widget"; Blob)

{

Next element is a control Add-in, with the “huge” JavaScript code shown above.

We have also a “Part” type page (Fact-box) called “Widget Factbox” with the control add-in. This page shows us the preview of the widget. The code to call the JavaScript function that embed the HTML is:

trigger OnAfterGetCurrRecord()

begin

CurrPage.GenWidget.WriteWidget(GetHTMLWidgetConvertedToText);

CurrPage.Update(false);

end;

Remarks: GenWidget is the page control add-in. GetHTMLWidgetConvertedToText is a function in the “Widget” table that covert blob field “HTML Widget” to text.

Next we have a list to Edit the Widget called “Widgets”. This page is linked with the previous Fact-box to see the preview and the page has a multiline textbox under the repeater element to input the Widget HTML code:

When we push the action, we save this HTML code in the Widget record:

Disclaimer. Know what you are doing

Be careful giving the access to this utility: creates a JavaScript code injection to Business Central. I know nothing about security and systems, and I think Business Central is safe, but be careful, I think this is an administrator user profile tool.