Using client side scripting to control an SAPUI5 app - javascript

So, we have an existing app, which I think is built on sapui5 if I am not mistaken. It's pretty much a simple search function app. I reviewed the DOM and noted that the search box form has the ID of #__xmlview0--searchField-F, and the search box container including all is under #__xmlview0--searchField and the actual text entry area is under #__xmlview0--searchField-I. Essentially, it looks something like this - highly simplified:
<div id = "__xmlview0--searchField">
<form id = "__xmlview0--searchField-F">
<input type = "search" id = "__xmlview0--searchField-I" />
<div id = "__xmlview0--searchField-search"></div>
</form>
</div>
There are two pages that I am interested in, one is the original start page for searching, and the other is the search page with results displayed, which also contains the same search box so that users can quickly perform another search. Lets call these start page and results page.
Since the app doesn't seem to take any QS for search strings, I was wanting to create a nested page where I can simply pass on the elements of searching into the app generated page, and display search results with one click, instead of having the users need to do them manually and transcribe things from one place to the search function.
I have attempted initially to simply change the value of the search box and then submit the search:
$("#__xmlview0--searchField-I").val("SOMETHING");
$("#__xmlview0--searchField-F").submit();
Such approach did not work. It appears that the submit will execute for the start page, but will not for the results page. But even with the start page where submit executed, the search text of "SOMETHING" has been lost for sure somehow. So I tried typing in text manually and only doing:
$("#__xmlview0--searchField-F").submit();
Which seems to show the submit button working (also only for start page, not for results page), though it appears that "SOMETHING" is still lost somehow even though I manually entered the text when executed in start page. Thinking something may be wrong with clicking the submit mechanism programatically, I tried only doing:
$("#__xmlview0--searchField-I").val("SOMETHING");
and then manually click the search execution icon (also tried pressing "enter"). But to my dismay, despite the DOM display the changes for the input search field properly, the search did not execute though the button blinked so I am sure I properly clicked it at least.
So I thought, maybe I need to trigger some kind of event before I start making changes to the search field to prompt proper event execution behind the scenes so that the input text will be recognized properly when changed:
$("#__xmlview0--searchField-I").focus();
$("#__xmlview0--searchField-I").val("SOMETHING");
$("#__xmlview0--searchField-I").focus();
$("#__xmlview0--searchField-F").submit();
But that did not work either. I am pulling my hairs out trying to figure out what may be going on. Can someone who knows the SAPUI5 stuff give me some insight? Am I doing something that is simply not possible under this environment?

Related

How do I use javascript in Acrobat?

I am creating an Acrobat file with multiple pages. Each page has a map and a list of names down the side. Each name is a button and I have JavaScript entered for each, so that when you hover the mouse over the button, the corresponding name shows up at it's location on the map (via a text field), and then when you move your cursor away from the button, the text field disappears.
Here is the code I have for MouseEnter:
this.getField("Kyle Deal").display = display.visible;
Here is the code I have for MouseExit:
this.getField("Kyle Deal").display = display.hidden;
It works great if you stay on one page, but my problem is, is that when you hover the mouse over the button and the name appears and you move to a new page, and then come back, the text field is still there because the MouseExit never actually triggered when you were on the page the first time, no matter where your cursor is now. This happens way more often than it sounds like it might, pretty much every time someone uses this document at all.
Does anyone have an idea of how I can go about resolving this issue whether it be by a bit of JavaScript that clears all functions when you move to a new page, or maybe I can edit the MouseEnter function to go away after a certain period of time, or some other method inside Acrobat's settings?
One approach would need some field renaming (to make things easier). You would set all relevant fields to hidden when leaving the page.
Now with hierarchical field names, where the fields on page 2, for example, would have a name "p2.xxx", your command in the pageOut event would be
this.getField("p2").display = display.hidden ;
and that would do it.
Otherwise, you would have to hide field by field in the pageOut event.

Navigating back to Search Page with same state (JavaScript)

How do I, using JavaScript, retain the state of the search page, when a user clicks into a search result, but then goes back to the main search page.
e.g.
HTML:
https://startech-enterprises.github.io/docs/guides/data-analytics/data-analytics.html
There are 5 elements that determine what is shown on the page:
What tags are clicked in the three filter menus, on the side
What search term is typed into the search menu bar, at the top
The pagination page that is selected, at the bottom
Problem is that whenever I go into the search result, and navigate back to the main search page, the search page resets itself, so I have to re-enter the search criteria again - which can be quite annoying.
If I click 'back' in the browser, the search page state is retained, but the search script stops working. Also, using the 'browser' back button only goes back one 'link' - so if the user clicks on several links in any page (returned from the search), they have to press the 'back' button many times, to get back to the main search page - which again isn't ideal.
Any ideas on how to solve this? Would seem like a fairly common problem?
The site is purely static, (generated using Markdown and Jekyll). Site interactivity is set with Vanilla JavaScript, and SASS/SCSS.
Pls do help!
Many thanks in advance.
Sachin
UPDATE: This has now been solved based on the answers given below
You can simply do it by saving the data in users device . You can do it by using cookies or by localStorage. I prefer localStorage because users can deny cookies easily.
Like this-
localStorage.setItem("tags",tagItemsInAnArray);
And laterlocalStorage.getItem("tags");
You can use localStorage to keep the search filter data. The concept is to keep all filter data in an array and keep that array in the localStorage of the browser before any redirection. Here is an official documentation with implementation of localStorage.
Here is a demo:
//before redirection
let filterData = [];
localStorage.setItem("searchFilter", JSON.stringify(filterData));
//after page-load
let cachedFilterData= JSON.parse(localStorage.getItem("searchFilter"));
if(cachedFilterData.length>0){
//cache data exist
}
//when you need to delete cache
localStorage.removeItem("searchFilter");

Logging in to the Netflix website using JavaScript

I'm trying to write a wrapper for the Netflix web page in Qt using QWebEngine so that I can use my remote control to navigate. For those who didn't know, the Netflix website can't even be navigated using the arrow keys...
So, anyway, I have used QWebChannel to inject some JavaScript code into the web page, and can (visually, at least) modify the relevant elements:
document.getElementsByName("email")[0].value = "%1";
document.getElementsByName("password")[0].value = "%2";
document.getElementsByClassName("btn login-button btn-submit btn-small")[0].click();
This actually works (I can see the fields filled with what I provide for %1 and %2, and the button is pressed programmatically), except for one crucial issue: this results in the messages below the input forms telling me "Please enter a valid email." and "Your password must contain between 4 and 60 characters.". These tell me somehow just setting the HTML elements' values doesn't have the same effect as me manually typing in the values. Could someone help me figure out why this doesn't work, and how I can make it work? I would like to restrict myself to plain JavaScript, it seems like a simple enough task to achieve without e.g. jQuery or some other Javascript library.
I understand this is a terrible way to approach the whole Netflix-on-a-HTPC thing, but I don't want to go digging through e.g. Flix2Kodi's Python to figure out what they are doing (which seems to me is a lot more susceptible to bad breakage than the end result I'm aiming for).
The input field for the email uses some sort of HTML5 and ReactJS validation mix.
However it seems like ReactJS validation cant handle the the dynamic value change, so I tried to find a way to deactivate it, which I did not directly, but I guessed that it has to add some sort of event handler to the form so I came up with this:
var validatingForm = document.getElementsByClassName("simple-login-form")[0];
var nonValidatingForm = document.getElementsByClassName("simple-login-form")[0].cloneNode(true);
validatingForm.parentNode.replaceChild(nonValidatingForm, validatingForm);
which gets rid of all event handlers and therefore ReactJS's validation. Now you can set your value using your code:
document.getElementsByName("email")[0].value = "%1";
document.getElementsByClassName("btn login-button btn-submit btn-small")[0].click();
Note that HTML5 is still validating the inputs, so you have to provide an E-Mail Adress, if you want to get rid of that too set the input type to text before changing the value:
document.getElementsByName("email")[0].setAttribute("type", "text");
However the next page after the Button click asks for the password so you'll have to provide it there as I didn't find a way around this.
Buuuuuttt could you not have saved the password in your browser, let it do it's autofill work and fire the click event only?

local visible text search on current web page

I need to do a local search visible text on a single simple html page. Users can simply use Ctrl+F to do that, but I would like to add a search box on the page to do the search instead. I thought of a couple ways to do this:
1- By forcing the browser's Find tool when a button on the page is clicked.
2- By a javascript/Jquery plugin that do LOCAL search on the current page.
I searched for both solutions but was not able to find anything useful. Does anyone here have any suggestions?
You can give a common class name to the tags that contains the display text and perform a search based on that class name. I had attached a link for your reference. you can make use of that funtion and call that function from a button click.
Generic Search in HTML Page

Getting field values from another form to perform validation on the web in lotus notes

I have a radio button field on a lotus notes form (say main form). If it is selected as "Yes", a link gets unhidden. On click of this link, another form opens up. If in the radio button, "Yes" is selected in the main form, the contents in the second form must be filled. So I need to write a validation if the radio button field is "yes" and the field inside the second form is not filled, then it should show a popup asking to fill the field in the second form. How do I get the value of the field in the second form on the main form for me to perform the validation?
You literally cannot do what you've described you want to do. The second (pop-up) form and its content no longer exist in the client (browser) context when you want to do validation on the first form's data. There are three possible ways to tackle the problem but only two of them are actually practical.
Let's dispense with the impractical method first. That would have the pop-up form write something back to its parent/opener, either as a JavaScript variable or as DOM content (a field outside of the Domino form or hidden element or some such) or, perhaps as a cookie value. Setting up the opener relationship reliably can be a problem cross-browser, but it is doable. The problem is that no matter how you do this, you have no guarantee that the value will be there when you need it (or expect it) except when the parent form is initially filled out. If the document is ever edited, you have no way of knowing whether or not the user has filled in the data on the pop-up. Anything you may have written to JS variables or the DOM during the initial session with the form only exist during the initial session. Cookies aren't permanent; they can be cleared by the user even if you try to give them eternal life via the expires value. No matter how you do it, you'd be telling anybody who has previously filled out the data you want that they need to fill it out again.
The second method would be to make a call back to the server to see if the pop-up form has been submitted and turned into a Notes document. That doesn't scale at all; even if everything is happening on a single server, there's no way to guarantee that the document you are looking for will have been written and indexed by the time you need it, and there is a time factor involved. If the user has already seen the validation nagging once, does what you tell them to do, and then gets the nag again, you're not making any friends.
The third method is to do everything you need to do on one form. (You can use CSS to do the pop-up if you're married to the pop-up idea.) And, you know, it really doesn't matter at all whether or not you would prefer to do it another way, it's the only way that will be reliable and make happy users. Yes, it will mean a little bit of extra work on your part. You're a developer - that's what you do for a living. You can even keep the structure of the existing application intact; WQO and WQS agents mean that you can glue documents together before sending them to your user, and pull them apart again before you save them. This is the only method that is guaranteed to be fast enough and reliable enough to be usable on the web.

Categories