The dynamic table feature allows you to view, sort, filter, or select data in a tabular format, which can be displayed and updated in real-time as part of a process or transaction. This feature allows you to easily view, manage, and interact with large amounts of data in a clear, organized manner. You also have the option to make rows copiable and freeze the first data column, which keeps the first column fixed in its position while scrolling horizontally.

In a guided workflow, the dynamic table feature can be used for a variety of purposes, such as:

• Displaying the results of a search or query in a tabular format.

• Showing the status of multiple items or orders in a single view.

• This allows you to edit or update data directly in the table.

• Displaying reports or analytics data in a way that is easy to understand and interact with.

You can select the Variable Type as Text, Date, Number, MultiValue, Picklist, MultiValue Picklist, Multi-Line, Link, and Media. By selecting Media, you can effortlessly display product images for you to conveniently view them directly within the table interface. Furthermore, you can expand images for a full view by clicking on them.

Dynamic tables have features such as pagination, filtering, and multi-selection. Refer to the article on solving use cases with Groovy.

​

Various Fields in a Dynamic Table

​

​

• API Name: It is a unique identifier that can be used as a reference to the value of this component. In this field, ensure that there are no hyphens or spaces. It is typically used in backend code, integrations, or API calls. API Names are often system-generated and follow a specific naming convention, such as using underscores instead of spaces (e.g., Customer_Status__c). 

• Mark Field as Mandatory: Clicking on the screen will mark filling this table as mandatory for the user.

• Choose Data Source: There are 3 types of data sources available that you can choose from:

  • By Variable: Select data from pre-defined variables within the system.

  • By API: Fetch data dynamically using APIs.

  • By Entity Type: Utilize data linked to specific entities in the system.

• Choose Variable: Add the name of the variable in this field. This field is used to define the data map to populate the dynamic table either directly or using a pre-defined variable.

• Variable Name: Again, add the variable name. This variable is the key name in the data map, which is used to map the values.

• Column Name: Choose the column name mentioned in the variable. This is the custom name that can be defined to be displayed as the column name in the dynamic table.

• Variable Type: You can choose what type of variable it is - a text, an image, a pick list, a multiline, etc., from the dropdown menu.

• Primary Key: Whatever Column Name variable you select will come as the primary key.

• Default Value: You can configure the pre-populated value in a dynamic table when the Guided Workflow starts. You can choose a variable here or write custom code. You can specify default values based on the Primary Key defined for the table.

  For example, suppose the Choose Variable field contains the following array of objects:

  [{"Product": "Coffee", "Type": "Espresso", "Quantity": 2},{"Product": "Coffee", "Type": "Cappuccino", "Quantity": 1}]

  And your Primary Key is set to Type.

  If you want to pre-select only the row where Type = Espresso, your Default Value should be:

  {"Type": "Espresso"}

  To pre-select both rows (Espresso and Cappuccino), use:[{"Type": "Espresso"},{"Type":"Cappuccino"}]

• Maximum Height / Row Height: In these fields, you can select the table and row height that you want.

• Freeze First Data Column: If you enable this toggle, the first column, particularly, will be frozen.

• Enable Row Selection: To enable row selection, you can configure the dynamic table to allow either single or multi-selection. For example, if there are multiple items, and you enable a single selection, the user will only be able to select one item at a time. On the other hand, if you enable multi-selection, the user can select multiple items simultaneously, offering greater flexibility and control over the data they interact with.

  ​

  ​

  ​

• Visibility Conditions: A rule or set of rules that determine whether a specific element, field, or component is visible to users in an application or interface. These conditions are typically based on factors such as field values or contextual data. Visibility conditions ensure that users only see relevant information, improving usability and security. 

  • Example  

    • Condition: Display a "Priority Escalation" section if the "Ticket Priority" is set to "High." 

    • Implementation: Visibility Condition: Ticket_Priority == 'High' 

    • Result: The "Priority Escalation" section appears only for high-priority tickets. 

• Enable Pagination: You can enable pagination to control how many rows are displayed per page in the dynamic table. For example, if you want to show only 10 rows per page, the table will display the first 10 rows, and then the user can navigate to the next page to see the remaining rows. If you opt to show 5 rows per page, and there are 20 items in total, the data will be spread across four pages. This feature helps to keep the data manageable and user-friendly, especially when dealing with large datasets.

• Enable Search – Enable this option to allow searching within the columns of a dynamic table.

  • To enable search in a Dynamic Table by API, the API must have paginated responses with search capabilities.

  • To enable search in a Dynamic Table by Entity, the specific column must be marked as Searchable in the Entity Studio.

​

​

​

Configuring a Dynamic table by various source types

1. By Variable: A Dynamic table by variable will be used when you have data coming from sources like an API, a custom entity, or any other source, and you want to display the information in the form of a table. To configure a dynamic table by variable as a source, follow the steps

   • Define a variable: Use an update property node and define a variable.

   • Create an array of maps: It is mandatory for the output of the variable created to be in the form of an array of maps if a dynamic table has to be constructed. Use the format below as shown in the example to create an array of maps.

     ​

     def  x = response.Order

     def y = [[“Field_Name”: “Order Number”, “Field_Value”=x.orderNumber],

                     [“Field_Name”: “Order Date, “Field_Value”=x.orderDate],

                     [“Field_Name”: “Order Date, “Field_Value”=x.orderDate]]

     return y; 

     In the above example, Field_Name and Field_Value are the column headers and the data infront of the them is the value that will be displayed against them. The above example will create a table with 2 columns and 3 rows. You can create multiple rows and multiple columns using this format

     ​

   • Add a screen node and then add a dynamic table.

   • Choose By Variable as the source.

   • Under the Choose Variable section, choose the variable created in Step 1.

   • Choose the appropriate variable name in the variable name and column name section, as explained in this document. In the above example, the first variable name would be “Field_Name” and the column name corresponding to that would be anything that you want to show to the agent in UI, the second variable name would be “Field_Value”.

   • Choose the primary key as explained in the earlier part of this document.

     ​

     
     
     

2. By API: A Dynamic table by API will be used when you have data coming from an API and you want to display the information in the form of a table. Ensure that the API response is in paginated format; if the API is not in paginated format, you cannot use a dynamic table with the API. To configure a dynamic table by API as a source, follow the following steps:

   • Choose the API/extension under the Service name section.

   • Pass the inputs to the API as defined in the API documentation under the Set Input Variables Mapping section.

   • Write an adapter under the “Adapt API response” section to adapt the response.

   • For Example, if the API is in the following format:

     ​

     OrderDetails : [ { "OrderNumber: 10, "OrderId": 123, "Description": "T-shirt" }, { " OrderNumber ": 11, " OrderId ": 115, " Description ": "Jeans" }, { " OrderNumber ": 12, " OrderId ": 164, " Description ": "hand bag" }]

     Then the response will be as given below:

     return response.OrderDetails;

     ​

   • The first variable name, in this case, would be "OrderNumber", and the corresponding column name, which is meant for a display to the user, could be "Order Number". The second variable name would be "OrderId", and the third variable name would be "Description", with their respective column names formatted appropriately for user-friendly display.

3. By Entity: A Dynamic table by API will be used when you have data coming from a Sprinklr entity, like a standard entity, a custom entity, etc, and you want to display the information in the form of a table. To configure a dynamic table by Entity as the source, follow the following steps:

   • Under the “Entity type” section, choose the entity out of which you want to create a dynamic table.

   • Apply the filter based on which you want to fetch the records under the Filter Records section.

     Note: The Filter Records drop-down in dynamic tables will display only the values that are present in the table records at runtime, rather than all possible values for that field.

     For example, if the Channel Activity Type column in the table contains only three specific values, the filter dropdown will show only those three values, regardless of other possible values defined in the system.

     This behavior currently applies only to Case and Profile entities.

   • You will now find a picklist under variable names. Unlike By variable and By API configurations, this picklist will contain all the column names from the entity. Choose the column that you want to present in the table.

   • You can add as many columns as you need.