Skip to Content

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.

Navigation / Navigation

A very common interaction of table is user clicks a row and it will navigate to the item’s detail page. And there are some ways to achieve it. For examples:

  1. Make the identifier cell a clickable link.
  2. Set the type of the ColumnListItem as “Detail”. There will be a “Pencil” button which could lead the user to the detail page.
  3. Set the type of the ColumnListItem as “Navigation” and the mode of the Table as “SingleSelectMaster”, then the whole item will be clickable.

In the Fiori Guideline it is recommanded to use the third approach.

Es ist eine sehr häufige Interaktion, dass man eines Element klicken und das Detail des Element sehen. Und es gibt manche Wegs um dieser Interaktion zu leisten:

  1. Setze eines klickbar Link ins Identifier-Cell.
  2. Setze “Type” des ColumnListItem als “Detail”. Dann gibt es einen Pencil-Button, das kann die Benutzer ins Detail-Page leiten.
  3. Setze “Type” des ColumnListItem als “Navigation” und “Mode” des Table als “SingleSelectMaster”, dann das ganze Element ist klickbar.

Fiori Guideline vorschlagt, dass man die letzte weg benutzen.

Alignment / Ausrichtung

Vertical / Vertikal

There are some guidelines about vertical alignment of ColumnListItem. Normally all the cells in a row should be top aligned. But if there are some controls with larger height, then we should consider to use central alignment.

Es gibt einige Guidelines über Vertikal-Ausrichtung eines ColumnListItem. Normalerweise alle Cells von der Reihe sollen oben ausgerichtet werden. Aber wenn da gibt es einige Kontrolle, die großer Höhe haben, dann benutzen wir zentral Ausrichtung.

Horizontal / Horizontal

About horizontal alignment, the guidelines are quite detailed. we could easily follow them to determin which alignment should be used for a specific cell:

  1. Left alignment: text, ID, phone number, URL, password, email address, status.
  2. Right alignment: number, amount, date, time.
  3. Central alignment: icon, checkbox.

Über horizontal Ausrichtung gibt es einige detaillierte Guidelines. Wir können einfach sie folgen, um die Ausrichtung von verschiedene Zellen bestimmen:

  1. Linke Ausrichtung: Text, ID, Telefonnummer, URL, Passwort, Email-Addresse, Status,
  2. Rechte Ausrichtung: Nummer, Datum, Zeit.
  3. Zentrale Ausrichtung: Symbol, CheckBox.

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply