Tabs

If you access the option to insert a new Person record, you can visualize the following screen:

TransactionFeatures_img02

As you can see, the transaction form has many attributes, so the end-user has to vertically scroll, in order to fulfill the information.

The Challenge

We would like to improve the UX to create a more friendly layout. Modify the Transaction object in order to add tabs so we can organize the attributes:  

TransactionFeatures_img03.png

Comment & Tips

  • You can cut the attribute nodes selecting some of them and pasting them inside the other tables, executing ‘Control + X’ or right-click, ‘Cut’.
  • Use the real-time preview to visualize the new customizations
  • You must have in any part of the instance of Person transaction, the table named "TableAttributes" that is defined by default as a Panel titled ´General Information´. It is not necessary to maintain it as a Panel, but it is mandatory to have it in the form of the transaction. 

Now the information is grouped and it´ll be easier for the end-users to work with this form. Generate and execute the application (F5) and navigate to the Person list in order to create a new record: 

TransactionFeatures_img05.5

Summary

Well done! You should now be able to:

  • Use tabs to organize your layouts
  • Use the real-time preview to create your layouts