Hello!
I have included a page list as embedded data in a view. It appears as a table and displays the 4 properties I have selected on each row.
When the user clicks on a row of that table, is it possible to display, beneath the table, all of the properties on the page that correspond to that row in a 3-column edit mode?
Please note that I have selected only 4 columns to prevent horizontal scrolling. The actual requirement includes about 40 fields.
Alternatively, is it possible to display each row of the table as a card?
Thanks in advance!
Sourav
Hi @SouravS1559,
Since you mentioned there are around 40 fields, there are a couple of approaches we can consider:
Repeating View:
Using a repeating view, we can display all 40 fields for each record. However, from a UI perspective, this may lead to excessive vertical scrolling and a cluttered layout. So this option may not provide the best user experience.
Table (Recommended Approach):
Using a table, we can limit the visible columns (for example, 4–5 fields) to avoid horizontal scrolling. Within this approach, there are two common options:
Table Row:
Users can directly edit limited fields within the table row itself. This works well for quick updates but is not suitable for handling all 40 fields.
Modal Dialog:
On clicking a row or an action (like edit/add), a modal dialog can be opened. In this modal, you can include the view which was configured in the data type as per my suggestion you can take Hierarchical form Template to differentiate all the 40 fields into seperational tabs and for each tab you can add upto 8-10 fields and also for adding the fields and editing the fields you can keep different views also.This provides a cleaner and more user-friendly way to manage large forms.
Technically, it’s possible to display cards with few configurations, but it’s not recommended design pattern to show 40 data fields in Card layout.
I recommend to go with Repeating View or Table with Modal dialog (for Add/Edit) in 25.1 version. This allows you to show the primary fields in the tabular view, all other fields can be shown in Modal dialog during Edit/Add and provides the flexiblity to trigger data pages, visiblity conditions, etc.. I lean towards Tabe design with Modal apporach so the user doesn’t need to perform lot of scrolling (top to bttom)
Hello! Great question about managing your embedded data table with many fields.
Yes, you have excellent options for handling your 40-field requirement while maintaining a clean user experience!
Modal Dialog Approach (Recommended for Your Use Case):
You can configure your Embedded Data field to display as a “Table (editable in a dialog box)”. With this configuration:
- Your table displays only the 4 key columns you’ve selected, preventing horizontal scrolling
- When users click on a row, a modal dialog opens where they can view and edit all properties
- In the modal, you can define a custom View that displays all 40 fields in an organized layout (including your desired 3-column format)
To set this up:
- In the Display as list, select Table
- In the Add and edit records within list, select Modal
- In the View for add and edit modal field, define which View you want to use for add and edit operations (this is where you can create your 3-column layout with all 40 fields)
Alternative Approaches:
While the context doesn’t explicitly mention displaying rows as cards for embedded data tables, you do have other options:
- Multiple Personalized Views: Create different Views, each with a limited set of columns tailored to specific user needs
- Table Editable in Rows: Configure the table to allow inline editing, though this may be less suitable for 40 fields
Mobile Consideration:
On mobile resolutions, these tables automatically adapt and display as a flat list for better readability, which provides a card-like experience automatically.
The modal approach is ideal for your scenario because it keeps the table clean and focused while providing full access to all fields when needed!
Thank you so much, Sohan! I had already built the popup feature. It was literally OOTB. But the problem is that a PDF file is displayed on the left, and the popup blocks its view, whereas the user needs to constantly cross-check with the PDF. Thus, the pop-up solution is unacceptable.
I will try with the repeating grid now.
Hi @SouravS1559
That makes sense. Since the PDF needs to remain visible for cross checking, a popup isn’t ideal as it blocks the view.Trying a repeating View a better approach here, as it allows users to work on the data while still viewing the PDF side by side
They didn’t like the repeating view either! Isn’t it possible to display all of the properties in a three-column layout beneath the table when a row is clicked in it?
Yes, it is possible to achieve this requirement in a single table. Initially, only the required 3–4 fields can be displayed in the table to avoid horizontal scrolling and improve the UI experience. For one of the properties, the “Display as Link to object” option can be enabled from the property configuration. Once this checkbox is enabled the field will be convert to the link , clicking on that property value will open the full page view of the embedded data object.
In the full page view, you can add all the remaining fields which is required to you.The embedded page can be displayed in a structured format without overcrowding the main table. This approach helps maintain a clean and user-friendly UI while still providing access to complete details when required.
Additionally, As per your requirement the user needs to constantly cross-check with the PDF. In the full page view can also include the UI Gallery field component such as “Display PDF” to render documents or attachments. To use this component field , the PDF content should be available in Base64 format so that it can be displayed properly within the Constellation UI.
*If they not satisfied with this.Than we should go with custom component.
@SouravS1559 Are you in the User Experience Expert Circle? I would like to move this under that area, so it can be found with other Constellation questions. However, if you are not a member you won’t be able to respond (until you join), so don’t want to just move on you.
Please let me know if you join and i’ll move.
image525Ă—506 26.3 KB
