Skip to main content
H
Hrishabh.Sharma13-Aquamarine
13-Aquamarine
November 29, 2024
Solved

Build Html Cards through service in Thingworx

  • November 29, 2024
  • 1 reply
  • 1160 views

HrishabhSharma_0-1732872641581.png

var users = [
{ name: "Jane Doe", role: "Interior Designer", imagePath: "/Thingworx/MediaEntities/LAYOUTTESTIMAGE" },

];

var result =
"<!DOCTYPE html>\n" +
"<html>\n" +
"<head>\n" +
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n" +
"</head>\n" +
"<body style=\"display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; height: 100vh; margin: 0; background-color: #f4f4f4; overflow-x: auto;\">\n";

for (var i = 0; i < 10; i++) {
result +=
" <!-- Card " + (i + 1) + " -->\n" +
" <div style=\"box-shadow: 0 10px 8px 0 rgba(0,0,0,0.2); display: inline-block; transition: 0.3s; width: 18%; margin: 10px; border-radius: 5px; background-color: #fff; overflow: hidden;\">\n" +
" <img src=\"" + users[0].imagePath + "\" alt=\"Avatar\" style=\"width: 100%; height: auto; display: block;\">\n" +
" <div style=\"padding: 16px; text-align: center;\">\n" +
" <h4 style=\"margin: 0; font-size: 1.5em; color: #333;\"><b>" + users[0].name + "</b></h4>\n" +
" <p style=\"margin: 8px 0 0; color: #777;\">" + users[0].role + "</p>\n" +
" </div>\n" +
" </div>\n";
}

result +=
"</body>\n" +
"</html>";


I have build cards through html css in thingworx services.

Can we add "amcharts gauge" in the place of image using Amcharts lib in services (Thingworx) in above code? Not through Extension.

Best answer by PEHOWE

Hello @Hrishabh.Sharma , When you try to access a library of JS, it can be very complex to get the syntax and firewall permissions correctly defined.  If you are committed to this approach, It is best to have a local copy of the JS files. 
This is done for 2 reasons. 1) you are no longer reaching between 2 servers to access files. This is generally not allowed as a security risk. 2) With a local copy there will be no changes to the library which you are using which could break your display.
This does make you responsible to update the library on a regular basis to maintain a secure page.
If you have a test HTML page which displays the chart you you are trying to create, I would be happy to take a look and see if I can show you how to move it into a ThingWorx environment.

Let me know if  you have any questions.

Regards,
pehowe
 

1 reply

Rocko
Rocko19-Tanzanite
19-Tanzanite
November 29, 2024

If you're generating HTML manually, you could as well insert the needed libraries there and see if that works:

var result =
"<!DOCTYPE html>\n" +
"<html>\n" +
"<head>\n" +
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n" +
" <script src=\"https://cdn.amcharts.com/lib/5/index.js\"></script>\n"+
"</head>\n" +...

Not that I'd recommend it though...

H
Hrishabh.Sharma13-AquamarineAuthor
13-Aquamarine
November 29, 2024

No, that's not works. I tried.

Rocko
Rocko19-Tanzanite
19-Tanzanite
December 2, 2024

You'll have to decide if you want a) build your webinterface quickly with the capabilities given with mashups, widgets, binding, Dashboards, gadgets, then use Mashup Editor, or b) use specific features of latest full-fledged web design frameworks. In that case you'd not use mashups, but only your framework and interact with ThingWorx over its REST API. Mixing both cases by hand-coding HTML into a HTML widget will not end well.

Terms & ConditionsCookie settingsAccessibility statement