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.