Develop Reference

How to respond to view after submitting the view in slack with bolt js

Hi I've implemented one simple shortcut to get data from input but after submitting the view I couldn't get the response payload or it cannot update the view to acknowledge user. following is my simple code.
const { App } = require("#slack/bolt");
const app = new App({
token: process.env.BOT_TOKEN,
socketMode: true,
signingSecret: process.env.SIGNIGN_SECRET,
appToken: process.env.APP_TOKEN,
});
app.shortcut({ callback_id: 'open_modal', type: 'message_action' }, async ({ shortcut, ack, client }) => {
try {
await ack();
console.log("Ack:")
const result = await client.views.open({
trigger_id: shortcut.trigger_id,
callback_id: "new-task-modal",
view: {
type: "modal",
title: {
type: "plain_text",
text: "My App",
},
submit: {
type: "plain_text",
text: "Submit",
emoji: true,
},
close: {
type: "plain_text",
text: "Cancel",
},
blocks: [
{
"type": "input",
"element": {
"type": "plain_text_input",
"action_id": "plain_text_input-action"
},
"label": {
"type": "plain_text",
"text": "Label",
"emoji": true
}
}
],
},
});
} catch (error) {
console.log(error);
}
});
app.view({ callback_id: 'new-task-modal', type: 'message_action' }, async({ shortcut, ack, view, body }) => {
try {
console.log("New task modal",view.state.values );
await ack();
let result = await client.views.update({
view_id: body.view.id,
view: {
type: "modal",
title: {
type: "plain_text",
text: "My App",
emoji: true,
},
close: {
type: "plain_text",
text: "Cancel",
},
blocks: [
{
type: "section",
text: {
type: "plain_text",
text: "This is a plain text section block.",
emoji: true,
},
},
],
}
});
} catch (error) {
console.log(error)
}
})
app.shortcut() function works fine and create one view but after submitting that view it couldn't hit to app.view() function to update the view so is there any way to update the current view.

The callback_id in the client.views.open call should be under the view field, not on the root level.
const result = await client.views.open({
trigger_id: shortcut.trigger_id,
- callback_id: "new-task-modal",
view: {
+ callback_id: "new-task-modal",
type: "modal",
title: {
type: "plain_text",
text: "My App",
},
...

Using an alert in an actionsheet in React native

I'm using a actionsheet in react native and need it to generate an alert once a button is clicked. The buttons are in the array provided under the BUTTONS variable. The code is shown below:
const BUTTONS = [
{ text: "SMS", icon: "chatboxes", iconColor: "#2c8ef4" },
{ text: "Email", icon: "analytics", iconColor: "#f42ced" },
{ text: "Push Notification", icon: "aperture", iconColor: "#ea943b" },
{ text: "Delete", icon: "trash", iconColor: "#fa213b" },
{ text: "Cancel", icon: "close", iconColor: "#25de5b" }
];
const DESTRUCTIVE_INDEX = 3;
const CANCEL_INDEX = 4;
return(
...
ActionSheet.show(
{
options: BUTTONS,
cancelButtonIndex: CANCEL_INDEX,
destructiveButtonIndex: DESTRUCTIVE_INDEX,
title: "How do you want to receive your notification"
},
buttonIndex => {
setSheet({ clicked: BUTTONS[buttonIndex] });
}
)

Ext.MessageBox.confirm custom buttons

Is it possible to add custom buttons to the Ext.MessageBox.confirm. By custom I mean custom text and custom number of buttons...
Ext.MessageBox.confirm('Delete', 'Are you sure ?',
function(btn){
if(btn === 'yes'){
return true;
}
else{
return false;
}
});

Try setting the buttonText, like:
Ext.MessageBox.show({
title: 'Delete',
message: 'Are you sure ?',
width: 300,
buttons: Ext.Msg.YESNO,
buttonText: {
yes: 'Yesssss!!!',
no: 'Nooo!!!'
}
});
Example: https://fiddle.sencha.com/#fiddle/12bq

Try using below
Ext.Msg.show({
title: 'Enter Message',
msg: null,
buttons: [{
itemId: 'ok',
text: 'Send',
ui: 'action'
}, {
itemId: 'cancel',
text: 'Cancel'
}],
prompt: {
maxlength: 180,
autocapitalize: false
},
fn: function(text,btn) {
// do some stuff
}
});

tinymce, get input field value from dialog box with click button on the main window

I know, no one uses tinymce in this site. Because I asked 2 question before related tinymce. No one visited the pages. But again, I have a problem. I coded like this:
editor.addButton('site_link', {
icon: 'fa-heart',
tooltip: 'Internal link',
onclick: function() {
editor.windowManager.open({
file : url + '/link.php',
width : 500,
height : 200,
title: 'Internal link',
buttons: [
{
text: "Get Link",
classes: 'widget btn primary',
id: "link",
onclick: function() {
var link = $('#bag_link').val();
alert(link);
}
},
{
id: "close",
text: 'Kapat',
onclick: 'close'
}
]
});
}
});
And the "link.php" page is like this:
When click "Get Link" button, I want to get values form elements which located in the "link.php". But I did not manage it. Could you help me ? How can I do this?

I had to wrestle through this too, but i came up with something like this.
Instead of calling the windowmanager i had the following inside the onclick function:
function showDialog()
{
var var1, var2;
// do whatever you need here
var win = tinymce.ui.Factory.create({
type: 'window',
layout: "flex",
pack: "center",
align: "center",
onClose: function() {
ed.focus();
},
onSubmit: function(e) {
var x,y,z;
e.preventDefault();
// read Field!!!!!
x = win.find('#my_content_field').value();
// Do whatever you need here
// Dialog schließen
win.close();
},
onPostRender: function(){
ed.my_control = this;
},
buttons: [
{
text: "Paste",
onclick: function() {
win.submit();
}},
{
text: "Cancel",
name: 'cancel',
disabled: false,
onclick: function() {
win.close();
}}
],
title: 'my title',
items: {
type: "form",
padding: 20,
labelGap: 30,
spacing: 10,
items: [
{
type: 'textbox',
multiline: true,
name: 'my_content_field',
value: 'standard text'
}
]
}
}).renderTo().reflow();
};

kendo UI grid update function wont fire

$('#usersGrid').kendoGrid({
columns: [
{ field: "UserName", title: "Display name", width: "140px" },
{ field: "Unit", title: "Unit", width: "140px" },
{ field: "Email", title: "E-mail", width: "140px" },
{ field: "Indienst", title: "Indienst", width: "140px" },
{ field: "Uitdienst", title: "Uitdienst", width: "140px" },
{ field: "Roles", title: "Roles" },
{ command: { text: "edit", click: openEdit } }
],
editable: {
update: true,
create: true
},
dataSource: {
transport: {
read: function (options) {
$.ajax({
url: "/Administration/GetUserList",
dataType: "json",
data: {
indienst: function () {
return indienst;
}
},
success: function (data) {
$("#usersGrid").data('kendoGrid').dataSource.data(data);
}
});
},
update: function (options) {
alert('not firing');
}
}
},
schema: {
model: {
id: "UserId",
fields: {
UserId: { editable: false, type: "int" },
UserName: { type: "string" },
Unit: { editable: false, type: "string" },
Email: { type: "string" },
Indienst: { type: "string" },
Uitdienst: { type: "string" },
Roles: { editable: false, type: "string" }
}
}
}
});
This is my kendo UI grid. It's reading fine, but the problem is that it wont fire the datasource.transport.update call when I change a grid cell inline. Why won't it?
I've made sure I specified an id column and that the transport CRUD functions are all of the same type (functions here, not urls), but I've tried to have it work with urls as well. Only transport.read will fire...
when I check the console logs there are no errors given.
So I want to edit it inline. Click on a cell on the grid, and change the value, when u leave focus of the cell I want dataSource.transport.update() to run, or any function at all.
http://jsfiddle.net/8tzgc/135/
Edit:
After doing some research on the docs I've found out about the change() event. By checking what kind of change event it is we can figure out if its an update event and run the function we want ourselves. Here's my updated jsfiddle:
http://jsfiddle.net/8tzgc/140/
If anyone figures out a way that does not require calling the update function yourself, then I'm all ears.

To edit inline, you can just leverage the example from the telerik demo site.
Change your command column to:
{ command: ["edit", "destroy"], title: " ", width: "160px" }
And change your editable specification to "inline":
editable: "inline",
I have edited your fiddle with the solution: http://jsfiddle.net/8tzgc/136/
In order to fully flesh this out, you would have to provide implementation for the associated methods from the command, such as update, create, etc... You can see those examples in the telerik demo.
If you would like to do cell-click editing with custom editors (dropdowns, etc), here is another telerik example.
There is also this example of batch editing.

try to change
command: { text: "edit", click: openEdit }
to
command: ["edit"]

If you are using editable:popup then try the following:
command: [
{ name: "view", template: "<a class='k-button k-button-icontext selectDiscountPercentage' title='Discount Percentage' ><i class='k-icon k-i-view'></i></a>", text: "", },
{ name: "edit", text: "" },
{ name: "destroy", text: " "}
], title: " ", width: "160px"
The trick here is to give empty space(" ") to the text key inside command array