Convert a Smart Table Column Data to clickable actions in Fiori Elements Custom Card

[Abhi9]

HI,

I have a custom card in SAP FIORI Overview page . 

Card has a smart table with columns rendered via CDS view where in one of the column i need to convert the text to clickable actions.

My data from CDS looks like "Google,SAP" or "SAP" .

How can i convert these data to clickable actions .

My table extension code looks like below 

  onInit:function{
oSmartTable = this.getView().byId('LineItemsSmartTable');
                    oSmartTable.attachBeforeRebindTable(this.extendColumn.bind(this));
}
extentColumn:function(){
const oMultiStatusColumn = aColumns.find((col) => col.getLabel().getText() === "MultiStatusColumn");
var oMultiStatusColumnTemplate = new sap.m.HBox({
                        items: {
                            path: "MultiStatusColumn",
                            formatter: this.formatLinks.bind(this)
                        }
                    });
                 oMultiStatusColumn.setTemplate(oMultiStatusColumnTemplate);
}
formatLinks: function (sValue) {
                    if (!sValue) return [];
                    var aValues = sValue.split(", "); 
                    return aValues.map(function (sText) {
                        return new sap.m.Link({
                            text: sText,
                            press: function () {
                                sap.m.URLHelper.redirect(sText, true); 
                            }
                        });
                    });
                }
}

 This code throws either a missing template error or a List Binding error .

Any Suggestions or workaround for this scenario ? 

Thanks,

Abhi

[Abhi9 · Accepted solution]

i only found one way to fix this .

Since my data i am playing with is less than 3 records ... this is how i am handling ...

var oTemplate = new sap.m.HBox({ 
                        items: [
                            new sap.m.ObjectStatus({
                                text: { path: 'MultiStatusColumn', formatter: this.getFirstLink.bind(this) },
                                visible: { path: 'MultiStatusColumn', formatter: this.isFirstLinkVisible.bind(this) },
                                state: "Warning",
                                inverted: true,
                                active: true,
                                press: function (oEvent) {
                                    this.onPressAlert(oEvent);
                                }.bind(this)
                            }),
                            // new sap.m.Text({ text: " | ", visible: { path: 'MultiValueColumn', formatter: this.isSecondLinkVisible.bind(this) } }), // Separator between links
                            new sap.m.ObjectStatus({
                                text: { path: 'MultiStatusColumn', formatter: this.getSecondLink.bind(this) },
                                visible: { path: 'MultiStatusColumn', formatter: this.isSecondLinkVisible.bind(this) },
                                state: "Warning",
                                inverted: true,
                                active: true,
                                press: function (oEvent) {
                                    this.onPressAlert(oEvent);
                                }.bind(this)
                            })
                        ]
                    });
                    oAlertColumn.setTemplate(oTemplate);
/* Call formatter functions */
 getFirstLink: function (sValue) {
                    if (!sValue) return "";
                    return sValue.split(",")[0].trim(); // Get the first value
                },
                getSecondLink: function (sValue) {
                    var aValues = sValue ? sValue.split(",") : [];
                    return aValues.length > 1 ? aValues[1].trim() : ""; // Get the second value
                },
                isFirstLinkVisible: function (sValue) {
                    return !!sValue; // Show if there's at least one value
                },
                isSecondLinkVisible: function (sValue) {
                    var aValues = sValue ? sValue.split(",") : [];
                    return aValues.length > 1; // Show second link only if there's a second value
                },

 I would love to hear more options on how we can handle array data from CDS view. 

Thanks,

Abhi