Dynamics 365 Business Central: Using WebPageViewer Add-in (“Microsoft.Dynamics.Nav.Client.WebPageViewer”)

Dynamics 365 Business Central

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

コメント

タイトルとURLをコピーしました