Hello everyone! Welcome to our quick and practical tutorial on setting up a dynamic options list in a Capture card. We'll focus on showcasing the products of a fictional store. 1. Initialization: Begin by creating a variable named

productOptions

. This will store the dynamic list of product choices. 2. Fetching Products: Next, add an Execute Code card to your workflow with the JS code:

js
try {
  const listOfProducts = await ProductsTable.findRecords({
    filter: AI`${userQuery}`
  });
  // Make sure to make the columns with relevant data Searchable

  // If the data is in an object format, convert it using: const listOfProducts = Object.keys(yourObjectVariable)

  // The listOfProducts variable needs to be an array of strings or objects

  // Map the list to the format accepted by the Capture card
  workflow.productOptions = listOfProducts.map((product) => {
    return { label: product.Name, value: product.id };
  });
} catch (error) {
  console.log('Something went wrong: ', error);
}

This code retrieves a product list from a Table and formats the options for display. Customize it as per your needs. 3. Selecting a Product: Create a variable named

selectedProductId

. Its data type should correspond to the value format of your product options (string or number). 4. Setting up the Choice Card: Create a Single Choice card: - Store the result in

selectedProductId

. - Navigate to Choices > Items and select

@productOptions

by clicking the {x} button . 5. Using the Selection: Finally, use the

selectedProductId

variable according to your workflow's needs. This could be in another Execute Code card to fetch detailed information about the selected product, or within expressions to determine if a specific product has been chosen or if some property matches. Adjust and expand upon this code to fit your unique application and workflow requirements. Happy building!

Hi Guilhermy ! Id love to test this out but which services provide this type of API ? Is it also possible to add different categories like "price" "delivery time" etc ?

@early-train-33247 legend

Hey Remo, this is a code to be run inside an Execute card. Services and apps with api endpoints will allow you making requests like this to get list of items and more. But where do you want to add this other info like price?

@early-train-33247 currently we are working on a very complex bot and were looking for alternatives to downsize it. In our case we have 4 user inputs we ask from our user. Based on the inputs we receive we change our formula variables (about 6) . We then execute our code. Can we somehow turn this into a dynamic list and let some third party service (Airtable?) just fetch the variables we want ?

I'm guessing the product database would be something our client provides? And where would we upload it to? Our KB?

I'm gonna answer you guys tomorrow! Sorry for the delay

HAs someone try this with Assistant API?

Hey @best-army-74344 feel free to test i!

@early-train-33247 I have been trying out your code but I could use some help finding the missing piece. Shouldn't the filter be populated by the query from the user captured in a variable (the product the user wants to search for?).

js
try {
  const listOfProducts = await Data2Table.findRecords({
    filter: AI`${workflow.selectedProductId}`
  });
  // Make sure to make the columns with relevant data Searchable

  // If the data is in an object format, convert it using: const listOfProducts = Object.keys(yourObjectVariable)

  // The listOfProducts variable needs to be an array of strings or objects

  // Map the list to the format accepted by the Capture card
  workflow.productOptions = listOfProducts.map((product) => {
    return { label: product.Name, value: product.Manufacturer, price: product.Price };
  });
} catch (error) {
  console.log('Something went wrong: ', error);
}

You need to update the filter to be

js
AI`Id is ${workflow.selectedProductId}`

nice I got it to work! the confusion was in the set-up : the initial node should be the node that asks "what product are you looking for" . This will be stored in a variable called (workflow.query) (or any other name, I named mine workflow.lookup). Here is my code + some screens in case somebody was stuck :

js
try {
  const listOfProducts = await Data2Table.findRecords({
    filter: AI`Find records with where the Name matches: ${workflow.lookup}`
  });
  workflow.productOptions = listOfProducts.map((product) => {
    return { 
      label: product.Name, 
      value: product.Manufacturer, 
      carbrand: product.CarBrand, 
      price: product.Price,
      stock: product.Stock
    };
  });
} catch (error) {
  console.log('Something went wrong: ', error);
}

To display them in a carousel:

js
// Create the carousel items
const carouselItems = products.map((product, index) => {
  const cardText = `${product.Name}\nThe price is ${product.Price}`
 // the /n breaks a line

  return {
    type: 'card',
    title: {
      dynamicValue: cardText ,
      valueType: 'dynamic'
    },
    imageUrl: {
      dynamicValue: `${product.ImageSrc}`,
      valueType: 'dynamic'
    },
    actions: [
      {
        action: 'postback',
        label: {
          dynamicValue: 'Open',
          valueType: 'dynamic'
        },
        value: {
          dynamicValue: `open_product_${product.id}`,
          valueType: 'dynamic'
        }
      }
    ]
  }
})

// Send the carousel
bp.dm.replyToEvent(event, {
  type: 'carousel',
  items: carouselItems
})

learning allot here thank you man @early-train-33247 💎

Anytime! 🦾

do u have a demo?

Hi @early-train-33247 I tried implementing this but i wasn't able to get the value on click action from event.preview is this still working?

Hey mate, can you send the code you are using? and a screenshot of the node where the code is (make sure to show the first following nodes as well)

thanks for this snippet but i am getting this error "Cannot find name 'bp'.(2304) " do i need to import bp from somewhere?

it's just a typescript error, the code will run just fine 😉

True it worked... Thanks alot Boss

Hi sir, here's the result of the bot https://cdn.discordapp.com/attachments/1135960836209393676/1225530449380642867/image.png?ex=6621772c&is=660f022c&hm=f48ba5f525bf963485eec7ab401c6b07197d125a45689c0e3d29a794c8cd5eca&

below the wait for user input card

I was having the same error "Unsupported message type: postback" and tried this. although i got the selected product id "open_product_1" but how can i clear the Unsupported message type: postback error message please ?

Thank you very much this works very well! When i test it in the emulator i get a response "Unsupported message type: postback error message" but in the published linked it's not there, i think this is good for now but it will be great if we have a way to remove this response😁

Hey guys @brave-bird-91413 @early-optician-14851 this is just an automated response from the emulator, it won't show in production and it won't affect the extracted value 😉

heyy guys, has someone been able to eliminated scroll bar?

Hi there! I'm currently using Botpress v12 and planning to include a dynamic carousel. Could you help me? I can't seem to find documentation about it. I'm receiving the data in JSON format and need to convert it into a carousel card.

Hey there Sai, I would encourage learning from the examples in the thread after which you can open a help thread for more personalized help. 💪

For v12 questions check out #1112845893931110402

@fresh-fireman-491 here is my code `const carouselItems = workflow.products.map((product) => { return { title: product.prd_brand, subtitle: product.prd_name, image: { url: product.image_link }, actions: [ { type: 'postback', label:

Select ${product.prd_name}

, payload: product.prd_sku } ] } })` here is the log from carouselItems info card:Display products as a carousel card for user selection.

action
{ title: 'Nandini',
  subtitle: 'Nandini Blue',
  image: { url: 'https://versal.one/cdn/tic/milk/Nandini.png' },
  actions: 
   [ { type: 'postback',
       label: 'Select Nandini Blue',
       payload: 'nandini_blue' } ] }, { title: 'Nandini',
  subtitle: 'Nandini Gold',
  image: { url: 'https://versal.one/cdn/tic/milk/Nandini-Gold.png' },
  actions: 
   [ { type: 'postback',
       label: 'Select Nandini Gold',
       payload: 'nandini_gold' } ] }, { title: 'Heritage',
  subtitle: 'Nandini Daily',
  image: { url: 'https://versal.one/cdn/tic/milk/heritage-daily.jpg' },
  actions: 
   [ { type: 'postback',
       label: 'Select Nandini Daily',
       payload: 'heritage-green' } ] }

but images are not shown

js
   image: {
      url: product.image_link
    },

Can you try :

js
   image: {
      url: `${product.image_link}` 
    },

Thank you! @bland-sandwich-37784

Thanks all, is there a documentation for this I can read?

This is a beta feature so unfortunately not

Hi. I need some help please. It works good with the emulator. But in messenger, after the button is clicked I get the right value shown but the bot still waits for user input until I write something myself. @early-train-33247

unfortunately callbacks on carousels are blocked for now and only work in the emulator, not in the webchat. We are all eagerly awaiting a solution 🛠️

Okey. So it can't work for messenger too right now ? Thank you

I haven't tried it with messenger but it could work (just not officially supported yet).

it works for WhatApp only afaik

OK thank you

It was working for me until yesterday in webchat and today it stopped working. Now I am getting an error An invalid payload is sent from the webchat frontend: { type: 'postback', payload: 'blue' }

Keep posted, there might be a fix underway

Hello guys, great thread here I am going to start working on a property recommendation bot today and happy to find this chat. I am going to build a bot where users will enter the property type and amenities they are interested in and we should be able to show them a carousel of the available properties matching their criteria. Just leaving this here for notes and will come leave my updates here as I progress. Thank you everyone for your contribution and giving us a starting point.

Please how did you handle each of the buton click action?

How can I show my products fetched from the products table in form of a card or any other component. I cant find information anywhere using the execute code. I would like to show products to seller depending on their id. like I filter their saved products from table seller_product

the translator agent has a bug, does someone is having issues with it ???

It seems to be working now

I am getting my image URL from DataTable set and the URL is from google drive publicly available and using dynamic carousel function to get the details but i don't why the image card is not visible (please see the SS) can anyone please help me https://cdn.discordapp.com/attachments/1135960836209393676/1246712751766900766/image.png?ex=665d633a&is=665c11ba&hm=5edb9fa0d22e47c83e1a2ead4a5b2ac6bc160bca76e415d16c08e4b332109f8f& https://cdn.discordapp.com/attachments/1135960836209393676/1246712752072822874/image.png?ex=665d633a&is=665c11ba&hm=0b2f3135a2247b727b05e147092d54518661e5ad9cd819ce113e0215ef108a50& https://cdn.discordapp.com/attachments/1135960836209393676/1246712752370614323/image.png?ex=665d633a&is=665c11ba&hm=98140fdc0dae16b43ca5c55f7b05d32efb38d3fb632ec62c59bd9c8f277cf8fc& https://cdn.discordapp.com/attachments/1135960836209393676/1246712752609693726/image.png?ex=665d633b&is=665c11bb&hm=19950bf36766badcd4322eca89698539adb482a9104e85883c5ce7d558934350&

Hello, is it possible to disable text input while carousel is active? I want user to use carousel not text

Hi there, unfortunately this is not possible (yet) but ive been told its on the planning 🛠️

#1159090477329551410 You can have a look at this thread 🙂

Is it possible to query multiple records? I have a tournament table and would like to query the next three (in relation to the current date) tournaments. These should be displayed afterwards in the carousel. Is there a solution? I have already tried a lot but unfortunately have had no success.

In the Emulator I get the "Unsupported message type: postback", but also the response after. So Kinda Work. But in the Webchat, once teh user click on the action button, the bot display the ... but do nothing, looks like it freeze. Any idea/update on when the Postback will be supported in Webchat and Messenger? Really important feature.

Hi! Any idea why my carousel don't display images and buttons? I've tried both option to return object, but both didn't work.

if (workflow.productOptions && workflow.productOptions.length > 0) {

  function createCardForProduct(product, index) {
    // return {
    //   type: 'card',
    //   title: {
    //     dynamicValue: `${product.productName}`,
    //     valueType: 'dynamic'
    //   },
    //   image: {
    //     dynamicValue: `${product.productImageUrl}`,
    //     valueType: 'dynamic'
    //   },
    //   buttons: [
    //     {
    //       action: 'url',
    //       label: {
    //         dynamicValue: 'Open',
    //         valueType: 'dynamic'
    //       },
    //       value: {
    //         dynamicValue: `${product.productUrl}`,
    //         valueType: 'dynamic'
    //       }
    //     }
    //   ]
      
      // Add other card properties like subtitle, actions
      // ...
    // }

    return {
      title: `${product.productName}`,
      image: `${product.productImageUrl}`,
      buttons: [
        {
          type: 'web_url',
          title: 'Open',
          url: `${product.productUrl}`
        }
      ]
    };
  }

  const carouselItems = workflow.productOptions.map((product, index) => createCardForProduct(product, index))

  workflow.productOptions = [];

  bp.dm.replyToEvent(event, {
    type: 'carousel',
    items: carouselItems
  })

}

Hey Ania, it seems your code is generated by AI which often cuts of code to optimize it's output token size. Also // is used to comment out code , making it non-functional. A few things you could try: - prompt the AI to give you as complete code possible, based on the variable names you provide. - make sure all the variables match within your workflow. - look trough the dynamic carousel threads which are a few #1270343173784342529 . Key here is to populate your carousel with the right variables you have created in your code.

How could I do the same but generating text instead of carousel? So I want to generate a text response programmatically before and after the carousel.

You can do that by using: bp.dm.replyToEvent(event, { type: 'text', text: 'Here is a dynamic message with product: ' + allP[0].title });

I am able to display the caroursel. I have two queries. 1) I want to display a button with text "Book Now" and add a data attribute to it called

propertyId

. Once this button is clicked, I want to set a user.propertyId = button's bound property id. 2) I want to display a hyperlink next to "Book Now" that should open link in a new browser window. How to do these two?

you need two actions

typescript
    actions: [
      {
        action: 'postback',
        label: 'Book Now',
        value: `BOOKING_${product.propertyId}`
      },
      {
        action: 'url',
        label: 'View Property',
        value: 'https://your.domain.site'
      }
    ]

EDITED: i wrote

type

instead of

action

thanks @white-nest-40686

I'm glad I was able to help you.

Please can you make a video on this. I've gone through everything and I still can't understand 😢😢

Hi, please copy my example and paste it into ChatGPT or any other language model, and ask it to explain the code. The script does everything you need: it receives an array of data to populate the carousel, creates the carousel, and displays it.

Ok I'll do just that and get back to you