Split View

To configure a Card Grid with a split-view layout, enabling a structured overview of items alongside detailed information for seamless navigation.

Expected output:

1st Step

  1. Start by creating a new blank transaction page.

2nd Step

  1. Click on Add Control and add a Card Grid.

3rd Step

  1. In the Design section, set the layout to Split View.

4th Step

  1. Configure the API section to connect the data source.

5th Step

  1. Perform the necessary data mapping for the card grid.

6th Step

  1. To attach a detail page on the right side:
    1. Before configuring the action in the Card Grid, create a separate form (e.g. Lead Detail) that will be attached via the dropdown in the action settings. Configure the form by setting up the label and integrating the GET API to fetch the required data, as demonstrated in the provided screenshots. Ensure the form design and data binding are correctly aligned with the card grid's requirements.

7th Step

  1. Configure the Action Settings
  2. Go to the Action tab of the Leads form and add an action.
    1. Select Action Type as Split View, and choose Form as the Sidebar View Type.
    2. Attach the specific form using the dropdown provided (e.g., Lead Detail) to link the corresponding details view to the card grid.
    3. In the Primary Key Field Name, enter the unique ID that will be used to filter specific data from the table and display it on the detail page. This ID must match the field mapped in the GET API of the detail page, ensuring the correct record is fetched and displayed dynamically.
    4. Additionally, you need to specify the Redirect URL of the page where the form will redirect after submission. This ensures smooth navigation and an appropriate user flow after completing the action.
    5. To ensure it opens by default, navigate to the Advanced tab and enable the Make as Default Action option.

Final Output: