The ReportingCloud Portal enables you to create MS Word compatible templates that can be merged with JSON data using the ReportingCloud API in order to create documents in formats like Adobe PDF.

A highly requested feature is the usage of this editor to be used outside the portal, but directly in your application. Technically, this was possible using the MVC or WebForms components part of our ASP.NET product TX Text Control .NET Server for ASP.NET.

Now, we released a widget to beta that can be embedded into any HTML page just by adding a JavaScript tag. All you need is a ReportingCloud account (trial or paid license). This article explains the required steps to embed a fully-featured editor widget to your plain HTML page:

  1. If you don't have a ReportingCloud account, create your free trial account here:

    https://portal.reporting.cloud/account/register/

  2. Login to the portal and open the Widgets section:

    https://portal.reporting.cloud/widget/manage/

    Manage Widgets

  3. In the New widget location box, type in the hostname of your website including a subdomain (in case a subdomain is used). If you are testing locally, use localhost as the hostname and confirm with Create Key.

    Manage Widgets

  4. The location should be listed now in the list of widget locations:

    Manage Widgets

  5. Click the button Create Tag right next to the widget location. In the Embed the widget area, a custom JavaScript tag is created with your generated key:

    Manage Widgets

  6. Copy this JavaScript tag and place it in the HEAD element of your HTML page. To instantiate a widget, you will need to create a container DIV element in order to create a new instance of TXTextControlWeb with this container element in the constructor.

    A complete sample HTML page with an embedded widget would look like this:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>ReportingCloud Widget Test Page</title>
    <script src="http://portal.reporting.cloud/Widget/Script/w1ZPWu671K3zWSOztC..."></script>
    </head>
    <body>
    <style>
    #myWidgetContainer {
    width: 1000px;
    height: 600px;
    }
    </style>
    <div id="myWidgetContainer"></div>
    <script>
    var textControl1;
    window.onload = function() {
    textControl1 = new TXTextControlWeb("myWidgetContainer");
    };
    </script>
    </body>
    </html>
    view raw test.htm hosted with ❤ by GitHub

If you open this HTML page now in a browser, the widget is loaded and rendered:

Manage Widgets

In the next couple of blog posts, we will show how to combine this concept with the ReportingCloud API. Consider the following scenario: A template is loaded from your ReportingCloud template storage using the REST API, loaded into the widget and saved back to the template storage. All within your application, on your preferred platform whether it is PHP, .NET Core, Java or Angular.

Stay tuned!