Skip to Content

Recently our team is trying to redesign our UI. And we would like to use a List Report Floorplan to present the customers master data. Everything looks good until we met a problem. That we want to show the contacts of the customers in the table. A contact has four properties: first name, last name, email and phone. And a customer could have multiple contacts. How to show such big data in a table cell?

Kürzlich versucht unser Team, unsere UI wieder zu gestalten. Wir möchen ein List Report Floorplan benutzen, um die Customers Daten zu anzeigen. Alles lauft ganz gut bis eines Problem. Dass wir die Contacts der Customers in der Tabelle anzeigen möchten. Ein Contact hat vier Eigenschaften: Vorname, Nachname, Email und Telefonnummer. Und ein Customer kann viele Contacts haben. Wie kann man diese große Daten in eine Tabellenzelle anzeigen?

After some investigation we finally find a solution, which contains three parts:

Nach einigen Recherchen finden wir endlich eine Lösung, die aus drei Teilen besteht:

  • Format the data into a string. For example, if we want to show two contacts in cell, we will convert the data into a string: “Liu, Jackie (jackie.liu@kfp.com, +86 2852460001) Song, Feda (feda.song@kfp.com, +86 2852460002)“, In this string you could see all the four properties of the two contacts.
  • Formatieren die Daten in einen String. Zum Beispiel, wenn wir zwei Contacts anzeigen möcheten, die Daten werden  in einen String formatiert: “Liu, Jackie (jackie.liu@kfp.com, +86 2852460001) Song, Feda (feda.song@kfp.com, +86 2852460002)“. Dann können wir sehen, dass alle vier Eigenschaften der Customers anzeigt werden.
  • The second thing is, what if there are too many items? The row will be too high. Then we have an idea that normally we will just show one item in the cell and there is a “XX more” link under it, which could let the user expand the data.
  • Das zweites Problem ist, was wäre wenn da es zu viele Artikels gibt? Die Reihe wird zu groß werden. Dann haben wir eine Idee, dass normalerweise wir nur ein Artikel anzeigen. Und darunter gibt es ein “XX more” Link. Mit diesem Link kann man die Daten erweiten.
  • The last thing is, in the List Report we have a search function. And user could search for a customer with contact’s name, contact’s email and contact’s phone. To fulfill the Fiori guidline we need to show the matched item in the result table. So when user is searching for a contact, we will always show the contact at the first place.
  • Das letztes Problem ist, es gibt eine Suchenfunktion in dem List Report. Der benutzer kann einen Customer mit Name eines Contact, Email eines Contact und Telefonnummer eines Contact suchen. Um Fiori Guideline zu erfüllen, wir müssen das übereinstimmende Artikel anzeigen.Deshalb wenn man einen Contact sucht, diese Contact wird immer in den ersten Platz anzeigt.

 

 

 

 

To report this post you need to login first.

1 Comment

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

Leave a Reply