Display a JavaScript Control Populated from a Content Server Generated JSON Object

Chance_Raymond

Hi,

I apologize in advanced if this topic was already covered. I just need to know a general direction to get started.

I wish to show a Google Chart within a Smart UI perspective tile populated from a Content Server generated JSON object.  I am willing to use a simple IFRAME to encapsulate the Google Chart for a proof in concept.  Down the road I will investigate developing a customized widget. What is the easiest way to generate the JSON and then populate the control?  Should I develop a separate WebReport to create a JSON file first or can I make everything async to generate and render all at once?  It must operate inside a perspective tile.  I appreciate any links to previous discussions or examples.    

Ian_Whitfield

Hi,

For a proof of concept it's probably easiest to embed an iFrame in an HTML WebReport widget.

For custom JSON you can either generate it on the server in the same report and store it as a local variable to pass into the Google chart or make a separate REST call to a WebReport to get the data. If the data is fairly simple, storing locally would probably be quicker to get you up and running. To generate JSON you should look at the TOJSON and INSERTJSON tags. If you want to work with grouped counts then you might want to check out the INSERTJSON @FILTEREDCOUNT directive. An example of storing JSON in a local variable would be:

<script>
var myChartData = [LL_REPTAG_DATASOURCE TOJSON /];
</script>

The WebReports Rest API is documented at https://developer.opentext.com/webaccess/#url=%2Fawd%2Fresources%2Fapis%2Fcs-rest-api-for-cs-16-s%23!%2Fwebreports&tab=501

There are also Smart View SDK components to act as wrappers for Rest calls to call WebReports. SDK components can also be accessed from within the HTML WebReport widget. A simple example of the kind of code you might use is:

<script>

    csui.require(['csui/utils/contexts/page/page.context','csui/utils/contexts/factories/connector', 'webreports/models/wrtext/wrtext.model'], function (PageContext, ConnectorFactory, WrTextModel) {

         // Create a connector for your Content Server instance
        var context = new PageContext,
            connector = context.getObject(ConnectorFactory),
            // Create an instance of the WrText model
            wrTextModel = new WrTextModel({
            id: [LL_REPTAG_$myWebReport /],
            parameters: [
                {
                    name: 'parm1',
                    value: 'val1'
                }
            ]
        },{connector: connector});

        wrTextModel
                .fetch()
                .done(function(){
                    var myCustomJSON = wrTextModel1.get("source");
                    console.log(myCustomJSON);
                });

    });

</script>

Not sure if you are aware but there is some charting support in the Smart View SDK. The d3 library is included at csui/lib/d3. In the 2019-06 update there is a generic SDK component available at csui/controls/charts/visual.count that provides some basic chart types too.

There is also the WebReports Visual Count widget which allows you to build interactive charts using WebReports data. The docs for this widget are at https://knowledge.opentext.com/knowledge/piroot/lleswebr/v160209/lleswebr-agd/en/html/webr-widgets-visualdata-bg.htm

Regards
Ian