- SAP Managed Tags:
For English reader:
Hello I’m Cong, now I’m a developer in CEC Revenue Cloud in Chengdu, China. This blog is writter in both English and German (for learning purpose). Please just read the bold paragraphs and sorry for the inconvenience. Thanks a lot!
Für Deutsch Leser:
Hallo ich bin Cong. Jetzt bin ich ein Developer bei CEC Revenue Cloud in Chengdu, China. Ich möchte Programmierkenntnisse hier teilen und gleichzeitig mein Deutsch verbessern. Deshalb schreibe ich Blogs in Deutsch und Enghlish. Wenn Sie Syntaxfehler finden, oder mein Deutsch ist zu schlecht zu verstehen, bitte lesen Sie die English Version und sagen Sie mir den richtigen Ausdruck. Herzlich Dank und ich hoffe, dass Sie meinen Blog genießen. Prost!
For UI5 developers maybe Demo Kit is the most useful tool. We could find many documents as well as samples. But sometimes we still have some questions that Demo Kit could not answer. So I would like to write a blog series called “Things that Demo Kit didn’t tell you“. In this series I would like to explore the controls with some other resources, e.g. source code, Fiori Guideline. Hope this series could help you and if you find any mistakes in my blog please also help to point them out. Thank you! Catalog of this series could be found here.
Vielleicht ist Demo-Kit das sinnvollste Werkzeug für UI5-Developer. Da können wir viele Dokument und Beispiele finden. Aber manchmal gibt es noch einige Frage, die Demo-Kit nicht antwort kann. Deshalb möchte ich eine Blogserie “Dinge, die Demo-Kit Ihnen nicht mitgeteilt hat” schreiben. In diese Serie erforsche ich Controls mit verschiedener Ressource, z.B. Quellcode, Fiori Guideline. Ich hoffe, dass diese Serie sinnvoll für Sie ist. Wenn Sie Fehler in meinem Blog finden, bitte hinweisen Sie mir. Danke schön. Der Katalog dieser Serie ist hier.
In many cases we will add new items into a list (table), in the Fiori guideline it says that the newly added item should appear as the first item with a blue highlight. Sometimes this requirement has some conflicts with data sorting. For example if the model is sorted by the "Product Name", then the newly added product might be located at other places. To solve this issue we always add another field in the data like "addedIndex", a new item will always have a new "addedIndex" and it will be the very first sorting condition for the data.
In vielen Fällen hinzufügen wir neue Elemente zu einer List (Table). In Fiori Guideline finden wir, dass die neu hinzufügten Elemente als erstes Element erscheinen soll. Es soll auch blaue Highlight haben. Manchmal diese Anforderung hat Konflikt mit Data-Sorting. Zum Beispiel, wenn die Model von 'Product Name' sortiert wird, dann die neu hinzufügte Element wird vielleicht in andere Lokation gelegt. Um diese Problem zu lösen hinzufügen wir normalerweise eine neue Eigenschaft namens 'addedIndex'. Und sie ist die erste Sorting-Bedingung der Daten.
For list and table there is a mode called "MultiSelect", in this mode user could select multiple items. For a table you could see a checkbox in front of the column headers. User could easily select/deselect all items with it. But in a List there's no such a checkbox. I think it's not so user-friendly. But we found a way to do it with keyboard. User could firstly focus on a list item and press "Ctrl + A" to select/deselect all the items.
Für List und Table gibt es ein Mode namens 'MultiSelect'. In dieser Mode können wir mehrere Elemente wählen. In einen Table gibt es einen CheckBox vor der Column-Headers. Damit kann benutzer allen Elemente einfach wählen. Leider gibt es in einen List keinen sochen CheckBox. Aber finden wir, man kann es machen mit Tastatur. Zum erste fokusieren auf einer Elemente des List und drücken 'Ctrl + A' um allen Elemente zu wählen.
But for both approaches user only select all the already loaded data. This conflicts with the guideline that all items the user can reach by scrolling must be (de)selected. If user want to process all the data, this should be done in the back-end.
Aber für beide Methode kann man nur alle geladene Daten wählen. Es hat Konflikt mit die Guideline, dass alle Elemente, die man mit Scrolling erreichen kann, sollen gewählt werden. Wenn man alle Datei behandeln möchte, die Behandelung soll in Back-End gemacht werden.
In the "selectionChange" event there are two parameters "selected" and "selectAll". With the second parameter we could know if user is trying to select all the items. You could give it a try in this demo. And you could also see there is a small issue that it's impossible to distinguish between "deselect one item" and "deselect all". I think if the logic of "selectAll" is "if user's operation is on all the items" instead of "if user is selecting all the items", then the issue could be fixed.
In dem "selectionChange" Event gibt es zwei Parameters 'selected' und 'selectAll'. Mit dem zweite Parameter können wir wissen, ob der Benutzer alle Elemente wählen. Du kannst in diesem Demo probieren. Und du kannst auch finden, dass es einen kleine Problem haben. Es ist unmöglich zu unterscheiden von 'abwählen eine Element' und 'abwählen alle Elemente'. Und wenn man die Logik von 'ob der Benutzer alle Elemente wählen' zu 'ob die Operation des Benutzer ist für alle Elemente' verändern, dieses Problem wird gelöst.
Growing list could provide very good user experience. There are many ways to achieve lazy loading. About Twitter's lazy loading and UI5's OData lazy loading you could refer to my blog [Frontend]Lazy loading, see how Twitter does it / [Frontend] Lazy loading, sehen Sie wie Twitter es tut / [前端]懒加载，看... and my colleague jerry.wang 's Blog How does UI5 AutoGrowing list(Lazy Load behavior) work. Here we will have a look how does a growing list work with non-OData.
Growing-List kann sehr gut User-Experience bieten. Es gibt verschiedene Weg um Lazy-Loading zu leiten. Über die Theorie des Lazy-Loading von Twitter und UI5 OData kannst du in meinem Blog [Frontend]Lazy loading, see how Twitter does it / [Frontend] Lazy loading, sehen Sie wie Twitter es tut / [前端]懒加载，看... und mein Kollege jerry.wang 's Blog How does UI5 AutoGrowing list(Lazy Load behavior) work finden. Hier machen wir eine Erforschung über Growing-List mit Non-OData.
In order to achieve a growing list, firstly you have to put your list into a scrollable container, like sap.m.ScrollContainer or sap.m.Page. In this case when user is scrolling, following logic will be executed:
Um einen Growing-List zu leiten, zum erst musst du deinen List in einen Scrollable-Container liegen. Z.B. sap.m.ScrollContainer oder sap.m.Page. In diesem Fall wenn der Benutzer scrollt, folgende Logik wird ausgeführt:
So you can see actually it's not "lazy loading" but "lazy showing". In order to work with non-OData service we have to load more elements in the "updateFinished" event's handler. Since the number of displayed items should be smaller then the model's size, the property "growingThreshold" should be smaller than the the size of the items in each request. That is the tricky part.
Dann kannst du finden, dass es tatsächlich nicht "Lazy-Loading" aber "Lazy-Showing" ist. Um einen Non-OData-Service mitzuarbeiten, wir müssen mehr Elemente in "updateFinished" Event's Handler laden. Weil die Anzahl der anzeigte Elemente kleiner als die Größe des Model ist, die Eigenschaft "growingThreshold" muss kleiner als die Größe der Elemente in dem Request. Das ist der interesante Teil.
Hello I’m Cong, now I’m a developer in CEC Revenue Cloud in Chengdu, China. This blog is writter in both English and German (for learning purpose). Please just read the bold paragraphs and sorry for the inconvenience. Thanks a lot!
Für Deutsch Leser:
Hallo ich bin Cong. Jetzt bin ich ein Developer bei CEC Revenue Cloud in Chengdu, China. Ich möchte Programmierkenntnisse hier teilen und gleichzeitig mein Deutsch verbessern. Deshalb schreibe ich Blogs in Deutsch und Enghlish. Wenn Sie Syntaxfehler finden, oder mein Deutsch ist zu schlecht zu verstehen, bitte lesen Sie die English Version und sagen Sie mir den richtigen Ausdruck. Herzlich Dank und ich hoffe, dass Sie meinen Blog genießen. Prost!
For UI5 developers maybe Demo Kit is the most useful tool. We could find many documents as well as samples. But sometimes we still have some questions that Demo Kit could not answer. So I would like to write a blog series called “Things that Demo Kit didn’t tell you“. In this series I would like to explore the controls with some other resources, e.g. source code, Fiori Guideline. Hope this series could help you and if you find any mistakes in my blog please also help to point them out. Thank you! Catalog of this series could be found here.
Vielleicht ist Demo-Kit das sinnvollste Werkzeug für UI5-Developer. Da können wir viele Dokument und Beispiele finden. Aber manchmal gibt es noch einige Frage, die Demo-Kit nicht antwort kann. Deshalb möchte ich eine Blogserie “Dinge, die Demo-Kit Ihnen nicht mitgeteilt hat” schreiben. In diese Serie erforsche ich Controls mit verschiedener Ressource, z.B. Quellcode, Fiori Guideline. Ich hoffe, dass diese Serie sinnvoll für Sie ist. Wenn Sie Fehler in meinem Blog finden, bitte hinweisen Sie mir. Danke schön. Der Katalog dieser Serie ist hier.
Adding New Items into a List / Hinzufügen neuer Elemente zu einer List
In many cases we will add new items into a list (table), in the Fiori guideline it says that the newly added item should appear as the first item with a blue highlight. Sometimes this requirement has some conflicts with data sorting. For example if the model is sorted by the "Product Name", then the newly added product might be located at other places. To solve this issue we always add another field in the data like "addedIndex", a new item will always have a new "addedIndex" and it will be the very first sorting condition for the data.
In vielen Fällen hinzufügen wir neue Elemente zu einer List (Table). In Fiori Guideline finden wir, dass die neu hinzufügten Elemente als erstes Element erscheinen soll. Es soll auch blaue Highlight haben. Manchmal diese Anforderung hat Konflikt mit Data-Sorting. Zum Beispiel, wenn die Model von 'Product Name' sortiert wird, dann die neu hinzufügte Element wird vielleicht in andere Lokation gelegt. Um diese Problem zu lösen hinzufügen wir normalerweise eine neue Eigenschaft namens 'addedIndex'. Und sie ist die erste Sorting-Bedingung der Daten.
Select All / Wählen Alle
For list and table there is a mode called "MultiSelect", in this mode user could select multiple items. For a table you could see a checkbox in front of the column headers. User could easily select/deselect all items with it. But in a List there's no such a checkbox. I think it's not so user-friendly. But we found a way to do it with keyboard. User could firstly focus on a list item and press "Ctrl + A" to select/deselect all the items.
Für List und Table gibt es ein Mode namens 'MultiSelect'. In dieser Mode können wir mehrere Elemente wählen. In einen Table gibt es einen CheckBox vor der Column-Headers. Damit kann benutzer allen Elemente einfach wählen. Leider gibt es in einen List keinen sochen CheckBox. Aber finden wir, man kann es machen mit Tastatur. Zum erste fokusieren auf einer Elemente des List und drücken 'Ctrl + A' um allen Elemente zu wählen.
But for both approaches user only select all the already loaded data. This conflicts with the guideline that all items the user can reach by scrolling must be (de)selected. If user want to process all the data, this should be done in the back-end.
Aber für beide Methode kann man nur alle geladene Daten wählen. Es hat Konflikt mit die Guideline, dass alle Elemente, die man mit Scrolling erreichen kann, sollen gewählt werden. Wenn man alle Datei behandeln möchte, die Behandelung soll in Back-End gemacht werden.
In the "selectionChange" event there are two parameters "selected" and "selectAll". With the second parameter we could know if user is trying to select all the items. You could give it a try in this demo. And you could also see there is a small issue that it's impossible to distinguish between "deselect one item" and "deselect all". I think if the logic of "selectAll" is "if user's operation is on all the items" instead of "if user is selecting all the items", then the issue could be fixed.
In dem "selectionChange" Event gibt es zwei Parameters 'selected' und 'selectAll'. Mit dem zweite Parameter können wir wissen, ob der Benutzer alle Elemente wählen. Du kannst in diesem Demo probieren. Und du kannst auch finden, dass es einen kleine Problem haben. Es ist unmöglich zu unterscheiden von 'abwählen eine Element' und 'abwählen alle Elemente'. Und wenn man die Logik von 'ob der Benutzer alle Elemente wählen' zu 'ob die Operation des Benutzer ist für alle Elemente' verändern, dieses Problem wird gelöst.
Growing / Growing
Growing list could provide very good user experience. There are many ways to achieve lazy loading. About Twitter's lazy loading and UI5's OData lazy loading you could refer to my blog [Frontend]Lazy loading, see how Twitter does it / [Frontend] Lazy loading, sehen Sie wie Twitter es tut / [前端]懒加载，看... and my colleague jerry.wang 's Blog How does UI5 AutoGrowing list(Lazy Load behavior) work. Here we will have a look how does a growing list work with non-OData.
Growing-List kann sehr gut User-Experience bieten. Es gibt verschiedene Weg um Lazy-Loading zu leiten. Über die Theorie des Lazy-Loading von Twitter und UI5 OData kannst du in meinem Blog [Frontend]Lazy loading, see how Twitter does it / [Frontend] Lazy loading, sehen Sie wie Twitter es tut / [前端]懒加载，看... und mein Kollege jerry.wang 's Blog How does UI5 AutoGrowing list(Lazy Load behavior) work finden. Hier machen wir eine Erforschung über Growing-List mit Non-OData.
In order to achieve a growing list, firstly you have to put your list into a scrollable container, like sap.m.ScrollContainer or sap.m.Page. In this case when user is scrolling, following logic will be executed:
- If you have a "scroll to load" callback function, go to the next step.
- If your current position is in the last 100 pixels in the scrollable container, go to the next step.
- If number of displayed items is smaller than number of all the items, then show more and fire the event "updateFinished"
Um einen Growing-List zu leiten, zum erst musst du deinen List in einen Scrollable-Container liegen. Z.B. sap.m.ScrollContainer oder sap.m.Page. In diesem Fall wenn der Benutzer scrollt, folgende Logik wird ausgeführt:
- Wenn du eine "scroll to load" Callback-Funktion hast, gehe zum nächsten Schritt.
- Wenn deine aktuelle Position ist in die letzte 100 Pixels des Scrollable-Container, gehe zum nächsten Schritt.
- Wenn die Anzahl der anzeigte Elemente ist kleiner als die Anzahl der Alle Elemente, dann zeige mehr und das Event "updateFinished" schießen.
So you can see actually it's not "lazy loading" but "lazy showing". In order to work with non-OData service we have to load more elements in the "updateFinished" event's handler. Since the number of displayed items should be smaller then the model's size, the property "growingThreshold" should be smaller than the the size of the items in each request. That is the tricky part.
Dann kannst du finden, dass es tatsächlich nicht "Lazy-Loading" aber "Lazy-Showing" ist. Um einen Non-OData-Service mitzuarbeiten, wir müssen mehr Elemente in "updateFinished" Event's Handler laden. Weil die Anzahl der anzeigte Elemente kleiner als die Größe des Model ist, die Eigenschaft "growingThreshold" muss kleiner als die Größe der Elemente in dem Request. Das ist der interesante Teil.
4 Comments
