I have a Crossrider extension which pops up a menu with a PNG image (in popup.html) when the extension icon is clicked. This works fine. But I also want to open popup.html in the same way when the user enters certain URL patterns (this part is also already working). Nothing I've tried for the last few hours works. Help! Extension ID: 83484
In background.js I have this:
appAPI.browserAction.setPopup(
{
resourcePath: 'popup.html',
height: popupDims[ appAPI.platform ].height,
width: popupDims[ appAPI.platform ].width
});
In extension.js I have this:
appAPI.openURL(
{
resourcePath: "popup.html",
where: "window",
focus: true,
focusTimer: 5000,
height: 300,
width: 300
});
I've also used "popup" instead of "window".
The popup.html window / popup doesn't display an image that's referenced in the file, even though the image is present in the popup that displays when I click on the extension icon. Also, the links work when the popup is displayed after an icon click, but not in the code above.
The methods appAPI.openURL and appAPI.browserAction.setPopup are different with openURL providing a much limited environment; hence, whilst you can share the popup.html file between them, not all functionality (such as resources and some methods) supported in setPopup will be available to openURL. For more information, see the topics in the docs.
[Disclaimer: I am a Crossrider employee]
Related
I would like to add a button in the titlebar of a Chrome app. Most of my research has lead me to believe that the only way to do this is by disabling the default titlebar and making my own. Is there a way to simply add a button to the existing titlebar? If not, is there a resource that has detailed tutorials or examples of removing the default titlebar and making a custom titlebar?
Nope, there isn't a way to add buttons to "default" titlebars. That wouldn't be portable anyway.
What you can do is create a frameless app window:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'outerBounds': {
'width': 400,
'height': 500
},
'frame': 'none' // It will be a rectangle filled with your HTML
});
});
There is a sample app that implements this and also a draggable title bar.
You can use any kind of framework to make an area that looks like a title bar on your page's top, like Bootstrap's navbar, and implement actions like close/maximize/minimize using chrome.app.window API - get a reference to the current AppWindow and use its methods.
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,
});
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]
I'm trying to pop open an apprequests dialog using the following cod:
$("#fbInviteButton").click(function(){
FB.ui({
method: "apprequests",
message: "Test"
};
});
When the button is clicked, a box pops up with the loader and just sits there. In the developer console in Chrome, I can see the ajax request complete and content come back.
When I look at the HTML source, I see the other dialog (class: "fb_dialog fb_dialog_advanced"), with populated content, and when I toggle the CSS for that window:
top: -10000px
the dialog with content comes into view.
So for some reason, when the content is loaded, it doesn't pop into place and replace the loader. Any idea what would cause this?
The application is Ruby on Rails using the Asset Pipeline.
I believe a bug in Facebook's JavaScript SDK causes this problem. I am currently using an older version of SDK taken from here as a workaround.
how to open a pop up window in code behind(C#) without using javascript.
Besides the fact that popups piss off a lot of people, it is not really possible to do so (if you don't consider target="_blank") without using javascript. Code written in code behind only generates client side code (which can include javascript) or executes some serverside stuff.
There might be other workarounds using flash or silverlight but I'm not sure about that. Maybe if you clarify your goal a little bit more I can give a better solution to your problem.
That is impossible because of "The code behind runs on the server; you need the popup to appear on the client machine. Therefore your code behind can't trigger a popup".
Alternatively, you can show a panel in the page as pop-up window, by seting it's z-index and giving absolute position.
The code behind runs on the server; you need the popup to appear on the client machine. Therefore your code behind can't trigger a popup.
Also, if you use javascript you'll probably find that the client's popup blocker prevents the new window from appearing (unless the popup happens as a direct response to a click - without posting back - in which case you can use <a target="_blank"...> if you really don't like javascript).
I do not think that is possible . what you can do offcourse is to open a new window with defined small width/height and all menus are stripped...
Just add attributes to a link button or to a button in code behind. Try this code to page load or to the button event handler.
Button1.Attributes.Add("onclick","javascript: SP.UI.ModalDialog.showModalDialog
({ url: 'PopUp.aspx', title: 'Pop Up Window', width: 600, height: 500 }); return false;");