How to Keep Tabs on a Particular Tab? - firefox-addon-sdk

In my firefox sdk addon, I want to use a custom webpage from my data directory as my settings/about page.
But I am having trouble keeping tabs on the tab!
So I have a button that calls the OptionsPanel() function to open my webpage in a new tab. Now, I want to make it so if the user forgets that tab is open and pushes the button again, that it activates the already-open settings tab. That means I need to know that the tab is open and I need to be able to switch to it if it is OR open it if it is not already open.
Here is what I've come up with so far, but it doesn't work; it just always opens a new tab. I don't even know if I'm barking up the right tree.
const tabs = require("sdk/tabs");
var optionsTab;
function OptionsPanel(){
var opsTab = GetTabByID(optionsTab.id);
if(opsTab == null){
tabs.open( data.url("OptionsPanel.html") );
optionsTab.id = tabs.tab.id; <======errors out as undefined
}else{
opsTab.activate();
}
}
//return a handle to the tab that matches specified tab id
function GetTabByID(whatid){
for(let thistab of tabs){
if(thistab.id = whatid){
return thistab;
}
}
return null;
}
So, here are my goals:
Open my page in a new tab if it isn't already open.
If the tab is already open, then switch to that tab.
If the page is open when the browser loads, then be ready to switch to that tab if the user pushes the options button.

Why would you think tabs module has a tab property?
Normally you would use the activeTab property instead. However it does not get updated immediately after tabs.open is called. One has to use tabs[tabs.length - 1] instead.
const tabs = require("sdk/tabs");
var optionsTabId;
function OptionsPanel(){
var opsTab = GetTabByID(optionsTabId);
if (opsTab == null) {
tabs.open( data.url("OptionsPanel.html") );
optionsTabId = tabs[tabs.length - 1].id;
} else {
opsTab.activate();
}
}
Additionally, you made a mistake in GetTabByID.
//return a handle to the tab that matches specified tab id
function GetTabByID(whatid){
for(let thistab of tabs){
if(thistab.id == whatid){ // use == to compare
return thistab;
}
}
return null;
}
Keep in mind this assumes that it is not possible to navigate away from your options tab. I would check optsTab.url just in case.
Alternatively you could make use of the tab event interface
const tabs = require("sdk/tabs");
const OPTIONS_URL = data.url("OptionsPanel.html");
var optionsTab = null;
function OptionsPanel(){
if (optionsTab == null) {
tabs.open(OPTIONS_URL);
tabs.once('ready', function(tab) {
optionsTab = tab;
optionsTab.on('ready', function readyListener(tab) {
if (tab.url !== OPTIONS_URL) {
optionsTab.off('ready', readyListener);
optionsTab = null;
}
})
optionsTab.once('close', function(tab) {
optionsTab = null;
})
});
} else {
optionsTab.activate();
}
}

Related

how to close CrossApplicationNavigation pages from script with button

On the app i'm currently developping,
I have several hyperlink to standard sap backend transaction such as BP, PDL and so on.
i'm opening them by means of CrossApplicationNavigation.
they open new tab.
on my main app, I implemented a button to close every tab and returning to root view.
I tried the following :
Script to close other tabs or browser
here is my code :
var oCrossAppNavigator = sap.ushell.Container.getService("CrossApplicationNavigation");
var oExtUi = oEvent.getSource().getText();
var hash = oCrossAppNavigator.hrefForExternal({
target: {
semanticObject: "ZSIMM_PDL",
action: "display"
},
params: {
"UtilitiesPDL": oExtUi
}
});
var url = window.location.href.split("#")[0] + hash;
this._oComponent = sap.ui.component(sap.ui.core.Component.getOwnerIdFor(this.getView()));
this._myModel = this._oComponent.getModel("oModelWindow");
this._myModel.setProperty("/Window", window);
sap.m.URLHelper.redirect(url, true);
},
this way, i open the new tab with my semanticObject. and I register it in my Model.
the next step is the method linked with my button :
this._myModel = this._oComponent.getModel("oModelWindow");
var aWindow = this._myModel.getData().Window;
aWindow.close();
I'm loading the window of the tab I opened.
the instruction close doesn't work it writes :
"Scripts may close only the windows that were opened by it."
what I understand in CrossApplicationNavigation is that it opened a new tab and redirect by use of sap.m.URLHelper.redirect(url, true);
does the current screen before calling the new one know which page it opens ?
and this way is there a method to close it manually ?
I found a solution which is the following :
when opening the crossApplicationnavigation, I put on memory the tab opened :
var oExtUi = oEvent.getSource().getText();
var hash = oCrossAppNavigator.hrefForExternal({
target: {
semanticObject: "ZSIMM_PDL",
action: "display"
},
params: {
"UtilitiesPDL": oExtUi
}
});
var url = window.location.href.split("#")[0] + hash;
this._oComponent = sap.ui.component(sap.ui.core.Component.getOwnerIdFor(this.getView()));
this._myModel = this._oComponent.getModel("oModelWindow");
var aWindow = this._myModel.getData().Windows;
aWindow.push(window.open(url, "_blank"));
this._myModel.setProperty("/Windows", aWindow);
and in the button method, I recall all tab and close them all this way :
this._oComponent = sap.ui.component(sap.ui.core.Component.getOwnerIdFor(this.getView()));
this._myModel = this._oComponent.getModel("oModelWindow");
//then you can iterate over them and close them all like this:
var oWindow = this._myModel.getData().Windows;
for (var i = 0; i < oWindow.length; i++) {
oWindow[i].close();
}
that way when clicking the button all other tab are closed.

UI5 navContiner bindAggregation not loading the pages

i need to build the page by binding aggregation as below
view
<NavContainer
id="navCon"
class="navContainerControl sapUiSmallMarginBottom" height="50%">
</NavContainer>
controller
onInit : function()
{
var navCon = this.getView().byId("navCon");
navCon.bindAggregation('pages',{
path:'/pages',
factory : jQuery.proxy(this.createPages,this)
});
}
createPages : function(sid,context)
{
var eachpageData = context.getObject();
var grid = new sap.ui.layout.Grid({
defaultSpan:"L4 M6 S6"
});
var page = new sap.m.Page({
id : eachpageData.name,
title : eachpageData.name,
content : grid
});
grid.bindAggregation('content',{path:'data',factory :this.createPageContent});
return page;
},
But when i see from the debugger it has only one page
But when i call navto
handleNav : function(evt)
{
var navCon = this.getView().byId("navCon");
var target = evt.getSource().getText();
if (target) {
//var animation = this.getView().byId("animationSelect").getSelectedKey();
navCon.to(this.getView().byId(target));
} else {
navCon.back();
}
}
and if i see the navCon.getPages() will give 2 pages.
What mistake i have done here?
You are trying to pass the DOM element to the NavContainers.to(DOM) method. This is where its gone wrong.
But NavContainers.to() method can accept id(String) as parameter.
Change your handleNav method as follows it will work.
handleNav : function(evt)
{
var navCon = this.getView().byId("navCon");
var target = evt.getSource().getText();
if (target) {
navCon.to(target);
} else {
navCon.back();
}
}
NavContainers can display only one page. You can add more pages to the pages aggregation, but they will be visible only if a navigation event is fired with the proper parameters. After that, the layout of the new page is loaded and added to the DOM.
In case of SplitApp, application can display two pages (master and detail) if you see it on tablet or desktop; however it's implemented by the use of two NavContainers.
That's why the control inspector returns with one page before the navigation, second page is not part of the DOM until you navigates to it.
If you place a breakpoint into your code instead of using the control inspector, you can call the navCon.getPages() which should return with the number of pages in the aggregation.

how to add protractor locator for add click function in this menu

I have two menus 'Setup' and 'Reports' with sub-menus 'admin users','Reports dashboard','partner dashboard','partner relationship' etc marked with red color.
I want to navigate or click using protractor locators but unable to find how to select these menus that have no id and common CSS. I want something like this
var userTypes = element.all(by.repeater('t in user_userTypes'));</br>
userTypes.get(2).click()
From what I see, these elements are navigation menu items, Setup and Reports are high-level menus and Admin Users, Reports Dashboard, Partner dashboard, Partner Relationship and Grading Data are submenus. To open a submenu, I assume, you should click the appropriate menu.
Let's make a reusable function that would accept a menu label and a desired submenu label and use by.repeater() locator filtering the menus by text:
function selectMenu(menuLabel, submenuLabel) {
var menu = element.all(by.repeater("mi in menuItems")).filter(function (menu) {
return menu.all(by.tagName("a")).first().getText().then(function (text) {
return text.indexOf(menuLabel) === 0;
});
}).first();
menu.click(); // open up menu
var submenu = menu.all(by.repeater("s in mi.subMenuItems")).filter(function (submenu) {
return submenu.all(by.tagName("a")).first().getText().then(function (text) {
return text.indexOf(submenuLabel) === 0;
});
}).first();
submenu.click(); // select submenu
}
Usage samples:
selectMenu("Setup", "Admin Users");
selectMenu("Reports", "Reports Dashboard");
Define a method and pass the 'hrefValue', filter by anchor tag.
var clickParticular = function(hrefValue){
element.all(by.tagName('a')).filter(function(element, index) {
return element.getAttribute('href').then(function (text) {
return text === hrefValue;
});
}).then(function(filteredElements) {
filteredElements[0].click().then(function() {
});
});
}

CQ-Dialog page properties can not be stored from site admin but works from sidekick

The purpose of the following function is to allow the user to save the edited page properties in the CQ-Dialog even though if they invalid by clicking on the button save anyway:
PageProperties.showMsg = function(dialog, config, errorMessage) {
CQ.Ext.MessageBox.buttonText.ok = "save anyway";
CQ.Ext.Msg.show({
title : "Completeness check failed",
msg : errorMessage,
buttons: CQ.Ext.Msg.OKCANCEL,
fn : function(buttons) {
if(buttons == "ok") {
dialog.form.items.each(function(field) {
// clear fields with emptyText so emptyText is not submitted
if (field.emptyText && field.el && field.el.dom && field.el.dom.value == field.emptyText) {
field.setRawValue("");
}
});
var action = new CQ.form.SlingSubmitAction(dialog.form, config);
dialog.form.isValid = function() {
return true;
};
dialog.form.doAction(action);
dialog[dialog.closeAction]();
CQ.Util.reload();
}
}
});
};
This functions works fine from the sidekick. When I click on save anyway all current values of the page properites are stored regardless if they are valid or not. This does not work from the site admin. when I call the page properties of the same page from the site admin and try to save the page properties with invalid values by clicking on save anyway, this does not works (old values are stored and nothing changes).
I hope somebody can help. thank you
I found the solution. the problem was the function CQ.Util.reload(). It prevent storing the values

jquery mobile, browser back button navigation

I have a multipage form with #p1,#p2,#p3. Once I submit the form, and when I try to click back browser button, it should go to #p1 with empty form fields. it is possible wiith Jquery Mobile?
I would override the backbutton and check for which page is the active page then based on the page do whatever house cleaning you need...
I submitted an example to another question really similar to this:
BackButton Handler
Where I have Options, Popup and HomePage you might just need P3 and when the activePage is equal to P3 clear your form and show P1.
function pageinit() {
document.addEventListener("deviceready", deviceInfo, true);
}
function deviceInfo() {
document.addEventListener("backbutton", onBackButton, true);
}
function onBackButton(e) {
try{
var activePage = $.mobile.activePage.attr('id');
if(activePage == 'P3'){
clearForm(); // <-- Calls your function to clear the form...
window.location.href='index.html#P1';
} else if(activePage == 'P1'){
function checkButtonSelection(iValue){
if (iValue == 2){
navigator.app.exitApp();
}
}
e.preventDefault();
navigator.notification.confirm(
"Are you sure you want to EXIT the program?",
checkButtonSelection,
'EXIT APP:',
'Cancel,OK');
} else {
navigator.app.backHistory();
}
} catch(e){ console.log('Exception: '+e,3); }
}