How to display an editable table inside the edit entity component Cuba Platform Frontend UI

Question

I have an account entity, which has a contact type and value props inside, In Frontend UI, this data should be represented as a table inside of Form when creating or editing an account. What is the best way of doing this?

Answer 1

It depends on what is the relationship between Account and Contact: is it Association or Composition.

Composition

If Contact can only exist as part of an Account, then these entities should have One-to-Many Composition relationship. In this case framework will automatically do exactly what you want: Account entity editor will contain a table to add/remove/edit Contacts.

Note, however, that in this case:

• You won't be able to create "standalone" Contacts that are not tied to an Account instance.
• Contacts will be only persisted once you save the "parent" Account entity.

Association

If Contact can exist on its own, then Account and Contact should be connected using Association. In this case generated Account entity editor will only allow you to link existing Contacts (you'll need to create Contacts using its own editor).

If you want both Association relationship and a table inside the editor you can create your own form field component:

• How to create custom form controls using Ant Design UI Kit
• NestedEntitiesTableFieldComponent source code - this is the nested table component that is generated in case of Composition relationship.

---

See this Data Modelling guide for more details on Composition vs. Association.