This website uses cookies. By continuing to browse or login to this website, you consent to the use of cookies. Learn more.
OK

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

Idea ID 2820491

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

Status: Already Offered Submitted by Commodore on ‎2020-08-26 14:57

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.

Labels
6 Comments
Ming-Feng
Micro Focus Frequent Contributor
Micro Focus Frequent Contributor
‎2020-08-31 04:01
‎2020-08-31 04:01
Status changed to: Waiting for Votes
 
Mingyan
Micro Focus Contributor
Micro Focus Contributor
‎2020-09-16 04:03
‎2020-09-16 04:03

@Alan Gross1  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

Ming-Feng
Micro Focus Frequent Contributor
Micro Focus Frequent Contributor
‎2020-09-16 08:13
‎2020-09-16 08:13
Status changed to: Already Offered
 
Alan Gross1
Commodore
Commodore
‎2020-09-21 07:02
‎2020-09-21 07:02

@Ming-Feng 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>

 

 

Alan Gross1
Commodore
Commodore
‎2020-09-28 11:38
‎2020-09-28 11:38

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

Mingyan
Micro Focus Contributor
Micro Focus Contributor
‎2020-09-29 09:27
‎2020-09-29 09:27

@Alan Gross1  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.

Most "Liked" Contributors
View All ≫
The opinions expressed above are the personal opinions of the authors, not of Micro Focus. By using this site, you accept the Terms of Use and Rules of Participation. Certain versions of content ("Material") accessible here may contain branding from Hewlett-Packard Company (now HP Inc.) and Hewlett Packard Enterprise Company. As of September 1, 2017, the Material is now offered by Micro Focus, a separately owned and operated company. Any reference to the HP and Hewlett Packard Enterprise/HPE marks is historical in nature, and the HP and Hewlett Packard Enterprise/HPE marks are the property of their respective owners.