Idea ID: 2820491

SM Webtier - HTML Viewer - Ability to integrate JS Libraries like D3 or Jquery

Status : Already Offered
Already Offered
See status update history
9 months ago

HTML Visualizations are very powerful within SM when it comes to collect data from various tables and present them to the user in a user friendly, state-of-the-art way.

But the HTML viewer is currently limited to pure HTML and CSS which obviously limits the possiblities.

It would be great if it would be possible to integrate some common JavaScript libraries such as D3.js or Jquery. This would open up complete new possiblities when it comes to data visualizations.

We would suddenly be able to visualize data dependencies in a modern and interactive way.

Many records within SM have relationships and follow hiearchies e.g. departmenty, locations, cost centers - but also Incidents, Changes etc. have n:n relationships (screlation table).

A framework like D3 would allow to visualize such data much more efficiently  - imagine this could be done directly within the SM UI. Currently we have to build separeate webapplications and integrate them through REST. This leads to separate UIs and does not provide the best user experience.

Tags:

  •   regarding using D3 in SM side, we did not mean that we support creating some HTML that includes a JS Library (e.g. jquery, d3) provided on the webtier webapplication server which is not supported so far, what we meant is by leveraging HTML-Generating Script property defined in HTML Viewer widget, you can define  ScriptLibrary function that generates the content for the HTML Viewer,  and you can invoke D3 or Jqurey in ScriptLibrary by adding D3/Jquery related code/statements in ScriptLibrary as well to make sure they can be used/invoked.

    Speaking of example, you can refer to ScriptLibrary:reportHtaD3Help which includes D3 related functions,  you can add your perfered D3 functions in ScriptLibrary such as with name D3_Help, and then you can invoke D3 related functions by calling them from HTML-Generating Script property defined in HTML Viewer.

    Hope that we've made ourselves clear.

  •  The status "Already offered" is from my perspective wrong. Please see my previous statement. May I ask you to verify this once more?

  •  We are using plenty of HTML Visualization already - I therefore know very good how the HTML Viewer works. But so far I was not able to integrate any JS Libraries.

    In general as soon as we add some <script></script> sections to the html code the corresponding sections are escaped.

    I did look at the function configurationManagement.getPendingChanges - but I can not spot any example of jquery/D3 in there. This function is creating some plain html table with data?!

    Can you please provide us with an example how we can create some HTML that includes a JS Library (e.g. jquery, d3) provided on the webtier webapplication server and that includes some <script> evaluating javascript code involving the previously included JS library.

    Some example HTML Viewer output (source) of some POCs we have done with D3.js

    The HTML below looks proper - but when looking at the source you will see that <script> is escaped e.g. ;&lt;/script&gt;&lt; 

     

    <html><link rel='stylesheet' type='text/css' href='/smweb/css/typography.css'/><link rel='stylesheet' type='text/css' href='/smweb/branding/css/1586243755888_htmlviewer.css'/><link rel='stylesheet' type='text/css' href='/smweb/css/9.64.0004/webtier.css'/>&lt;script src=&quot;https://d3js.org/d3.v5.min.js&quot;&gt;&lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;var svg = d3.select('body').append('svg') .attr('height', '500') .attr('width', '500') .append('g') .attr(&quot;transform&quot;, &quot;translate(&quot;0, 0&quot;)&quot;);&lt;/script&gt;<div id="lutDivBody"><svg height="500" width="500"><g transform="translate(0, 0)"></g></svg><p>test</p></div><script type='text/javascript' >var isHover = false;var isEmbeddedFrame = true;parent.cwc.mapKeys(document);parent.cwc.preventDragAndDrop(document);</script></html>

     

     

  •   actually that we have already provided similar functionlity OOB,we have HTML-Generating Script property defined in HTML Viewer widget, you can define a Javascript function that generates the content for the HTML Viewer, and you can invoke D3 or Jqurey in this Javascript. For example, open the form "configurationItem" in Forms Designer. On the "CI Changes" notebook page there is an HTML Viewer which has "configurationManagement.getPendingChanges" for that property. To see this function, type SL in the command line, and then type configurationManagement in the Name field. Click Search, and then scroll down. You will see the "getPendingChanges" function