SAPUI5 ValueHelpDialog Cells Empty

Question

I'm very new to coding and to StackOverflow. I'm trying to create a sapui5 Value Help Dialog ( class sap.ui.comp.valuehelpdialog.ValueHelpDialog) that is supposed to end up filtering search requests from a user table in the SAP backend service.

Right now, I can't even get it to display my mockdata properly. The mockdata consists of a "Personen.json" with an array of users with the following fields like this example snippet:

    [{
    "BewId": "2123456789",
    "Posno": 1,
    "PNumber": "P87879876",
    "Firstname": "Heinz",
    "Company": "Some company",
    "IsIntern": true,
    "Lastname": "Wolff"
}, {
    "BewId": "2123456789",
    "Posno": 2,
    "PNumber": "P23498711",
    "Firstname": "Karl",
    "Company": "some company",
    "IsIntern": true,
    "Lastname": "Schmidt"
}]

I've tried almost anything I can think of:

Putting literal values instead of the bindings in the text field of the cells.
Using getTableAsync().then instead of getTable().
Various different paths including the full path through the entire folder tree and /Personen (which doesn't make sense with the current structure of the JSON I don't think).
using bindRows() instead of bindAggregation().
Creating a normal table on the root view with sap.m.Table instead of sap.ui.table.Table (which is the type of the internal table of the ValueHelpDialog as far as I can tell). This displayed the data without problems.
Changing the syntax of my Personen.json to have a single collection within it Personen and changing the path to /Personen in the binding function.
Following the example from the sample as closely as possible.

Defining the column structure in the controller with addColumn() instead of defining it in a model as I have it now:

"columnModel.json"
{cols": [
{
    "label": "{i18n>pNumber}",
    "template": "{PNumber}"
},
{
    "label": "{i18n>firstname}",
    "template": "{Firstname}"
},
{
    "label": "{i18n>lastname}",
    "template": "{Lastname}"
}]}

Bellow is the event handler function for the value help press in my main view controller:

    handleValueHelp: function () {
            var oColModel = this.getView().getModel("columnsModel");
            var oUserModel = this.getView().getModel("userModel");
            this._oValueHelpDialog = sap.ui.xmlfragment("appName.view.ValueHelpPopover", this);
            this.getView().addDependent(this._oValueHelpDialog);

            var oTable = this._oValueHelpDialog.getTable();

            oTable.setModel(oUserModel);
            oTable.setModel(oColModel, "columns");

            var oTemplate = new sap.m.ColumnListItem({
                type: sap.m.ListType.Active,
                cells: [
                    new sap.m.Label({
                        text: "{PNumber}"
                    }),
                    new sap.m.Label({
                        text: "{Firstname}"
                    }),
                    new sap.m.Label({
                        text: "{Lastname}"
                    })
                ]
            });

            if (oTable.bindRows) {
                oTable.bindAggregation("rows", "/");
            }

            if (oTable.bindItems) {
                oTable.bindAggregation("items", "/", oTemplate);
            }

            this._oValueHelpDialog.update();

            this._oValueHelpDialog.open();

        }

My XML view fragment for the ValueHelpDialog:

    "ValueHelpPopover.fragment.xml"
    <core:FragmentDefinition xmlns:vhd="sap.ui.comp.valuehelpdialog" xmlns:core="sap.ui.core" xmlns="sap.m">
<vhd:ValueHelpDialog id="valueHelp" title="{i18n>valueHelpTitle}" ok=".onValueHelpOkPress" cancel=".onValueHelpCancelPress"
    afterClose=".onValueHelpAfterClose" key="Firstname" descriptionKey="Lastname"></vhd:ValueHelpDialog>

Currently, I'm not getting any error messages, but I'm getting this output: https://ibb.co/q58sk1V When I select the rows, I can tell from the key that they are objects from my mock json odata model, but the cell text is still blank.

I want the binded values PNummer, Firstname, Lastname to show up in the cells as shown in the template.

Things I want to try but haven't gotten the chance yet or can't figure out how:

Using the example product collection
Using a formatter on the bindings to see what actually reaches the cells (my colleague suggested this). I haven't been able to figure out how to do this in this situation yet.

Any help would be MASSIVELY appreciated.

Cheers

Can you create a jsbin and add the code, so we can check what's the issue. — Saddamhussain
What additional code do you need? I thought I posted the relevant code here already. — Delectable Tea

Saddamhussain Saddamhussain · Accepted Answer · 2019-10-04T12:25:41

Add Column to the table then you are able to see the row with actual value in the table.

 var oColumn = new sap.ui.table.Column({
        label: new sap.m.Label({text: "PNumber"}),
        template: new sap.m.Text({text: "{PNumber}"}),
        width: "100px"
});

if (oTable.bindRows) {
        oTable.addColumn(oColumn);
        oTable.bindAggregation("rows", "/");
}

SAPUI5 ValueHelpDialog Cells Empty

2 Answers