Comments (13)
seratch
commented on June 19, 2024
1
Hi @CIPHERTron, thanks for asking the question!
I have the above code snippet to open a modal and the customerOptions array has around 650 items. Is it not possible to show more than 100 items in the dropdown?
Unfortunately, it's not possible to display more than 100 items in a static_select dropdown menu. However, for large data sets like yours, you may consider using the external_select menu: https://slack.dev/bolt-js/concepts#options
I hope you find this information helpful!
from bolt-js.
CIPHERTron
commented on June 19, 2024
Hi @seratch , thank you so much for the quick reply. Let me explore the external_select menu
from bolt-js.
CIPHERTron
commented on June 19, 2024
Hi again @seratch, now I am using external_select like shown below:
if (customerName === 'list') {
try {
const result = await client.views.open({
trigger_id: body.trigger_id,
view: {
type: 'modal',
callback_id: 'select_company_modal',
title: {
type: 'plain_text',
text: 'Customer 360° Insights',
emoji: true
},
submit: {
type: 'plain_text',
text: 'Get Details',
},
close: {
type: "plain_text",
text: "Cancel Search",
emoji: true
},
blocks: [
{
type: "input",
element: {
type: "external_select",
action_id: "company_select",
placeholder: {
type: "plain_text",
text: "Start typing a customer name...",
emoji: true,
},
},
label: {
type: "plain_text",
text: "Search for a customer",
emoji: true,
},
}
],
}
});
// Acknowledge the command request
await ack();
}and passing it options like this:
app.options({ action_id: /company_select/ }, async ({ ack }) => {
const customerOptions = customers.map(customer => {
return {
"text": {
"type": 'plain_text',
"text": customer
},
"value": customer
}
})
await ack({
"options": customerOptions
})
});However, i'm not able to see the options getting listed in the dropdown select. it's always showing "Nothing could be found"
Could you pls help me out here? I'm not exactly sure what I'm doing wrong
from bolt-js.
seratch
commented on June 19, 2024
Please double-check if you've configured Features > Interactivity & Shortcuts > Select Menus > Options Load URL on the https://api.slack.com/apps/{your app id} site.
Also, having min_query_length:1 will make the user experience more intuitive. For more details, please refer to this page: https://api.slack.com/reference/block-kit/block-elements#external_select
from bolt-js.
CIPHERTron
commented on June 19, 2024
As of now, I'm using hardcoded options but then also, I'm unable to load the options in slack. I'm getting the same message: Nothing could be found
app.options({ action_id: /company_select/ }, async ({ ack }) => {
console.log("Set Company select options invoked")
try {
// Call an API or perform any asynchronous operation to fetch options
const options = [
{
text: {
type: 'plain_text',
text: 'One'
},
value: '111'
},
{
text: {
type: 'plain_text',
text: 'Two'
},
value: '222'
},
{
text: {
type: 'plain_text',
text: 'Three'
},
value: '333'
}
];
// Acknowledge the options request and return the options
await ack({
options: options
});
} catch (error) {
console.error(error);
}
});from bolt-js.
seratch
commented on June 19, 2024
I've confirmed your example (I rewrote it slightly for TypeScript compatibility) works for me without any issues. Please double-check if you've configured the Features > Interactivity & Shortcuts > Select Menus > Options Load URL correctly, plus your app.options listener passes a valid response data to ack() method call.
import { App, BlockAction, Option } from "@slack/bolt";
export function registerListeners(app: App) {
app.event("message", async ({ say }) => {
await say({
text: "hi!",
blocks: [
{
type: "actions",
elements: [
{
type: "button",
action_id: "test",
text: { type: "plain_text", text: "Click Me" },
value: "click_me_123",
},
],
},
],
});
});
app.action<BlockAction>("test", async ({ body, client, ack }) => {
await ack();
await client.views.open({
trigger_id: body.trigger_id,
view: {
type: "modal",
callback_id: "select_company_modal",
title: {
type: "plain_text",
text: "Select Company",
},
blocks: [
{
type: "input",
element: {
type: "external_select",
action_id: "company_select",
placeholder: {
type: "plain_text",
text: "Start typing a customer name...",
emoji: true,
},
},
label: {
type: "plain_text",
text: "Search for a customer",
emoji: true,
},
},
],
submit: {
type: "plain_text",
text: "Get Details",
},
},
});
});
app.options<"block_suggestion">(
{ action_id: /company_select/ },
async ({ ack }) => {
const options: Option[] = [
{
text: {
type: "plain_text",
text: "One",
},
value: "111",
},
{
text: {
type: "plain_text",
text: "Two",
},
value: "222",
},
{
text: {
type: "plain_text",
text: "Three",
},
value: "333",
},
];
await ack({ options });
}
);
}from bolt-js.
CIPHERTron
commented on June 19, 2024
Hey @seratch , apologies for bugging you multiple times. The external_select method didn't work for me so I reverted back to the static_select way of showing the list items and instead of using options, I used option_groups. I'm doing it as shown below and I'm able to see all the options as expected. I just wanted to know how do we check which option the user has selected? Would really appreciate If you could help me with this. Thanks much!
const customerName = body.text.trim();
const urlEncodesCustomername = encodeURIComponent(customerName)
const customersHash = categorizeCustomersByAlphabet(customers)
const optionGroupsArray = [] // store option groups alphabetically
const optionGroupKeys = Object.keys(customersHash)
optionGroupKeys.forEach((key) => {
const hashkeyValue = customersHash[key]
let options = [];
if(hashkeyValue && hashkeyValue.length > 0) {
options = hashkeyValue.map(customer => {
return {
text: {
type: 'plain_text',
text: customer
},
value: encodeURIComponent(customer)
}
})
}
let group = {
"label": {
"type": "plain_text",
"text": key
},
"options": options
};
optionGroupsArray.push(group)
})
if (customerName === 'list') {
try {
const result = await client.views.open({
trigger_id: body.trigger_id,
view: {
type: 'modal',
callback_id: 'select_company_modal',
title: {
type: 'plain_text',
text: 'Customer 360° Insights'
},
blocks: [
{
type: 'input',
block_id: 'company_dropdown',
element: {
type: 'static_select',
action_id: 'company_select',
placeholder: {
type: 'plain_text',
text: 'Start typing to view suggestions...'
},
option_groups: optionGroupsArray
},
label: {
type: 'plain_text',
text: 'Select a customer from the dropdown'
}
}
],
submit: {
type: 'plain_text',
text: 'Get Details',
},
}
});
console.log(result)
} catch (error) {
console.error(error);
}
}from bolt-js.
seratch
commented on June 19, 2024
You can receive the selected item under body.view.state.values.{block_id}.{action_id} data structure in app.view("your_callback_id_here", listener) listener.
Glad to hear that you've achieved your goal with static select! If everything is clear now, would you mind closing this?
from bolt-js.
CIPHERTron
commented on June 19, 2024
Got it. Thanks!
Yeah sure, I can go ahead and close it.
from bolt-js.
CIPHERTron
commented on June 19, 2024
@seratch I did as you have mentioned above but when I click on the "Get Details" or Submit button, the @app.view("your_callback_id_here") controller doesn't get triggered in the first place. Am I doing something wrong?
app.view('select_company_modal', async ({ ack, body, view, client }) => {
await ack();
console.log("body", body)
console.log("view", view)
});
from bolt-js.
seratch
commented on June 19, 2024
Have you properly configured "Request URL" under the "Interactivity & Shortcuts" section on api.slack.com/apps/{your app id} site?
from bolt-js.
CIPHERTron
commented on June 19, 2024
Oh okay, that might be the problem. The "Request URL" under the "Interactivity & Shortcuts" section was pointing to the prod GCP cluster external url and slash command request url was pointing to my local ngrok. Let me change that and try again
from bolt-js.
CIPHERTron
commented on June 19, 2024
Yes, that was the issue. It's fixed and I'm able to see the selected option. Really appreciate your help and quick response @seratch.
Closing this issue!
from bolt-js.
Related Issues (20)
- Aws lambda handler not working with oauth express handler HOT 6
- Receiving `reaction_added` events for channels we're not in HOT 3
- Open Modal API is not working suddenly. And error message is `Error: An API error occurred: invalid_trigger_id`. HOT 9
- Cannot post a message as a user via an application/bot HOT 7
- Unhandled request to /slack/install HOT 4
- Unhandled error log when user is not authorized HOT 8
- Cannot access the files in the "app_mention" event with TypeScript HOT 3
- How to get search params in custom routes HOT 4
- appToken is not read in socketMode @3.18.0 HOT 4
- Links with ampersand do not work in Slack iOS app HOT 6
- Add flag to `AwsLambdaReceiver` to disable Signature Verification HOT 1
- Events Subscription is continuously being turned off when we kill the process HOT 4
- Add reply_in_thread method HOT 1
- Run multiple replicas in k8s of bot app HOT 2
- Frequent disconnects in socket mode HOT 9
- Unable to upload a file in a direct message using files.completeUploadExternal HOT 7
- `too_many_websockets` causes Cannot read properties of undefined (reading 'event') HOT 5
- Cannot respond to incoming message events with `say` using the Bun runtime HOT 4
- Keep getting Error: Cannot write headers after they are sent to the client HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bolt-js.