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.

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.