How to create links on the column of table in SAPUI5

Question

Could anyone please give me some idea how to create links on table column contents (only for two columns) and this contents are coming from ODATA service and after pressing any content it should go to the particular link?

Ex. Suppose the every table content has {mainUrl} and

For 1st column: Deep Link: /bb/ccc/eee?reqid = Example URL: {mainUrl}/bb/ccc/eee?reqid=6000

For 2nd column: Deep Link: /bb/cc/fff?jobid= Example: {mainUrl}/bb/cc/fff?jobid=4000

I tried couple of the examples: ex-1 , ex-2 . But I'm not sure how to fix it for this case. I'd really appreciate if you could provide me some example codes if it's possible.

Thanks in advance.

Answer 1

A simple example how to create links on table columns is based on Link - Subtle example.

1. In the /mockdata/products.json for each 'ProductPicUrl' field value remove a host name 'https://openui5.hana.ondemand.com' .

2. As a result the link in the column has got a host of the dev server, eg is 'http://localhost:8081/test-resources/sap/ui/documentation/sdk/images/HT-2001.jpg'

3. In the Link.view.xml view change the first column content by adding a formatter function see Walkthrough Step 22: Custom Formatters :

    <ColumnListItem> <Link text="{Name}" href="{ path: 'ProductPicUrl', formatter: '.hrefFormatter' }" />

4. And implement the formatter in the Link.view.xml controller file:

    hrefFormatter: function(sUrl) { var mainUrl = 'https://openui5.hana.ondemand.com'; return mainUrl + sUrl; }

5. Using the formatter provides modified link URL: 'https://openui5.hana.ondemand.com/test-resources/sap/ui/documentation/sdk/images/HT-1002.jpg'

Answer 2

I've solved this by writing the codes in JS file:

createAllColumns: function () {
.....
.....
 var oTemplate = new Text({
                        text: sText,
                        wrapping: false
                    }); // for default columns

                    if (oChar.charId === "columnID") {
                        oTemplate = new Link({
                            text: sText,
                            press: this.readTheID
                        });
                    }
......
......
},

readTheID: function (oEvent) {
            const oBind = oEvent.getSource().getParent().getBindingContext("service name");
            const obj = oBind.getObject().columnID;
            const value = oEvent.getSource().getProperty("text");

            return models.getInstance().getOdataWrapper().getEntitySet({
                path: "/OdataServiceEntitySet",
                filters: [new Filter({ path: "name", operator: FilterOperator.EQ, value1: "mainUrl" }),
                new Filter({ path: "columnID", operator: FilterOperator.EQ, value1: obj })],
                And: true
            }).then((odata) => {
                if (odata.length > 0) {
                    var mainLink = odata[0].getObject().value;
                    sap.ui.require([
                        "sap/m/library"
                    ], sapMLib => sapMLib.URLHelper.redirect(mainLink + "/bb/ccc/eee?reqid=" + value, /*new window*/true));
                }
            }).catch((err) => {
                sap.m.MessageToast.show("Failed");
            });

        },
 

Note : "sap/m/Link" produces dynamic links. In that case we can't reserve the links into the column contents, that's why user can't copy the link directly from the content.