How do I use widgetDataMap and setData methods on a segment to create a 2 column Cards interface for mobile as shown in the image attached?

HCL Volt MX Volt MX Forum
1
This thread was migrated from an old forum. It may contain information that are no longer valid. For further assistance, please post a new question or open a support ticket from the Customer Support portal.

**Image removed for security reasons**

2

Hello @Zvhwv Bvxtew​

Please check the below article link, which talks about the same requirement.

https://basecamp.kony.com/s/article-detail/a046A00000CaifmQAB/popup-look-and-feel-using-a-flex-container-widget

Download the app and check the functionality to achieve the same in your app.

3

Hi and thanks @Twvcey Rvndvll​ - I already had my App configured similar the demo shared - However still not getting how data is set dynamically from the controller as the Demo app uses static (Master data) ?

4

Hello @Zvhwv Bvxtew​

If the data is coming from service then you have to filter the data as per you design. For example, if the segment has 2 labels but from service if you are getting 4 labels of the data then you have to filter the response and modify the data and set to segment using setData().

5

@Twvcey Rvndvll​

This is how I currently have it - bit the same data is repeated in each row (same in two columns)

setDataToCard: function (APIData) { try { if (APIData.length) { this.view.segXXX.removeAll(); 
        this.view.segXXX.widgetDataMap = {
          "friendlyName": "friendlyName",
          "sourceOrgAbbrName": "sourceOrgAbbrName",
          "sourceMediaTypeTxt": "sourceMediaType",
          "shortDescription": "shortDescription",
          "sourceMediaSymbol": "sourceMediaIcon",
          "friendlyNameR": "friendlyName",
          "sourceOrgAbbrNameR": "sourceOrgAbbrName",
          "sourceMediaTypeTxtR": "sourceMediaType",
          "shortDescriptionR": "shortDescription",
          "sourceMediaSymbolR": "sourceMediaIcon"
        };

    this.view.segXXX.setData(APIData);</code><p>The APIdata is 1 array of objects - how do divide it ?</p>
6

Hi @Zvhwv Bvxtew​

Can you please share the APIData(result) which you are setting for the segment.. Need to check the format of the the APIData.

7

[
{
“sourceMediaId”:“1BbcnlK032WGcOqYiGUckg”,
“createdAt”:“2018-09-11T13:56:36.498Z”,
“sourceOrgAbbrName”:“CABI”,
“sourceMediaType”:“PDF”,
“id”:“15oxu6n3psYgy2uo64UKGO”,
“shortDescription”:“Lorem stuff Lorem stuff Lorem stuff Lorem stuffsLorem stuff Lorem stuff Lorem stuff Lorem stuffs”,
“friendlyName”:“Lorem stuff Lorem stuff Lorem stuff Lorem stuffs”,
“sourceMediaSize”:“224904”,
“sourceMediaContentType”:“application/pdf”,
“sourceMediaIcon”:“”
},
{
“sourceMediaId”:“5HJQAGzXRCCYiOmQIQiUkG”,
“createdAt”:“2018-09-11T12:20:00.689Z”,
“sourceOrgAbbrName”:“GiZ”,
“sourceMediaType”:“PDF”,
“id”:“3V5X0kQ8bmW2aKSU4AOE4c”,
“shortDescription”:“Lorem stuff Lorem stuff Lorem stuff Lorem stuffsLorem stuff Lorem stuff Lorem stuff Lorem stuffs”,
“friendlyName”:“TLorem stuff Lorem stuff Lorem stuff Lorem stuffsn”,
“sourceMediaSize”:“4241787”,
“sourceMediaContentType”:“application/pdf”,
“sourceMediaIcon”:“”
},
{
“sourceMediaId”:“5QuLH2Jabm04k4w0M2uGCa”,
“createdAt”:“2018-09-07T12:28:37.711Z”,
“sourceOrgAbbrName”:“Kisima”,
“sourceMediaType”:“PDF”,
“id”:“28NvpLrlEAYSKIGy0CKwCg”,
“shortDescription”:“Lorem stuff Lorem stuff Lorem stuff Lorem stuffsLorem stuff Lorem stuff Lorem stuff Lorem stuffs”,
“friendlyName”:“Lorem stuff Lorem stuff Lorem stuff Lorem stuffs”,
“sourceMediaSize”:“3127244”,
“sourceMediaContentType”:“application/pdf”,
“sourceMediaIcon”:“”
},
{
“sourceMediaId”:“AhCo073rz2QYg02k6gUI8”,
“createdAt”:“2018-09-05T07:01:32.774Z”,
“sourceOrgAbbrName”:“Evans”,
“sourceMediaType”:“Audio”,
“id”:“nDTe7WitS8qIkEK86wsiK”,
“shortDescription”:“TLorem stuff Lorem stuff Lorem stuff Lorem stuffsLorem stuff Lorem stuff Lorem stuff Lorem stuffs “,
“friendlyName”:“Audio Content Test”,
“sourceMediaSize”:“4113874”,
“sourceMediaContentType”:“audio/mp3”,
“sourceMediaIcon”:“”
},
{
“sourceMediaId”:“6ysyvDVJniUuQMAI6U8oK4”,
“createdAt”:“2018-09-05T06:59:21.515Z”,
“sourceOrgAbbrName”:“Incent”,
“sourceMediaType”:“Video”,
“id”:“6G1tT1NZNmkQ8wc8QWueaS”,
“shortDescription”:“Lorem stuff Lorem stuff Lorem stuff Lorem stuffsLorem stuff Lorem stuff Lorem stuff Lorem stuffs”,
“friendlyName”:“Video Content Test”,
“sourceMediaSize”:“7077998”,
“sourceMediaContentType”:“video/mp4”,
“sourceMediaIcon”:“”
},
{
“sourceMediaId”:“4imyFoxbnWsk6yOsQAes8k”,
“createdAt”:“2018-09-03T12:00:04.455Z”,
“sourceOrgAbbrName”:“Agrico”,
“sourceMediaType”:“PDF”,
“id”:“6M8hE2zrlCusQgIAEmE8WO”,
“shortDescription”:“Lorem stuff Lorem stuff Lorem stuff Lorem stuffsLorem stuff Lorem stuff Lorem stuff Lorem stuffs”,
“friendlyName”:“Lorem stuff Lorem stuff Lorem stuff Lorem stuffsLorem stuff Lorem stuff Lorem stuff Lorem stuffs”,
“sourceMediaSize”:“3249263”,
“sourceMediaContentType”:“application/pdf”,
“sourceMediaIcon”:“”
},
{
“sourceMediaId”:“57ZoIr44A86imEMcwM6KwM”,
“createdAt”:“2018-08-31T13:07:19.434Z”,
“sourceOrgAbbrName”:“Agrico”,
“sourceMediaType”:“PDF”,
“id”:“5m2fBjduiQuEsq6O00Ao8s”,
“shortDescription”:“Lorem stuff Lorem stuff Lorem stuff Lorem stuffsLorem stuff Lorem stuff Lorem stuff Lorem stuffs”,
“friendlyName”:“Lorem stuff Lorem stuff Lorem stuff Lorem stuffs”,
“sourceMediaSize”:“98306”,
“sourceMediaContentType”:“application/pdf”,
“sourceMediaIcon”:“”
},
{
“sourceMediaId”:“5ik1kmZFuw4mU48oGcMOE8”,
“createdAt”:“2018-08-31T08:24:15.834Z”,
“sourceOrgAbbrName”:“CIP”,
“sourceMediaType”:“PDF”,
“id”:“22FsdvOsUgsmam8EMEW0oe”,
“shortDescription”:“Lorem stuff Lorem stuff Lorem stuff Lorem stuffsLorem stuff Lorem stuff Lorem stuff Lorem stuffs.”,
“friendlyName”:“ILorem stuff Lorem stuff Lorem stuff Lorem stuffs”,
“sourceMediaSize”:“341966”,
“sourceMediaContentType”:“application/pdf”,
“sourceMediaIcon”:“”
},
{
“sourceMediaId”:“29jdEqiWsUO8Wyo0oAoKsq”,
“createdAt”:“2018-08-30T10:09:02.436Z”,
“sourceOrgAbbrName”:“CIP”,
“sourceMediaType”:“PDF”,
“id”:“EILBf7EUHAAs2e2mEw08O”,
“shortDescription”:“Lorem stuff Lorem stuff Lorem stuff Lorem stuffs “,
“friendlyName”:“H—Lorem stuffLorem stuffLorem stuff”,
“sourceMediaSize”:“1655316”,
“sourceMediaContentType”:“application/pdf”,
“sourceMediaIcon”:“”
},
{
“sourceMediaId”:“5YsvIhyUO4OIaOEC8YkicW”,
“createdAt”:“2018-08-28T08:48:07.896Z”,
“sourceOrgAbbrName”:“CIP”,
“sourceMediaType”:“PDF”,
“id”:“3hBCyEIi8wOWmC0ks4qySc”,
“shortDescription”:”--------------------”,
“friendlyName”:“Lorem stuff”,
“sourceMediaSize”:“856376”,
“sourceMediaContentType”:“application/pdf”,
“sourceMediaIcon”:“”
},
{
“sourceMediaId”:“5v54HfkclUqu84MkQwYWAa”,
“createdAt”:“2018-08-24T09:28:07.237Z”,
“sourceOrgAbbrName”:“CIP”,
“sourceMediaType”:“PDF”,
“id”:“3VLwcQMi7YGikqseAisE2m”,
“shortDescription”:”--------------d”,
“friendlyName”:“SLorem stuff”,
“sourceMediaSize”:“1384718”,
“sourceMediaContentType”:“application/pdf”,
“sourceMediaIcon”:“”
},
{
“sourceMediaId”:“1fn53VTNKYUGa4csQSmu8q”,
“createdAt”:“2018-08-23T09:34:06.443Z”,
“sourceOrgAbbrName”:“CIP”,
“sourceMediaType”:“PDF”,
“id”:“14TAtysnKMw8GUyYMmMsQe”,
“shortDescription”:“----------”,
“friendlyName”:“Select the Best “,
“sourceMediaSize”:“2701096”,
“sourceMediaContentType”:“application/pdf”,
“sourceMediaIcon”:“”
},
{
“sourceMediaId”:“2WfJ3TNULY8auKk04Y2wAk”,
“createdAt”:“2018-06-19T12:52:24.271Z”,
“sourceOrgAbbrName”:“GiZ”,
“sourceMediaType”:“PDF”,
“id”:“3Vxch7oSqAQy8O8ESwUuic”,
“shortDescription”:”----------ns”,
“friendlyName”:"Lorem stuff-------- ",
“sourceMediaSize”:“9641797”,
“sourceMediaContentType”:“application/pdf”,
“sourceMediaIcon”:“”
},
{
“sourceMediaId”:“2G4E8zLgY8gKaakAeq6Sio”,
“createdAt”:“2018-06-19T12:26:00.155Z”,
“sourceOrgAbbrName”:“NPCK”,
“sourceMediaType”:“PDF”,
“id”:“3yGC7NKX1SUYQi4OK0QSYw”,
“shortDescription”:“Third catalogue ---------”,
“friendlyName”:“Lorem stuff------”,
“sourceMediaSize”:“11726251”,
“sourceMediaContentType”:“application/pdf”,
“sourceMediaIcon”:“”
}
]

There it is @Twvcey Rvndvll​ - removed some sensitive text