Hi, Readers.
Today, I would like to talk about how to use WebPageViewer add-in to display web pages and HTML contents inside Dynamics 365 Business Central page.
WebPageViewer is an out-of-the-box Add-in in Business Central.
In Business Manager Role Center, choose Product Videos.
Then you can see a list of videos prepared by Microsoft, click the title.
You will see page 1821 “Video Link”:
There is a simple example of WebPageViewer Add-in in the standard source code of the page.
Next, let’s refer to it to make some try.
Add a “Microsoft.Dynamics.Nav.Client.WebPageViewer” to the page, and use Navigate method to add a video and a website to the Customer Card page.
Video:
Website:
Test Video:
Source Code:
pageextension 50100 CustomerListExt extends "Customer Card"
{
layout
{
addafter(General)
{
group(Video)
{
Caption = 'Video';
usercontrol(TestVideo; "Microsoft.Dynamics.Nav.Client.WebPageViewer")
{
ApplicationArea = All;
trigger ControlAddInReady(callbackUrl: Text)
begin
CurrPage.TestVideo.Navigate('https://yzhums.com/wp-content/uploads/2021/07/DarkMode.mp4');
end;
}
}
group(WebSite)
{
Caption = 'WebSite';
usercontrol(TestWebSite; "Microsoft.Dynamics.Nav.Client.WebPageViewer")
{
ApplicationArea = All;
trigger ControlAddInReady(callbackUrl: Text)
begin
CurrPage.TestWebSite.Navigate('https://yzhums.com/');
end;
}
}
}
}
}Okay, what else can this Add-in do?
There is the SetContent method in the WebPageViewer Add-in. You can use it to set some HTML contents on the page.
Let’s see some examples.
First I created a new page to show the HTML contents set in InputText field.
Source Code:
page 50100 TestSite
{
Caption = 'Test Site';
PageType = Card;
ApplicationArea = All;
UsageCategory = Administration;
layout
{
area(Content)
{
group(Input)
{
field(InputText; InputText)
{
ApplicationArea = All;
MultiLine = true;
trigger OnValidate()
begin
CurrPage.TestWebSite.SetContent(InputText);
end;
}
}
group(WebSite)
{
usercontrol(TestWebSite; "Microsoft.Dynamics.Nav.Client.WebPageViewer")
{
ApplicationArea = All;
}
}
}
}
var
InputText: Text[2500];
}HTML Basic:
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">This is HTML Heading</h1>
<p style="background-color:Tomato;">This is HTML paragraph.</p>
<a href="https://yzhums.com">ZHU's blog</a>
</body>
</html>
List:
<ul>
<li>BC18</li>
<li>BC17</li>
<li>BC16</li>
</ul>
Form:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
JavaScript:
<!DOCTYPE html>
<html>
<body>
<h1>Test JavaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
Test Video:
PS:
1. If the URL refused to connect, it means that the origin server does not authorize you to show this content inside an iframe. (The page cannot be displayed in a frame)
Refused to display ‘https://www.google.com/’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.
2. If the address is wrong, the content cannot be displayed.
3. If you only want to open a video link inside Business Central page, such as a Youtube video, you only need to use the Play method in the Video Codeunit.
END
Hope this will help.
Thanks for reading.
ZHU
コメント