Develop Reference

Hide fields from ADAPT UI configuration^in SAPUI5

Depending on certain conditions, I have to hide a button in the header of my app. The coding in the controller is as follows:
if (condition === true) {
this.byId(buttonId).setVisible(false); //works fine
} else {
this.byId(buttonId).setVisible(true); //also works fine
}
//Code edit: Button is created on the go to check if Adapt UI can still find it.
//However, it does not work still as expected. Button is visible to Adpat UI.
if (condition === true) {
var oButton = new sap.m.Button
({
text : "Save",
type :sap.m.ButtonType.Accept
});
oButton.placeAt('content');
}
Moreover, the inital visiblilty of the button is set to false in the view definition.
<Button id="buttonId" text="Button1" press="onPress" visible="false"/>
In my app, this works as intended; button is hidden. However, if user goes to Adapt UI settings, it shows list of all the available buttons in the header. It also shows button1, even if it is not required in header atm.
What I want to do?
I want to hide button in adapt UI settings also. Button's visibility should be handled only via controller file.
Does anyone know how to achieve this?
Thank you.

You could inject the button with code at run-time when you want to provide user access to it - this way the button does not form part of the View at the outset.
I suspect the Adapt UI will allow access to anything in the Static View as it stands.

How to automatically push button after mouse is (automatically) hovering on it

I am building a bigger application in React, JavaScript and HTMLusing Visual Studio Code.
I am using a third party router to log-in inside a small robot I built. This robot will turn on using a relay which is triggered by a combobox and a related button which will apply the combobox choice. Also I am new to JavaScript and HTML and for this reason I learned how to deploy a website and I prepared a minimal verifiable example which can be found here https://comboboxtest.netlify.com/ and here you can also get the source code if needed.
The goal of the application after I launch Visual Studio will be:
1) log-in inside the router,
2) automatically trigger the combobox and
3) automatically apply the combobox choice using the Apply button.
For better showing this see print screen below:
The problem: In order to access to the router there is an external interface that I didn't write because is from the router. I navigated through the interface and arrived to the Apply button as shown below in the HTML code:
So the operations are the following:
1) I trigger the relays using the combobox
2) using the mouse I have to hover on the Apply button
3) After the mouse is on the button (button hovered) I can click and apply the choice
4) The choice should be confirmed by the statement to become green.
What is not working: I can trigger the combobox, but I am not able to atomatically hover and click on the apply button.
Below the most important part of the code I am using:
property string get_relay_comboBox: "
var comboBox = document.getElementsByName('859-2-2')[0];
// find a target element.
if (comboBox) {
// Add event listener for combobox
comboBox.addEventListener('change', function (e) {
console.log('Change event detected:', e);
});
// Get new option index by flipping the current selected index
var newIdx = (comboBox.selectedIndex + 1) % 2;
// set the new index
comboBox.selectedIndex = newIdx;
// fire change event
comboBox.dispatchEvent(new Event('change'));
}
else {
console.error('comboBox not found!');
}
";
property string applyBtn: "
function fun('btnb btnhov') {
document.getElementById('btn_Apply').click();
}
";
What I tried so far
1) I research for a while the problem and I found this and also the following post which helped to understand how to trigger the combobox.
2) I right clicked on the router interface right on the Apply button and opened the Inspect Element menu and went to the Show DOM properties I found that maybe the following sreen-shot could be useful:
3) This I used to understand the HTML part and in fact I understood that it is important the way components should be called but still could't figure out how to accept the choice of the combobox using the button.
4) Following this source which is the basic way to call a clicked event I simply applied it as it is possible to show it below:
function fun('btnb btnhov') {
document.getElementById('btn_Apply').click();
}
But I didn't work and I think that at this point the most important problem as explained would be how to detect a mousover event and after that, push the button.
How to do that?
EDITS
I also tried to rewrite the function in the following way:
property string applyBtn: "
var btnApply = document.getElementById('btn_Apply');
if(btnApply) {
// Try add event listener for button
btnApply.addEventListener('change', function(e) {
console.log('Change event detected:', e);
});
// Push button
// Here the button should be pushed (or hovered first????)
}
else {
console.error('btnApply not found!');
}
";
Thanks to anyone who could please guide to the right direction to solving this problem.

Element is Statement Combined With If Statment Not Responding Properly on Hover

Really need some JQuery help here. I'm about to launch my laptop out the window. I have come a long way with this piece of code an I think I am almost there but I am stuck on the last hurdle.
I am only going to include the pertinent pieces of code here because it is a very large piece.
I have a navigation menu for a mock solar system. Here is the link to the larger external piece if you want to see the whole thing. http://jsbin.com/zagiko/1/edit (please note this uses mostly CSS3).
I have a nav menu for the piece and when you click on the values in the nav menu the current script assigns a class of active. That all works perfectly. I built in a button to test the active state on click and the state changes are working. But I need it to respond to the state change on hover. I am not a JQuery person; I am learning. It almost seems like the hover isn't working because it is responding to the data loaded when the page loads instead of responding in real time. But I am just guessing.
What I need is an if statement that will respond to the live data (not on page load or when the document is ready). The if statement should basically say if this div is active then this other div can appear on hover. But if this div is not active then it cannot appear.
The current if statement I wrote is
if($("a.active").is('.uranus')){
$('#uranus .infos').hover(
function () {
$("#descriptionsp").fadeIn("2000");
})
};
The current script that runs when the site loads that sets up the menus is:
$(window).load(function(){
var e=$("body"),
t=$("#universe"),
n=$("#solar-system"),
r=function() {
e.removeClass("view-2D opening").addClass("view-3D").delay(2e3).queue(function() {
$(this).removeClass("hide-UI").addClass("set-speed");
$(this).dequeue()})
},
i=function(e){
t.removeClass().addClass(e)
};
$("#toggle-data").click(function(t){
e.toggleClass("data-open data-close");
t.preventDefault()
});
$("#toggle-controls").click(function(t){
e.toggleClass("controls-open controls-close");
t.preventDefault()
});
$("#data a").click(function(e){
var t=$(this).attr("class");
n.removeClass().addClass(t);
$(this).parent().find("a").removeClass("active");
$(this).addClass("active");
e.preventDefault()
});
Really need you help. Thanks in advance!

Right now, your block of code is only being checked when the javascript is loaded. At this time, the .uranus element is probably not active, so nothing will happen.
First of all, you want to move this block inside of document ready, otherwise your elements such as .uranus might not even exist yet.
Your logic is very close, but you need to move the if statement inside of the hover function like this:
$('#uranus .infos').hover(
function () {
if($("a.active").is('.uranus')){
$("#descriptionsp").fadeIn("2000");
}
});
This way, every time you hover on #uranus .infos, it will only execute the code if the .uranus is also .active

replacing content on pages that use ajax

I'm working on a extension for a fb game that adds some extra info to popup boxes, hides some useless information and run some timers so you can see how long till you have to do something even if you are not on the game page.
My problem is that a while back they went over to using ajax to change between pages and I am wondering if I am using the right approach to handle this.
I run a setInterval that checks if I am on a page where i want to add/remove soemting and i havent done it yet, if this is true I do my stuff, the code looks something like this:
function myFunction() {
if($(selector for some element I am looking for).length > 0 && $(selector for some item I add).length == 0) {
//do some stuff
}
}
setInterval("myFunction()",1000);
Is this the right way of handling ajax page change from an content script in an extension?
If so is there a better way to see if I am on the right page or if i have added to this page already other than doing a selection?

You can use livequery jquery plugin to catch when new element is created on a page:
$("#ajax-element").livequery(function({
//ajax-element is created
});
You can also listen to DOMSubtreeModified event which fires when DOM changes:
document.addEventListener("DOMSubtreeModified", function(event){
//something has changed, possibly ajax-element was added
});
There are also more specific DOMNodeInsertedIntoDocument and DOMNodeRemovedFromDocument events.

jQuery ui tabs select help needed. Can I cancel the action?

I'm using the following function to update the tabs on a jQuery ui tabs widget.
function updateTheTabs(select, disable) {
var selectIdx = vehicleSelectorControl.tabIndexByName(select);
$tabs.tabs('option', 'disabled', [])
.tabs('option', 'disabled', convertToTabIndices(disable))
.tabs('option', 'collapsible', true)
.tabs('select', selectIdx)
.tabs('option', 'collapsible', false)
.tabs('select', selectIdx);
}
I'm toggling the 'collapsible' option to achieve a desired behavior by the client. I also update the content of the tab on tabSelect. My question is I would only like the first tabSelect to actually trigger the call to the server. The 2nd tabSelect is just meant to show the tab. I realize this is a bit of a hack. Other controls on the page affect the tab states and in a certain case, a tab was already selected so the first call wasn't updating its content, hence I made it collapsible, select it (which is actually de-selecting it), set collapsible to false, then selecting the tab (this triggers the update properly). Anyways the client likes the current behavior except that I can see the server is being called twice. I tried breaking the chain in to two pieces and setting a boolean variable in between then checking it when deciding to update the tabs. I didn't quite get the behavior I wanted. Can anyone point me in the right direction here? Again, I don't want to call the server if it's not necessary. I would like a solution that doesn't require changing the 'updateTheTabs' function. Thanks so much for any advice or tips.
Cheers,
~ck in San Diego

I'm not sure I got what you wanted to do, but to the sentence "...except that I can see the server is being called twice", I take that you want to cache the content of the tab.
You may try to set the cache option to true when you initiate the tabs:
$tabs.tabs({cache: true});

It might be easiest to just use a global to keep track of whether or not the tab has been loaded. Then in beforeLoad, check if the tabs has been loaded. If not, load it, otherwise just show it. In example code below, be sure to change 'my-tab' to match the title in the html, i.e. My Tab
var tabLoaded = false;
$("#tabs").tabs({
beforeLoad: function(event, ui) {
if($(ui.panel).attr('id') == 'my-tab' && tabLoaded) {
event.preventDefault();
}
});