Assigning multiple source collection to the Timeline
Last updated
Last updated
The Timeline component is designed to help display information visually and in a well-structured format. In this particular use case, the Timeline component showcases activities from multiple sources, organized according to a timeline view.
Initiate the creation of your source collections: Before assigning several source collections to the Activity Timeline component, develop the collections you wish to utilize. Within the Flow Builder, employ the 'Get Records' action to generate your collection variables (e.g., Collection1, Collection2, Collection3) to fetch data from multiple sources."
In this step, you will add the SObject Collection to Activity Timeline Items Avonni Action to your flow. This action allows you to convert your source collections into a format compatible with the Activity Timeline component.
Add an Action element: In the Flow Builder, click the + sign and select "Action"
Select the Avonni category: In the filter panel for the Action element, select Avonni.
Choose the SObject Collection to Activity Timeline Items Action: In the Avonni category, select the 'SObject Collection to Activity Timeline Items' action. This action will enable you to transform your source collections into a format compatible with the Activity Timeline component.
In this step, you will create your collections using the 'SObject Collection to Activity Timeline Items' action added in Step 2. For each collection, you will select the corresponding Get records collection created in Step 1 and map the data accordingly.
Configure collections: Create your collection within the properties panel of the 'SObject Collection to Activity Timeline Items' action. You can create up to 10 collections.
Select Get records collection: For each collection, click the 'Add Collection' input field and select the appropriate Get records collection created in Step 1. This step ensures that each collection is associated with its corresponding source collection.
Map the data: After selecting the Get records collection for each input field, specify the fields displayed in the Activity Timeline component. This includes fields like 'Date', 'Title', 'Subtitle', 'Icon', and others, depending on your specific use case. Be sure to map these fields from the source collection to the corresponding input fields in the action. This process ensures the data is correctly formatted for display within the Activity Timeline component.
To enable a link that will navigate directly to the record page. To accomplish this, follow the steps below:
Locate the href section of the component you want to add the link to.
Click on the variable button located within the href section.
Select "Advanced" from the available options.
Now, in the text description, add the following snippet: /{{Record.Id}}
By adding /{{Record.Id}} to the text description, you are setting up a redirection to take users to the appropriate record page when they click the activity title.
In this step, you'll set up advanced settings for the 'SObject Collection to Activity Timeline Items' action to manually assign variables and create a new variable resource.
Access Advanced settings: To access the advanced settings, click on the 'Advanced' link within the properties panel of the 'SObject Collection to Activity Timeline Items' action.
Enable manual variable assignment: Check the box next to "Manually assign variables." This option allows you to create a new variable resource and manually define its properties.
Create a new variable resource: Click on the 'New Resource' button and enter an API name for your variable. This name will be used to reference the variable throughout your Flow.
Set Data Type and Apex Class: In the 'Data Type' field, select 'Apex-Defined.' Check the box next to "Allow multiple values" to support multiple records for this variable. Then, in the 'Apex Class' field, select "avcmpbuilder__ActivityTimelineItem" from the dropdown list.
Save your changes: Once you've completed the configuration, click the 'Done' button to save your settings.
In this final step, you'll connect the Activity Timeline component to the Apex-Defined variable created in step 4, enabling it to display data from multiple source collections.
Add a screen element with no header and footer
Drag the Avonni Timeline Component into our screen
Open the Activity Timeline component: Locate it within your Screen Flow and click on it to access its configuration settings.
Access the Data Source section: Navigate to the 'Data Source' section within the properties panel of the Activity Timeline component.
Select Variable: From the 'Data Source' options, choose 'Variable' to specify that the component should use the Apex-Defined variable you created earlier.
Choose the Apex-Defined variable: In the dropdown list, select the Apex-Defined variable you created in step 4. This will connect the Activity Timeline component to the variable containing the combined data from multiple source collections.
Save your changes: Click the 'Done' button to save your settings and finalize the configuration.
To further customize the sort order, you can use a "Collection Sort" element in your flow. This allows you to sort the items in the APEX collection variable based on your selected field. See the screenshot below for an example.
You have successfully added multiple source collections to the Activity Timeline component. These steps enabled the component to display data from various source collections, providing a comprehensive view of your Salesforce records in a visually appealing and user-friendly format.
