CODEWITHSUNDEEP
sapui5
Naveen
Naveen

Reputation: 777

How to Do Growing Table / List

JS

var model = new JSONModel();
model.setData(data);
this.getView().byId("Table").setModel(model);
var table = this.getView().byId("Table");
table.bindItems({
    path: "/",
    template: new sap.m.ColumnListItem({
        cells: [
            new sap.m.Image({
                src: "{photo}"
            }),
            new sap.m.Text({
                text: "{name}"
            })
        ]
    })
});

Here I have few data. Using above code I can list in table. Now I want to list only first 10 items in table and rest of the data will show after scroll down only. After scroll down mouse I need to call a function to get next 10 datas. How we can call a function after scroll down in sapUi5;

Upvotes: 3

Views: 14451

Answers (2)

Boghyon Hoffmann
Boghyon Hoffmann

Reputation: 18044

OData

In order to enable growing on scroll, you need to take the following into account:

  • The sap.m.ListBase control (e.g. sap.m.Table) needs:

    • growing="true"
    • growingThreshold="<number of entries to load>"
    • growingScrollToLoad="true"

  • The list control needs to be inside a scrollable container.

    (growingScrollToLoad) can only be used if the growing property is set to true and only if there is one instance of sap.m.List or sap.m.Table inside the scrollable scroll container (e.g sap.m.Page). (Source)

Run this example to see it in action:

globalThis.onUI5Init = () => sap.ui.require([
  "sap/ui/model/odata/v4/ODataModel",
  "sap/ui/core/mvc/XMLView",
], async function (ODataModel, XMLView) {
  "use strict";

  const model = new ODataModel({
    serviceUrl: "https://services.odata.org/TripPinRESTierService/(S(5pfdhufu5ymr2jh0az0vcwqe))/",
    autoExpandSelect: true,
  });

  const control = await XMLView.create({
    definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc"
      xmlns="sap.m"
      displayBlock="true"
      height="100%"
    >
      <App>
        <Page showHeader="false">
          <List
            growing="true"
            growingThreshold="5"
            growingScrollToLoad="true"
            items="{/People}"
          >
            <StandardListItem title="{FirstName}" />
          </List>
        </Page>
      </App>
    </mvc:View>`,
    models: model,
  });
  control.placeAt("content");
});
<script id="sap-ui-bootstrap"
  src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
  data-sap-ui-oninit="onUI5Init"
  data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.unified,sap.ui.layout"
  data-sap-ui-theme="sap_horizon_dark"
  data-sap-ui-async="true"
  data-sap-ui-compatversion="edge"
  data-sap-ui-excludejquerycompat="true"
  data-sap-ui-xx-waitForTheme="init"
></script>
<body id="content" class="sapUiBody"></body>

Manual Hook

How we can call a function after scroll down in SAPUI5?

In case there is no OData service (no $top & $skip) but the app still needs to be notified when the user reached almost the end of the list (either by scrolling or by keyboard), you can make use of the sap.ui.core.delegate.ScrollEnablement. And since the list control is supposed to be already inside a scrollable container (such as Page), creating a new instance of ScrollEnablement is not necessary. Instead, there is a handy API to retrieve the corresponding ScrollEnablement delegate which is getScrollDelegate. Once you have the delegate object, call setGrowingList which awaits a hook function that gets invoked when the bottom is almost reached.

Example:

sap.ui.require([
  "sap/m/library",
], sapMLib => sapMLib.getScrollDelegate(myListControl).setGrowingList(() => {
  // Your code to load more data
}, sapMLib.ListGrowingDirection.Downwards));

Note

  • The API getScrollDelegate returns only the reference when the scrollable parent control has already created an instance of ScrollEnablement before rendering.
  • The API setGrowingList is protected, meaning it's not meant to be used by application developers. Please use the API only when extending the target control.

Upvotes: 6

Jaro
Jaro

Reputation: 1754

You need to set property growing to true. And also set property growingThreshold to 10.

Upvotes: 1

Related Questions