This question already has an answer here:
SAPUI5 Open link on Button press
(1 answer)
Closed 1 year ago.
I am relatively new to UI5. My search for "[sapui5] icon link" brought no useful results. So here is my question.
I have the following sap.m.Link
<Link id="myLink" href="http://stackoverflow.com/" text="Stackoverflow" />
which displays the text "Stackoverflow" on the UI, and when I click on it, I will navigate to stackoverflow.com. That's the effect I want.
But how can I replace the text with an icon, for example "sap-icon://download"? According to the Link-API, it doesn't have an attribute icon. So is there a way to get the same effect using sap.m.Button that does have this attribute:
<Button icon="sap-icon://download" press=".onDataExport" />
What would the handler onDataExport look like? My idea is to use a (somehow) hidden sap.m.Link and a sap.m.Button containing the icon. The press-handler of the Button would then somehow trigger a 'link clicked' (not sure if that is possible).
My answer comes a bit late, but I hope that it will help others, as I searched for a ready-to-use Link including an Icon (although this does not seem to be the real need of StoneCrusher).
Button which triggers link navigation:
If you want a sap.m.Button to act like a classical link, then you can attach a press event and use window.open in that event, like:
myButton.attachPress(function () {
window.open(url,target);
});
Link with UI5 icon:
If you want to display a sap-icon in a sap.m.Link, then you have to extend the link, include an aggregation which contains the icon and then render the icon before you render the text of the link.
renderer : function(oRm, oControl) {
[...]
oRm.write("<a");
oRm.writeControlData(oControl);
oRm.addClass("sapMLnk sapMLnkMaxWidth touconLink");
oRm.writeClasses();
oRm.write("href=\"javascript:void(0);\" ");
oRm.write(">");
//Render icon
if (icon!="") {
oControl.getAggregation("_icon").setIcon(icon);
oRm.renderControl(oControl.getAggregation("_icon"));
}
oRm.writeEscaped(text);
oRm.write("</a>");
}
I was in need of both and published these and other custom UI5 convenience controls here: www.toucon.fr
Use the below code in your onDataExport function in controller:
sap.m.URLHelper.redirect("https://stackoverflow.com/", true);
Refer to the below link for info: ui5.sap.com/#/sample/sap.m.sample.Link/preview
sorry only got reply in JSON style, but you see what is missing in your code:
jQuery.sap.require("sap.ui.core.IconPool");
var sBack = sap.ui.core.IconPool.getIconURI("nav-back");
var button = new sap.ui.commons.Button({
icon : sBack,
});
Related
I am using Prestashop. I have made several templates. Is it possible to prepare a button that will insert the selected template?
For example, I have 4 templates and I want to make 4 buttons.
the first button inserts the first template.
the second button inserts the second template and so on.
I tried to use this code in the file \js\admin\tinymce.inc.js but my new button is not displaying :(
toolbar2: 'customInsertButton',
setup: function (editor) {
editor.ui.registry.addButton('customInsertButton', {
text: 'My Button',
onAction: function (_) {
editor.insertContent('My button works!');
}
});
},
Perhaps Prestashop has some limited version of this editor?
I ask because for example it is possible to add templates. but I would like to be able to insert them faster, with one button...
TinyMCE itself already has a template plugin:
https://www.tiny.cloud/docs/plugins/opensource/template/
Have you considered using that functionality?
I have already found a solution. It is possible by adding a custom plugin.
Everything is beautifully described on the TinyMCE website :
https://www.tiny.cloud/docs/advanced/creating-a-plugin/
then we modify tinymce.inc.js and add plugin support and a defined button in the toolbar.
I have created the button in the gmail inbox using inboxsdk.
Now i want to get a pop up by clicking on that button
2.Pop up should contain a link which navigates to my website page(xyz.com/login.php)
How can i do these using inboxsdk
Screenshot:
If you are still struggling with this, I would suggest a simple solution which is to fire a JavaScript confirm dialog see here. On confirmation you could redirect the user, using window.location.href = '<your-url>';.
Another solution would be to use InboxSDK's widgets.
Example:
InboxSDK.load(2, '<InboxSDK-app-id>').then((sdk) => {
...
const el = document.createElement('div');
el.innerHTML = 'Link description';
sdk.Widget.showModalView({
title: 'Modal Title',
el
});
});
For more ModalOptions look here.
Notice: I set the attribute target attribute of <a> tag to "_blank". This makes sure the url opens in another browser tab.
A third, more direct (optional) solution would be to add an onClick event listener to which you attach a function that redirects the user to your url, see a code example here.
A fourth and better possible solution would be to add a DropdownView to your button's onClick function, see example code here.
I wanted to migrate my existing add-on for firefox and chrome to crossrider in order to have it also with safari and IE, but i've a few doubts that mayble Schlomo (or any Crossrider developercan) can help me to solve them.
Questions :
Can i add a popup pane when someone clicks on the add-on button showing some kind of options inside it?
Can i add a blinking icon to the actual icon showing some kind of event happened like incoming chat or so?
Is there a way to add the red text box like in chrome showing at the bottom right of the icon some kind of text?
Thanks a lot!
When you pose the question like that, I can only hope the following answers will serve to allay your doubts and enlighten :)
First off, I would recommend familiarizing yourself with How to add a browser button to your Crossrider extension in general and the button popup feature specifically.
In answer to your specific questions:
You can use the button popup feature and build the required options in there. Take a look at the Button Popup Menu demo extension to get you started.
Whilst you can't make the button blink, you can alternate the button icon to make it look like blinking (see example).
In short, yes. Simply use the appAPI.browserAction.setBadgeText and appAPI.browserAction.setBadgeBackgroundColor methods (see example).
The following example bring together the key elements in the background.js code required to achieve the solutions mentioned. Look at the popup.html file in the Button Popup Menu for an example of how to build the options page.
appAPI.ready(function() {
var sid, // Blink interval id
alt=0, // Blink alternation state
icon = { // Blink icons
0: 'icons/icon0.png',
1: 'icons/icon1.png'
};
// Set the initial icon for the button
appAPI.browserAction.setResourceIcon(icon[0]);
// Sets the popup for the button
appAPI.browserAction.setPopup({
resourcePath:'html/popup.html',
height: 300,
width: 300
});
if (true) { // blink condition, set to true for this example
// Blink icon
sid = appAPI.setInterval(function() {
alt = 1 - alt;
appAPI.browserAction.setResourceIcon(icon[alt]);
}, 1 * 1000);
} else {
appAPI.clearInterval(sid);
}
if (true) { // show button text condition, set to true for this example
// Add red text box to icon
appAPI.browserAction.setBadgeText('ext', [255,0,0,255]);
}
});
[Disclosure: I am a crossrider employee]
First of all, this is not about the tinyMCE.triggerSave();
Sometimes when editing content, I switch to the textarea mode with the following
$('#id').tinymce().hide(); // from the official example
which temporarily hides the rich editor from view so I can see the HTML codes.
But if I submit the form right after editing without switching back to rich editor [ using .show() ], the content will not be updated.
My question is how can I save the content of textarea to iframe?
Please do not offer me the "use the code window" option, I have a customized show/hide button outside of TinyMCE.
Switching by mceAddControl/mceRemoveControl will solve the problem. But when submitting, the content inside the textarea will not be formatted.
Well, I just figured out a way to update content
$('#id').blur(function() {
$('#id').html(document.getElementById('id').value);
});
UPDATE
this might be even better, for all instances
$('textarea.tinymce').blur(function() {
var this_id = $(this).attr('id');
$('#' + this_id).html(document.getElementById(this_id).value);
});
Any other solutions are really appreciated.
I am designing a checkbox for a for and I absolutely cannot have the checkbox to toggle when the user clicks on its label, as this label contains a link to open a small infobox where the user gets to know what he or she is accepting by selecting the checkbox.
How can I disable checkbox toggle when clicking on its label?
The code looks simply like this (this element is inside a FormPanel items list:)
{
xtype:'checkbox',
id: 'privacyCheck',
fieldLabel: 'I have read, understood and accepted the privacy policy of ABCDE'
}
Instead of using the boxLabel property or field label on the checkbox, create a separate label object next to the checkbox. This should make it easier to manipulate your handler for the label. Otherwise, you will need to dig through the appropriate DOM element for the boxLabel (not pretty) to get at it.
I know, this topic is rather old, but I found it, searching for a solution to the exact same problem. So I'd like to share.
I needed to modify the browsers behaviour to mimick the behaviour of a legacy site, while making said site "accessible". (The for-attribute of the label tag is needed and a label without a for-attribute can not be used.)
I don't know about ExtJS, but since the legacy site uses jQuery in the frontend, I solved the problem this way:
//[...]
$(document).ready(function () {
$('.donotToogleCheckbox').click(function (event) {
event.preventDefault();
// do other stuff like displaying a dialog or something
})
});
//[...]
<label class='donotToogleCheckbox' for='myCheckbox'>DaLabel</label>
<input id='myCheckbox' name='myCheckbox' type="checkbox">
//[...]