Solved: Build Html Cards through service in Thingworx

Hrishabh.Sharma · ‎Nov 29, 2024

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 +=
" \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.

PEHOWE · ‎Dec 09, 2024

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

View solution in original post

Rocko · ‎Nov 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...

Hrishabh.Sharma · ‎Nov 29, 2024

No, that's not works. I tried.

Rocko · ‎Dec 02, 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.

PEHOWE · ‎Dec 09, 2024

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