Develop Reference

Is there any way to put custom button in antd image preview's operation panel?

I want to put some button that have functionality to download or share the previewed image. Is there any possible way to achieve this?
I've search for some answer and read the documentation but found solution.

Currently, antd v5.1.5 does not support it. There is issue to request a custom or extended preview operations feature.
From the source code of rc-image, we know the preview operations are defined internally and doesn't support custom and extension. See v5.13.0/src/Operations.tsx#L58
Only these operations:
const tools = [
{
icon: close,
onClick: onClose,
type: 'close',
},
{
icon: zoomIn,
onClick: onZoomIn,
type: 'zoomIn',
disabled: scale === MAX_SCALE,
},
{
icon: zoomOut,
onClick: onZoomOut,
type: 'zoomOut',
disabled: scale === MIN_SCALE,
},
{
icon: rotateRight,
onClick: onRotateRight,
type: 'rotateRight',
},
{
icon: rotateLeft,
onClick: onRotateLeft,
type: 'rotateLeft',
},
]

How can I change a button's emoji without resetting the component?

I am trying to change button's current emoji to a new one like this:
// Initializing button
const row = new MessageActionRow()
.addComponents(
new MessageButton()
.setCustomId('play_pause')
.setEmoji('⏸')
.setStyle('PRIMARY')
)
// Button was sent to Discord
await message.channel.send({
components: [row]
});
// Changing content of a button
row.components[0].setEmoji('▶');
But in the Discord nothing changes.
When I call console log, I get this:
MessageButton {
type: 'BUTTON',
label: null,
customId: 'play_pause',
style: 'PRIMARY',
emoji: { animated: false, name: '▶', id: null },
url: null,
disabled: false
}
So as I get it, I need to resend the button for it to change.
But can I somehow change the content without resending it?

It is not possible to edit any of a <MessageButton>'s properties without re-setting a <MessageActionRow>'s components.

Using "href" in Javascript View with VBox-SAP UI5

I am trying to navigate to other pages from my SAP UI-5 App. (HTML's < a href /> )
I used sap.m.Link on my Toolbar to navigate to other pages , and it worked perfectly ;
new sap.m.Link(this.createId("Foo"),{
text: "Foo",
type: "Transparent",
href: myLink
}).addStyleClass("headerLink"),
However I am using VBox in a customTile where I have a text. I want to implement same functionality to my VBox aswell . How can I do it ?
Please note I can't use window.location.replace("http://mywebsite.com/nextPage.html"); because It disallows me to return back to last page I visited.
My customTile looks like this
var iconBox1 = new sap.m.VBox({
items: [
new sap.m.HBox({
items: [
new sap.m.Text({
text: "Foo" // I want to navigate after clicking on this Text or this Box generelly
}).addStyleClass("tileTextDashboard")
]
}).addStyleClass("textNumberConatainer")
]
});
var customTile1 = new sap.m.CustomTile(this.createId("tile1"), {
content: [
iconBox1
],
press: [oController.someFunction, oController]
}).addStyleClass("customTileDashboard");

EDIT : Problem solved !
In case someone has same problem, I am adding my solution :
var myLink= "https://foo.com";
var myLinkO= new sap.m.Link({
text: "text foo",
type: "Transparent",
href: myLink
}).addStyleClass("classFoo");
and now you only need to replace myLinkO in your items array in your VBox

Binding ResourceBundle property to list item

In SAPUI5, you can often bind resource bundle properties to items in several ways. I'm attempting to do it in JavaScript, using data provided by an Odata service, but the methods I've found here so far haven't worked. I've tried two different ways:
How to Use Internalization i18n in a Controller in SAPUI5?
binding issue with sap.m.List and model configured in manifest.json
And neither of these have worked. I feel this is because I'm inside a items list, inside of a dialog that's causing my issue:
My code is:
var resourceBundle = this.getView().getModel("i18n");
if (!this.resizableDialog) {
this.resizableDialog = new Dialog({
title: 'Title',
contentWidth: "550px",
contentHeight: "300px",
resizable: true,
content: new List({
items: {
path: path,
template: new StandardListItem({
title: resourceBundle.getProperty("{Label}"),//"{ path : 'Label', fomatter : '.getI18nValue' }",
description: "{Value}"
})
}
}),
beginButton: new Button({
text: 'Close',
press: function () {
this.resizableDialog.close();
}.bind(this)
})
});
getI18nValue : function(sKey) {
return this.getView().getModel("i18n").getProperty(sKey);
},
Using the 2nd method above, never calls the JavaScript method. I didn't think it would work, as it's more JSON based. The first method, loads the data fine, but instead of showing the resource bundle text, it shows just the text found inside of the {Label} value.
The value found inside of {Label} matches the key found inside of the resouce bundle i.e. without the i18n> in front, like you would have in a view.
Anyone have any suggestions?

Use of formatter will solve your problem, but the way you're doing it is wrong. Try this, it will solve your problem.
var resourceBundle = this.getView().getModel("i18n");
if (!this.resizableDialog) {
this.resizableDialog = new Dialog({
title: 'Title',
contentWidth: "550px",
contentHeight: "300px",
resizable: true,
content: new List({
items: {
path: path,
template: new StandardListItem({
title: {
parts: [{ path: "Label" }],
formatter: this.getI18nValue.bind(this)
},
description: "{Value}"
})
}
}),
beginButton: new Button({
text: 'Close',
press: function () {
this.resizableDialog.close();
}.bind(this)
})
});
}
And the formatter function getI18nValue will be like this,
getI18nValue: function(sKey) {
return this.getView().getModel("i18n").getResourceBundle().getText(sKey);
},

Kendo UI custom grid popup editor window only opens once

I would like to use a custom window as popup editor of a Kendo UI Grid. Its content will be complex with search fields and a grid to display search results. To do that, I don't want to use the Kendo template mechanism but a real popup window.
While doing tests with custom editor I faced an issue. Even with a very basic and simple scenario (just the create command), I'm only able to open the editor once. The second time I get an error, the editor doesn't show up anymore and the grid becomes empty.
Here is my HTML code :
<div id="main-content">
<div id="custom-window">
</div>
<table id="my-table-grid">
</table>
</div>
The JavaScript part :
function openCustomWindow(e) {
e.preventDefault();
myWindow.center().open();
}
function editorWindowClosed(e) {
myGrid.cancelRow();
}
var myWindow = $("#custom-window").kendoWindow({
modal: true,
resizable: false,
title: "Test",
visible: false,
close: editorWindowClosed
}).data("kendoWindow");
var dummyDataSource = new kendo.data.DataSource(
{
schema : {
model : {
id: "id",
fields: {
postion: { type: "number"},
name: { type: "string"},
}
}
}
});
dummyDataSource.add({postion: 1, name: "gswin"});
var myGrid = $("#my-table-grid").kendoGrid({
dataSource: dummyDataSource,
toolbar: [ {
name: "create",
text: "Create"
} ],
editable: {
mode: "popup",
window: {
animation: false,
open: openCustomWindow,
}
},
columns: [
{
field: "postion",
title: "Postion"
},
{
field: "name",
title: "Name"
}
]
}).data("kendoGrid");
The error message in the JavaScript console :
Uncaught TypeError: Cannot read property 'uid' of
undefinedut.ui.DataBoundWidget.extend.cancelRow #
kendo.all.min.js:29ut.ui.DataBoundWidget.extend.addRow #
kendo.all.min.js:29(anonymous function) #
kendo.all.min.js:29jQuery.event.dispatch #
jquery-2.1.3.js:4430jQuery.event.add.elemData.handle #
jquery-2.1.3.js:4116
And finally a jsfiddle link to show what I'm doing. (The popup is empty because I just want to fix the open / close mechanism before going any further)
I don't understand why I get this error, I expected to be able to open / close the popup as many time as I wanted. The default editor popup is working fine.

One of my colleague found the solution (thanks to him).
Actually this piece of code
editable: {
mode: "popup",
window: {
animation: false,
open: openCustomWindow,
}
}
is designed to configure the default popup...
The right way to use a custom popup is the following :
editable :true,
edit: openCustomWindow,
With this approach it's also better to use
function editorWindowClosed(e) {
myGrid.cancelChanges();
}
Instead of
function editorWindowClosed(e) {
myGrid.cancelRow();
}
Working jsfiddle link

Actually the approach in my previous answer solved my issue but is causing another issue. The grid becomes editable but in the default mode (which is "inline").
Doing this
editable: "popup",
edit: openCustomWindow
has fixed this other issue but is now displaying 2 popups.
I finally succeeded to hide the default popup and only show my custom popup but it ended with the orginal issue described in initial question...
Considering all those informations I arrived to the conclusion that working with a custom popup window is definitely not an option. I'll start working with teamplates instead.
Another solution would have been to use a template to override the toolbar with a custom "Add" button and use a custom command for edition. But at this point I consider that too "tricky".

To prevent Kendo UI custom grid popup editor window, define the editable property:
editable:
{
mode: "popup",
window: {
animation: false,
open: updateRowEventHandler
}
} // skip edit property
Then paste preventDefault() at the beginning of the handler:
function updateRowEventHandler(e) {
e.preventDefault(); //