Widget Section Element: Cards
The cards element can be used to add upto 25 cards per element to a widget. Cards can be added in two styles:
- Gallery - Shows cards in a gallery view
- Carousel - Presents cards in a scrollable layout, where you can swipe to move through a collection
JSON template for a card element
{
"type" : "cards",
"style" : {
"view" : <carousel | gallery>,
"size" : <small | medium | large>,
},
"data" : [
{
"title" : $card-title,
"description" : $card-description,
"image_url" : $image-url-for-card,
"icon_url" : $icon-url,
"buttons" : $button-object
}
]
}
Attributes
| Attribute name | Data type & limit | Default value |
| type* | String (cards) | - |
| style | Object | style options |
| data* | Array (25) | data options |
Style options
| Attribute name | Data type & limit | Default value |
| view | String Allowed values: carousel | gallery | carousel |
| size | String Allowed values: small | medium | large | small |
data options
| Attribute name | Data type | Limit |
| title* | String | 1000 |
| description | String | 500 |
| image_url | String | 1000 |
| icon_url | String | 1000 |
| buttons | Button Object | 2 |
Sample Deluge Script - Widget
id = "smallcards";
if(target.containKey("id"))
{
id = target.get("id");
}
sections = list();
tabsArr = {{"label":"Cards - Small","id":"smallcards"},{"label":"Cards - Medium","id":"mediumcards"},{"label":"Cards - Large","id":"largecards"}};
if(id == "smallcards")
{
imgUrls = {"https://www.zohowebstatic.com/sites/zweb/images/cliq/cliq-home-emojis-sprie-2x.png","https://images.pexels.com/photos/1289845/pexels-photo-1289845.jpeg","https://images.pexels.com/photos/789141/pexels-photo-789141.jpeg","https://images.pexels.com/photos/1522186/pexels-photo-1522186.jpeg","https://images.pexels.com/photos/458976/pexels-photo-458976.jpeg","https://images.pexels.com/photos/1692984/pexels-photo-1692984.jpeg","https://images.pexels.com/photos/796620/pexels-photo-796620.jpeg","https://images.pexels.com/photos/1687678/pexels-photo-1687678.jpeg","https://media2.giphy.com/media/L0NBiacS9VDd8p4aL7/giphy.gif","https://images.pexels.com/photos/40803/lion-animal-predator-big-cat-40803.jpeg"};
header = {"title":"Cards - Small"};
dataList = list();
i = 1;
buttonList = {{"label":"Button 1","type":"invoke.function","name":"buttonfunction","id":"boardId","emotion":"negative"},{"label":"Button 2","type":"invoke.function","name":"buttonfunction","id":"boardId","emotion":"positive"}};
for each imgUrl in imgUrls
{
eachData = Map();
eachData.put("title","Image " + i);
eachData.put("description","Description" + i);
eachData.put("image_url",imgUrl);
eachData.put("icon_url",imgUrl);
eachData.put("buttons",buttonList);
dataList.add(eachData);
i = i + 1;
}
elements = list();
elements.add({"type":"cards","data":dataList,"style":{"view":"gallery","size":"small"}});
elements.add({"type":"divider"});
sections.add({"id":1,"elements":elements});
return {"type":"applet","tabs":tabsArr,"active_tab":id,"sections":sections,"header":header};
}
else if(id == "mediumcards")
{
imgUrls = {"https://www.zohowebstatic.com/sites/zweb/images/cliq/cliq-home-emojis-sprie-2x.png","https://images.pexels.com/photos/1289845/pexels-photo-1289845.jpeg","https://images.pexels.com/photos/789141/pexels-photo-789141.jpeg","https://images.pexels.com/photos/1522186/pexels-photo-1522186.jpeg","https://images.pexels.com/photos/458976/pexels-photo-458976.jpeg","https://images.pexels.com/photos/1692984/pexels-photo-1692984.jpeg","https://images.pexels.com/photos/796620/pexels-photo-796620.jpeg","https://images.pexels.com/photos/1687678/pexels-photo-1687678.jpeg","https://media2.giphy.com/media/L0NBiacS9VDd8p4aL7/giphy.gif","https://images.pexels.com/photos/40803/lion-animal-predator-big-cat-40803.jpeg"};
header = {"title":"Cards - Medium"};
dataList = list();
i = 1;
buttonList = {{"label":"Button 1","type":"invoke.function","name":"buttonfunction","id":"boardId","emotion":"negative"},{"label":"Button 2","type":"invoke.function","name":"buttonfunction","id":"boardId","emotion":"positive"}};
for each imgUrl in imgUrls
{
eachData = Map();
eachData.put("title","Image " + i);
eachData.put("description","Description" + i);
eachData.put("image_url",imgUrl);
eachData.put("icon_url",imgUrl);
eachData.put("buttons",buttonList);
dataList.add(eachData);
i = i + 1;
}
elements = list();
elements.add({"type":"cards","data":dataList,"style":{"view":"gallery","size":"medium"}});
elements.add({"type":"divider"});
sections.add({"id":1,"elements":elements});
dataList = list();
i = 1;
for each imgUrl in imgUrls
{
eachData = Map();
eachData.put("title","Image " + i);
eachData.put("image_url",imgUrl);
dataList.add(eachData);
i = i + 1;
}
return {"type":"applet","tabs":tabsArr,"active_tab":id,"sections":sections,"header":header};
}
else if(id == "largecards")
{
imgUrls = {"https://www.zohowebstatic.com/sites/zweb/images/cliq/cliq-home-emojis-sprie-2x.png","https://images.pexels.com/photos/1289845/pexels-photo-1289845.jpeg","https://images.pexels.com/photos/789141/pexels-photo-789141.jpeg","https://images.pexels.com/photos/1522186/pexels-photo-1522186.jpeg","https://images.pexels.com/photos/458976/pexels-photo-458976.jpeg","https://images.pexels.com/photos/1692984/pexels-photo-1692984.jpeg","https://images.pexels.com/photos/796620/pexels-photo-796620.jpeg","https://images.pexels.com/photos/1687678/pexels-photo-1687678.jpeg","https://media2.giphy.com/media/L0NBiacS9VDd8p4aL7/giphy.gif","https://images.pexels.com/photos/40803/lion-animal-predator-big-cat-40803.jpeg"};
header = {"title":"Cards - Large"};
dataList = list();
i = 1;
buttonList = {{"label":"Button 1","type":"invoke.function","name":"buttonfunction","id":"boardId","emotion":"negative"},{"label":"Button 2","type":"invoke.function","name":"buttonfunction","id":"boardId","emotion":"positive"}};
for each imgUrl in imgUrls
{
eachData = Map();
eachData.put("title","Image " + i);
eachData.put("description","Description" + i);
eachData.put("image_url",imgUrl);
eachData.put("icon_url",imgUrl);
eachData.put("buttons",buttonList);
dataList.add(eachData);
i = i + 1;
}
elements = list();
elements.add({"type":"title","text":"With Buttons, Title, Description, Image, Icon"});
elements.add({"type":"cards","data":dataList,"style":{"view":"gallery","size":"large"}});
elements.add({"type":"divider"});
sections.add({"id":1,"elements":elements});
return {"type":"applet","tabs":tabsArr,"active_tab":id,"sections":sections,"header":header};
}
return {"type":"applet","tabs":tabsArr,"active_tab":id,"sections":sections};
