🆕Using the Record Detail with Reactive Screens
Introduction
This tutorial guides you through the Avonni Record Detail component setup, which is designed to work interactively with your screen flow. This means the Avonni Record Detail component can communicate and synchronize with other components you're working on within your flow.
For example, we'll demonstrate this interactivity using the Avonni Map component. We'll display a list of accounts on a map, and on the right side, the Avonni Record Detail component will be shown. This component will interact with the selected map marker, dynamically displaying the corresponding account information.
Guided Steps
Step 1: Avonni Map Configuration
Begin by placing the Avonni Map component within a section of your screen flow divided into two columns. Configure the map by selecting 'Query Data Source' and applying it to the Account Object. For detailed guidance on setting up and using the Avonni Map, you can access specialized tutorials by clicking here
Step 2: Drag the Avonni Record Detail Component
Proceed by dragging the Avonni Record Detail Component into the adjacent column to the right of the Avonni Map Component. To customize this component, open the Component Builder where you'll find all the configuration options for the Avonni Record Detail.
Step 3: Avonni Record Detail configuration
Object Name
In this example, you should choose the Account object, as it's necessary to display fields related to the Account Object. Remember that we are utilizing Reactivity to select an account on the Avonni Map. Therefore, ensure that the fields displayed in the Record Detail component correspond to and are linked to the Account Object.
Record ID
For this step, it's crucial to establish a link between the record ID from the Avonni Map and the record ID in the Record Detail component. This ensures that accurate information is displayed and that there is a functional connection between the two components.
Here's how to set it up:
Choose the Avonni Map component from your list of components. Make sure to select it based on the API name you've assigned.
From the options, pick "Selected Marker SObject Value."
Then, choose "Account ID" from the subsequent options.
By doing this, the Record Detail component will automatically establish a connection with the Map, ensuring the data is synchronized and displayed correctly.
Layout Type
The "Layout Type" attribute in the Record Detail Component lets you select the preferred layout for displaying the fields. It determines the arrangement and presentation of the fields within the component.
Compact
Only the fields specified in the object's compact layout configuration will be displayed.
Full
All fields defined in the page layout will be displayed.
Custom
The custom layout option allows you to define the content and presentation of fields precisely within the Record Detail component. Learn more about the custom layout type.
Step 4: Define the Interaction
This step is vital for the proper functioning of the Record Detail Component. It ensures that any information your users edit is accurately saved. Follow these instructions to set up the interaction:
Navigate to the Interaction Tab.
Click on the "Add Save" button.
From the available interactions, select "Upsert Records."
Click Save to finalize the setup.
That's it! You've successfully configured the interaction to ensure user-edited information is saved correctly.
Last updated
