cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - You can Bookmark boards, posts or articles that you'd like to access again easily! X

Build Html Cards through service in Thingworx

Hrishabh.Sharma
12-Amethyst

Build Html Cards through service in Thingworx

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.

3 REPLIES 3

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...

No, that's not works. I tried.

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.

Announcements


Top Tags