[UI5] Things that Demo Kit didn’t tell you. <Column> / [UI5] Dinge, die Demo-Kit Ihnen nicht mitgeteilt hat. <Column>

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.

Alignment of a Column

Ausrichtung eines Column

Sap.m.Column has a property called “hAlign”, with it user could easily change the horizontal alignment of a Column. In Fiori Guideline it clearly tells us the usage of it.

• Left-align: text, IDs, phone numbers, URLs, status, passwords and email addresses.
• Right-align: numbers, amounts, dates and times.
• Center-align: icons.

Es gibt eine Eigenschaft nennt “hAlign” in Sap.m.Column. Damit kann man die horizontal Ausrichtung eines Column lecht verändern. Fiori Guideline hat die Verwendung der Eigenschaft deutlich erklärt:

• Links ausrichten: Text, IDs, Telefonnummer, URLs, Status, Passwort und Emailaddresse.
• Rechts ausrichten: Nummer, Menge, Datum und Zeit.
• Zentrale ausrichten: Symbol.

Pop-in

Pop-in

For responsive table there is a wonderful feature called “column pop-in”, which means when the sreen size is getting smaller, some columns could pop-in to the content. Here we have a table with three columns and the last two can pop-in.

Da gibt es eine supere Eigenschaft nennet “Column pop-in” in einer ansprechender Tabelle. Sie bedeutet, wenn die Größe des Bildschirm kleiner werden, einige Columns kann in den Inhalt pop-in. Hier haben wir eine Tabelle mit drei Columns und die letzte zwit Columns kann pop-in.

The structure of pop-in columns

Die Struktur der pop-in Coloumns

Let’s have a look at the screenshot. We could see that when the last two columns pop-in, there is only one column left in the <thead> block. And even we only have one ListItem in the Table, there are two rows (<tr>) inside. The two pop-in Columns are in the second row. But the second row’s tabindex is -1, which means the second row is not focusable. For the user it seems that there is only one row.

Lass uns das Bildschirmfoto sehen. Wenn die letzte zwei Columns pop-in, da gibt es nur ein Column in dem <thead> Block. Obwohl wir nur ein ListItem in der Tabelle haben, gibt es zwei Reihen (<tr>) darin. Die zwie pop-in Columns sind in der zweite Reihe. Aber tabindex der zweite Reihe ist -1, was bedeutet, die zweite Reihe ist nicht fokussierbar. Deshalb sehen die zwei Reihe wie ein aus.

How is the table’s layout changed

Wie wird das Layout der Tabelle verändert

When the width of a table is changed, there is a function in sap.ui.Device will invoke the _notifyResize function in Column.js. Here we could see a variable called “_media”, which tell the current Column the width of the table. Then the Column will decide to pop-in or not. Then it will notity the table to adjust the layout.

Wenn die Breite einer Tabelle verändert wird, eine Funktion von sap.ui.Device wird die _noticyResize Funktion in Column.js aufrufen. Hier sehen wir eine Variable nennt “_media”, die die Breite der Tabelle dem Column mitteilt. Dann entscheidet das Column, ob pop-in oder nicht. Dann benachrichtiget es die Tabelle, um das Layout zu verändern.

The Column is still “visible” even you could not see it

Das Column is noch “visible”, auch wenn Sie sie nicht sehen können

If you set the demandPopin property to false, then the column will disappear when the screen size is too small. But the property “visible” is still be true.

Wenn du die demandPopin Eigenschaft false setzen, das Column verschwindet wenn die Bildschirmgröße zu klein ist. Aber die “visible” Eigenschaft ist noch true.