Search code examples
javascriptjsonxmlodatasapui5

SAPUI5 ValueHelpDialog Cells Empty


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


Solution

  • For some reason defining a table in the xml view popover fragment of the Value Help dialog that goes bellow the actual internal table caused the problem to be fixed, even after I removed the table and the code was essentially identical to how it was when it was still not working. Any ideas as to why this was? I'm curious to understand this problem.