- 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 ignore the italic German paragraphsand 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.
As the guideline ComboBox works as a "bigger" Select (for the case that number of Items between 13 and 200). But actually it's a Input.
Als die Richtlinie ist ComboBox ein "großer" Select (wenn die Menge der Items ist zwichen 13 und 200). Aber tatsächlich ist es ein Input.
Now we know that ComboBox works like both Input and Select, which property should we use? SelectedKey or value? From the samples in Demo-Kit we see that we should use selectedKey. Value is the text you could see in the ComboBox, but selectedKey is the real identifier of a Item. What if we use value? The fact is changing of value cannot lead to the changing of selectedKey. But the opposite works. So we should use selectedKey to guarantee that both selectedKey and value are changed at the same time.
Jetzt wissen wir, dass ComboBox arbeitet wie beide Input und Select. Dann die Frage ist, welche Eigenschaft sollen wir benutzen? SelectedKey oder value? In Demo-Kit Sample können wir sehen, dass selectedKey ist die richtige Auswahl. Value ist nur der Text in einem ComboBox, aber selectedKey ist die rechte Kennung eines Item. Was wäre wenn man value benutzen? Die Tatsache ist, dass die Veränderung von value nicht Veränderung von selectedKey führen kann, aber das Gegenteil kann. Deshalb sollen wir selectedKey benuzten, um die Veränderung von beide value und selectedKey zu garantieren.
But there is one thing we should take care, that both value and selectedKey are not required to be unique. I think this is a defect of UI5. When we invoke the setSelectedKey() function, the first match item will be selected. I think UI5 should make selectedKey unique.
Aber da gibt es eine Sache, die wir sich vorsehen müssen. Dass beide value und selectedKey nicht erforderlich einzigartig sind. Ich glaube, dass ein Defect des UI5 ist. Wenn man setSelectedKey() Funktion aufruft, dass das erstes abgestimmtes Item auswählen wird. SelectedKey soll einzigartig ist.
Maybe you have already noticed that ComboBox has a auto-complete function, that when user is typing something, ComboBox will help you to select the first matched item. From the source code we could see that the process is more complicated than it looks:
Vielleicht haben Sie schon beachtet, dass ComboBox eine Auto-Vervollsändigen-Funktion hat. Wenn man einige Charakter getippt hat, ComboBox wählt das erstes abgestimmtes Item aus. In den Quellcode können wir sehen, dass die Prozesse ist komplizierter:
I think the logic here is a little strange. Because for other controls the onChange or onSelectionChange functions are only invoked when user finishes his input. But for ComboBox they may be invoked when user is still typing. Another example is selectionChange event is fired when user is pressing keys to move focus in the dropdown list.
Ich glaube die Logik ist ein bischen seltsam. Für andere Controls die onChange oder onSelectionChange Funktionen werden aufgeruft, nur wenn der Benutzer seine Eingabe beendet hat. Aber für ComboBox sie können aufgerufen werden, wenn der Benutzer noch tippt. Ein anderes Beispiel ist, selectionChange wird ausgelöst, wenn der Benutzer die Tasten zum Verschieben des Fokus in der Dropdown-Liste drückt.
I was curious that the width of the dropdown list could automatically changed. The reason is it is a List in a Popover. Sap.m.Popover could adjust its width according to its content. And the minLengh of it is set with the width of ComboBox.
Ich habe Lust, wie wird die Breite der Dropdownliste automatisch verändern. Der Grund ist, dass sie ist eine Liste in einem Popover. Sap.m.Popover kann ihre Breite entsprechend seinem Inhalt anpassen. Und ihre minLength ist die Breite von ComboBox.
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 ignore the italic German paragraphsand 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.
ComboBox is acutally a Input
Tatsächlich ist ComboBox ein Input
As the guideline ComboBox works as a "bigger" Select (for the case that number of Items between 13 and 200). But actually it's a Input.
Als die Richtlinie ist ComboBox ein "großer" Select (wenn die Menge der Items ist zwichen 13 und 200). Aber tatsächlich ist es ein Input.
SelectedKey? Value?
SelectedKey? Value?
Now we know that ComboBox works like both Input and Select, which property should we use? SelectedKey or value? From the samples in Demo-Kit we see that we should use selectedKey. Value is the text you could see in the ComboBox, but selectedKey is the real identifier of a Item. What if we use value? The fact is changing of value cannot lead to the changing of selectedKey. But the opposite works. So we should use selectedKey to guarantee that both selectedKey and value are changed at the same time.
Jetzt wissen wir, dass ComboBox arbeitet wie beide Input und Select. Dann die Frage ist, welche Eigenschaft sollen wir benutzen? SelectedKey oder value? In Demo-Kit Sample können wir sehen, dass selectedKey ist die richtige Auswahl. Value ist nur der Text in einem ComboBox, aber selectedKey ist die rechte Kennung eines Item. Was wäre wenn man value benutzen? Die Tatsache ist, dass die Veränderung von value nicht Veränderung von selectedKey führen kann, aber das Gegenteil kann. Deshalb sollen wir selectedKey benuzten, um die Veränderung von beide value und selectedKey zu garantieren.
But there is one thing we should take care, that both value and selectedKey are not required to be unique. I think this is a defect of UI5. When we invoke the setSelectedKey() function, the first match item will be selected. I think UI5 should make selectedKey unique.
Aber da gibt es eine Sache, die wir sich vorsehen müssen. Dass beide value und selectedKey nicht erforderlich einzigartig sind. Ich glaube, dass ein Defect des UI5 ist. Wenn man setSelectedKey() Funktion aufruft, dass das erstes abgestimmtes Item auswählen wird. SelectedKey soll einzigartig ist.
Auto-complete function
Auto-Vervollständigen-Funktion
Maybe you have already noticed that ComboBox has a auto-complete function, that when user is typing something, ComboBox will help you to select the first matched item. From the source code we could see that the process is more complicated than it looks:
- Use user's input to filter the items.
- If the value in ComboBox is not changed by backspace/delete/cut, then:
- Set the first matched item as selectedItem, then the selectionChange event is fired.
- Make the rest of the text as selected (dark blue).
- The matched text will be bold.
Vielleicht haben Sie schon beachtet, dass ComboBox eine Auto-Vervollsändigen-Funktion hat. Wenn man einige Charakter getippt hat, ComboBox wählt das erstes abgestimmtes Item aus. In den Quellcode können wir sehen, dass die Prozesse ist komplizierter:
- ComboBox filtert die Items mit der Eingabe des benutzer.
- Wenn value des ComboBox nicht von Backspace/Delete/Cut verändert wird:
- Das erstes abgestimmtes Item wird as selectedItem ausgewählen. Dann ausgelöst selectionChange.
- ComboBox markierd den verbleibenden Text dunkel blau.
- Das abgestimmtes Text ist fett.
I think the logic here is a little strange. Because for other controls the onChange or onSelectionChange functions are only invoked when user finishes his input. But for ComboBox they may be invoked when user is still typing. Another example is selectionChange event is fired when user is pressing keys to move focus in the dropdown list.
Ich glaube die Logik ist ein bischen seltsam. Für andere Controls die onChange oder onSelectionChange Funktionen werden aufgeruft, nur wenn der Benutzer seine Eingabe beendet hat. Aber für ComboBox sie können aufgerufen werden, wenn der Benutzer noch tippt. Ein anderes Beispiel ist, selectionChange wird ausgelöst, wenn der Benutzer die Tasten zum Verschieben des Fokus in der Dropdown-Liste drückt.
Width of the dropdown list is changed automatically
Breite der Dropdownliste wird automatisch verändern
I was curious that the width of the dropdown list could automatically changed. The reason is it is a List in a Popover. Sap.m.Popover could adjust its width according to its content. And the minLengh of it is set with the width of ComboBox.
Ich habe Lust, wie wird die Breite der Dropdownliste automatisch verändern. Der Grund ist, dass sie ist eine Liste in einem Popover. Sap.m.Popover kann ihre Breite entsprechend seinem Inhalt anpassen. Und ihre minLength ist die Breite von ComboBox.
