Form with table

It allows displaying the forms for collecting the header information and a table to collect the items' information.

Example

Here’s an example of what a basic form with a table looks like.

Why to use?

We have added that component to cover creating the objects that have header information and items information.

For example, if you need to create an invoice or purchase order or sales order or payment, you would need to specify the header information and items information in all of these objects.

We have been thinking of different ways to create the objects with header and item information, and we had many options. Still, we found that if you would like to make this through the chat, it will take much time for the user to answer the questions. Even if you got all the data, you would need to give the user some option to review all the items and then change them if needed. And if the user needs to add 10 items? It is impossible to design such a conversation dialog without the form with the table.

Guidance

Design the header block (form)

The general guidance for working with forms can be found here.

Forms

On one screen, we will display two blocks, one block with the form and the second block with the table. It is important that those blocks can fit the screen without the scroll. To achieve this, you need to try to minimize the form's height, in other words, to have fewer lines in the form. With this, we can leave more space for the table. Remember that you can resize the form and make it small, large, and full size.

First block includes the standard form fields.

Second block includes the table for adding items.

Add items with editable tabel

Use an editable table if you have up to 6 columns or fewer. The main rule is that they should fit into the screen full size. You can edit and add new items right inside the editable table by clicking on the table line. When you click on the line, all the fields become available for filling or editing.

Add items with sidebar form

If you have many columns (fields) for filling during the adding items, it is better to use the right sidebar with the form. With that option, users would need to press the button to add a new item, and they will see on the right side a form with the fields. This form can include as many fields as you need. Based on the conversation flow you are working on, you would need to decide which type of table is better to use - the editable table or sidebar to manage the items.

Adding the items with sidebar form.

Manage items

Add the opportunity for the users to manage the items. Most probably, they would need options to edit already added items or delete and duplicate them.

Add action buttons

To store the form results with a table, add action buttons, so users can save the data or cancel the creation of the object.

How to use

You can find more information about using this component here.

Next sections to read

Forms

Learn about the usage of the form inside the conversation flow.

Tables

Display the content in the chat with tables.