Hide fields from ADAPT UI configuration^in SAPUI5 - javascript

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.

Related

Hiding rest of article before form is filled

I am currently building the blog and the client asked me to create a modal after a few scrolls so the user has to submit the email before continuing with reading.
I have built that. No problem.
BUT now he asked me if there is a way to prevent the user to see the rest of the content in Inspector or not just by disabling overflow:hidden on the body.
So is there any way to hide the rest of the content from the inspector before hitting the submit button?
Thanks for any advice
One thing you could try is have the submit button run a function that sets a global variable ishiddenfrom a default true to false.
The code for ishidden might look like this:
var ishidden = false;
//function that makes the user do form -> sets ishidden to true
//submit form function -> sets ishidden to false
and then you would have an if function that would change the styling
that might look like this:
//pure js solution. jquery is a bit different
if(ishidden){
document.getElementById(article).style.visibility = "hidden";
}
there would be a bit more code, but this is the general idea

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.

Bootstrap Popover AND a Modal (hover and click)

Scenario: user profile. I would like to be able to display a user name with a popover that displays a limited amount of information from the user profile. So far, I have that part working. I can build it on the fly and have it do what I need. The popover works perfectly.
What I would also like to do is have the user be able to click on the user name and bring up a Bootstrap modal form with more information about the user (if provided). The first problem I am seeing is that it appears the data-toggle attribute can only have a single setting:
echo '' . $user_row['user_name'] . '';
In that example, if I add the modal to the data-toggle attribute it doesn't seem to do me much good.
I have discovered by tinkering (and that is why the class 'userprof' in the code above), that a JavaScript click event can be triggered (right now all I'm doing is a basic JS alert dialog to test), but from there I would want to load the modal. I am not sure if I can make it all work.
I have a set of functions I've used successfully for another modal (calling this one 'userModal') that I got some help from someone here a while back with -- is it possible to call that from the click event?
// code to open the modal with the caption and description:
$('#userModal').on('show.bs.modal', function (event)
{
var button = $(event.relatedTarget); // Button that triggered the modal
var title = button.data('title'); // Extract info from data-* attributes
var body = button.data('body'); // Extract info from data-* attributes
var modal = $(this);
modal.find('.modal-title').text( title );
modal.find('.modal-body').append( body );
});
// when modal closes, clear out the body:
$('#userModal').on('hidden.bs.modal', function ()
{
$(this).find(".modal-body").text('');
});
Since these are "anonymous" functions I am not sure I can call them ... feeling a bit lost in the code here. Any help pointing me in the right direction would be great. I'd even be willing to consider a different idea, but I would like this kind of functionality (hover and click) for this situation and possibly something else. Thanks!
You're listening for the modal to show itself, when the DOM is showing the modal.
try using something like this, and use a button or a link with data-toggle="modal"
$(document).on('hidden.bs.modal', '#userModal', function ()
{
$(this).find(".modal-body").text('');
});
for reference https://jsfiddle.net/y063mu4t/1/
You can try:
$(document).on('click', 'a.userprof', function(){
$('#userModal').modal('show');
});
To make your callback function work, you need to add according data-* attribute to each of the <a> tag.

How to synchronize toggle selections across pages with JQuery Mobile?

I have a need to have a multi-page html, with each page containing an identical toggle. When the user changes a toggle on one page, all the toggles on the other pages should change (or at least change on loading the other pages).
I've created a Fiddle to illustrate a simple scenario, with a two page example and identical toggles on each page. I'd LIKE to be able to change the toggle on page 2 by toggling the toggle on page 1
http://jsfiddle.net/vSr99/
I've tried a number of methods, and yes have included a refresh after attempting to manipulate with javascript, but have not even come close, no doubt due to my programatically challenged nature :-/
If anyone can suggest a simple solution I'd much appreciate it!
Thx
try setting a global attribute when the button is clicked and store this on $('html') like so:
$('html'). attr('toggleIs',true);
then you can check for this on pagebforeshow and add the toggled state to the buttons on all new pages being pulled into view depending on the button state.
EDIT
Here is a jsfiddle (ignore the first alert);
Here is the html:
$(document).on('change', '.your_select', function(){
// set
if( $(this).find('option:selected').val() == "on" ){
$('html').data('toggle', 'on');
} else {
$('html').data('toggle', 'off');
}
});
$(document).on('pagebeforeshow', '.ui-page', function(){
var that = $(this).find('.your_select');
// clear
that.find('option').removeAttr('selected');
// reset
if($('html').data('toggle') == "on" ){
alert("should be on")
that.find('select option[value="on"]').attr('selected', 'selected')
} else {
alert("should be off")
that.find('option[value="off"]').attr('selected', 'selected')
}
// refresh slider
...
});
please note:
took me a while to see you where using jquery 1.6.4, so my on-bindings didn't work. If you want to keep, you need to use live for the bindings to also capture pages being pulled in.
I gave a class to all sliders, to set them together
I cannot get the JQM slider('refresh') to work on the slider or any parent element... you will have to figure that out by yourself, but the synchronizing is working :-)

Javascript alert popup form

i have search this whole site and google but cannot find it so, here goes!
i would like a way to show a form when using alert.
for example, when user click post, a dialog pop with asking user a few question like a html form and allow user to click submit or reset or cancel, without loading a new page.
i have seen this done but cannot find the same site again.
i have tried putting htm to alert with little success of posting.
any Help is Highly Appreciated!
What you are looking for is a Prompt Box:
<script type="text/javascript">
function show_prompt() {
var name = prompt('Please enter your name','Poppy');
if (name != null && name != "") {
alert(name);
}
}
</script>
example taken from here: http://www.w3schools.com/js/js_popup.asp
you can do this with jQuery dialogs -- load the dialog on user click and have a form presented in the dialog. have a look at the demos here: http://jqueryui.com/demos/dialog/
To complete #Liv's answer you can use jQuery's UI
Reference: Modal Form
The example shows how to create a new user. It will pop up a dialog where you complete a form and you can submit it or you can cancel it.
Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.
It pretty much what I understood you need.
Good luck!
HTML can't be placed in system dialogs generated by alert(), confirm() or prompt(). However, you can download jQuery UI and set it up on your Website. (Make sure you have the "dialog" component chosen on the download page.) Then in your JavaScript:
$("<div>Place your HTML here</div>").appendTo("body").dialog({
modal: true,
title: "Enter a title here"
});
Make sure you run this code after the page has loaded by using either window.onload or $(document).ready().
Ad#m
You will not be able to do this with alert, but you should take a look at how to create modal windows.
I recommend you to use a div popup. What you have to do is setting a background on top of all other elements except the div where your form is. The css property display will be set to 'none' until the form is then activated, by setting display = "block". That can be performed using javascript.

Categories

Resources