Displaying more than 3 buttons in response

[y0x]

Hi everyone,

i´m currently trying to display more than just three button elements in the chat window, but for some reason it does not work. Does anyone know where the settings for this case are?

Here an example:

 replies: [
        {
          type: "buttons",
          content: {
            title: `You are searching for ${oMemory.product.raw} for the following regions. `,
            buttons: [
              {
                value: "test1",
                title: "test2",
                type: "postback"
              },
              {
                value: "test1",
                title: "test2",
                type: "postback"
              },
              {
                value: "test1",
                title: "test2",
                type: "postback"
              },
              {
                value: "test1",
                title: "test2",
                type: "postback"
              },
              {
                value: "test1",
                title: "test2",
                type: "postback"
              }
            ]
          }
        }
      ],
      conversation: {
        memory: oMemory
      }

The Code above results in the image I´ve attached.

Thanks.

[JWandrocke]

It is currently hard code to only display 3 buttons in the WebChat.

Here is the code in the Button.js

    {buttons.slice(0, 3).map((b, i) => (
      <Button key={i} button={b} sendMessage={sendMessage} />
    ))}

[y0x]

Isn´t there any other configuration item that could cause this. As you can see in my example that I don´t have only three hardcoded buttons. My application is hosted on (https://cai.tools.sap/) and the backend is entirely self written using nodejs/ express. So the configuration to only display 3 buttons should be anywhere else. But It´s not in my code. Could it be that the hosting platform cai.tools.sap is limiting this by default, but I can´t find anything in the documention..

Thanks for your help!

[ya332]

It has been already answered JWandrocke by chipping in. The button count is hardcoded, you could download the source code, change the number to however you want, build it again and that way you can have as many buttons as you want. However, if you want to deploy it and use it for production, you have to self-host it rather than doing <script>https://cai ... </script> etc. Other option is to create a pull request in order to pass the number of buttons as props from the main component to Button.js component. Hope this helps.

[timoniac]

what i dont understand: why is it possible to create more than 3 buttons in menu when only 3 show up? Also the right-alignment of the text in a list-answer is so bad ... why cant we manage those UI-Elements via the Framework instead of self-hosting it?