Dynamic choice - Show more button
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
03-06-2024 05:25 AM
In my virtual agent topic I have a dynamic choice input which is being populated form a table using a script.
As there are many records I am limiting the options to 5 but I want to implement a show more option in the list when selected will show the next 5 and so on.
I can limit to 5 and display the the "Show More" button but I am unsure how to show the next 5 on the click of the "Show more" button
Any help is greatly appreciated
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
03-06-2024 06:04 AM
1. Define the Script to Populate Choices:
- Create a script that fetches data from the relevant table and dynamically generates the choices for the input field.
- Include an additional field in the script output to indicate whether the record is part of the initial "top 5" or belongs to a subsequent "more" set. You can use a flag or a counter variable for this purpose.
- Here's an example script (replace your_table_name and your_choice_field with your actual values):
var choices = [];
var gr = new GlideRecord('your_table_name');
gr.query();
var count = 0; // Counter to track displayed items
while (gr.next() && count < 5) {
choices.push({
label: gr.getValue('your_choice_field'),
// Set a flag value based on the count
isInitial: count < 5
});
count++;
}
return choices;
2. Create the Dynamic Choice Input:
- In your virtual agent topic, create a dynamic choice input field.
- Set the Source to "Script" and provide the script you created in step 1.
- Set the initial Number of choices to display to 5.
3. Create a "Show More" Button:
- Add a button below the dynamic choice input field.
- Label it "Show More" (or your preferred text).
4. Implement the "Show More" Functionality:
- Create a client script to handle the button click.
- In the script, retrieve the current state of the dynamic choice input field using g_form.getValue('your_choice_input_field_name').
- Access the isInitial flag for each displayed choice using choices[index].isInitial.
- Based on the button click and the values of isInitial, update the dynamic choice input field's displayed choices:
function showMore() {
var choices = g_form.getValue('your_choice_input_field_name');
var nextStartIndex = 0; // Index of the first item to display in the next set
// Find the last displayed item with the 'isInitial' flag set to true
for (var i = choices.length - 1; i >= 0; i--) {
if (choices[i].isInitial) {
nextStartIndex = i + 1;
break;
}
}
// Update the field with the next 5 choices or all remaining choices
var newChoices = [];
var gr = new GlideRecord('your_table_name');
gr.query();
var count = 0;
while (gr.next() && count < 5) {
newChoices.push({
label: gr.getValue('your_choice_field'),
isInitial: (count + nextStartIndex) < 5 // Update the flag for subsequent sets
});
count++;
}
g_form.setDisplay('your_choice_input_field_name', newChoices);
}
5. Configure the Button Action:
- Set the "Click" action of the "Show More" button to the name of the client script you created in step 4.
Additional Considerations:
- You can enhance the user experience by:
- Disabling the "Show More" button when all choices have been displayed.
- Providing visual feedback to the user (e.g., indicating the number of items remaining).
- Customize the logic to display varying numbers of choices per "more" set (e.g., 10, 20) to suit your needs.
Regards
Aravind Panchanathan