Dynamic choice - Show more button

[Tony Croft]

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

[Aravind2799]

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