AEM: Access component rendition only, not the whole page containing it - aem

I have a component that performs pagination with its suffix.
So,
/contents/myproject/search.html/1 brings the first page displaying 10 results
/contents/myproject/search.html/2 brings the second page displaying 10 different results
Now I've been asked to make it more dynamic and add a next button to page 1, so it will append the next 10 results, instead of having another separate page load.
My plan is to use JS and make an AJAX call to the following page, find the div I want, take those 10 results and append them to my first 10. The issue is that page is enormous and I would be downloading a lot of other unnecessary stuff in that call.
Is it possible to access the rendered component only? the one being added by
<cq:include path="pagination" resourceType="myproject/components/pagination" />

If you have node pagination under /contents/myproject/search/jcr:content with correct sling:resourceType, then it should be pretty easy - GET request to /contents/myproject/search/jcr:content/pagination.html.
Also it highly depends on implementation of this component if suffix will work there.

Related

How to add wait / Delay until web page is fully loaded in Automation Anywhere?

I want to know 'How to add wait or Delay until webpage is fully loaded,' in automations anywhere,
I used
wait for screen change
But it hold the process until some time specified by the developer , but I want to add delay until the web page fully loaded,
Is there anyone can help me?
sorry for the bad English.
Usually, a website is "loaded" or "ready" before the actual content is loaded. Some websites even have dummy content which is replaced once the actual content is retrieved from 'somewhere'. Hence waiting for the screen to change is not a good idea.
My approach is to pick an element which you know is loaded after the element you want to interact with. For instance the navigation bar on this website is loaded before the comments are. You can either figure out which element to use by looking at the source of the website by right-clicking anywhere and selecting view source or by simply refreshing the page a couple of times and eye-balling it. The former requires some HTML knowledge, but is a better approach in my opinion.
Once you've identified your element, use Object Cloning on said element and use the built-in wait as a delay (usually set to 15 sec, depending on the website/connection). The Action should be some random get property (store whatever you retrieve in some dummy variable as we're not going to use it anyway).
Object Cloning's wait function polls every so many milliseconds and once the element is found it will almost instantaneously go to the next line in the code. This is where you interact with your target element.
This way you know your target element is loaded and the code is very optimized and robust.
On a final note: It's usually a good idea to surround this with some exception handling as automating websites is prone to errors.
A very simple solution is to run your automation while watching and determine the amount of time it takes for the webpage to load. You can add a Delay rather than a wait if you know the page is generally loaded within 30 seconds or so.

wrong content is cached

We have a site which sometimes delivers a wrong content for a specific URL.
The page has a plugin and by default should show the records listing (or the first record listing as the listing is grouped by initial letter). After clicking a link some records are viewable in detail on the same page.
Every now and then a cache problem occurs:
Instead of the listing a detailed record is shown.
Although we use realurl, all problems occur also with the basic urls.
For overview I will only write the url-parameters, assume www.domain.tld/index.php? in front.
The page to call is id=61.
What I see is
cHash=3df3421afc42d3d5bfa1bc50603ea00d&id=61&tx_citkoegovservicelight_ansprechpartner%5Baction%5D=show&tx_citkoegovservicelight_ansprechpartner%5Bansprechpartner%5D=282.
In the HTML-source of the page I show the page calling parameters with the extension page_params. Here I see:
tx_citkoegovservicelight_ansprechpartner[action]=show&tx_citkoegovservicelight_ansprechpartner[ansprechpartner]=282&tx_citkoegovservicelight_ansprechpartner[letter]=kontakt&id=61
Two strange notes: there is no cHash parameter, there is an additional parameter tx_citkoegovservicelight_ansprechpartner[letter] which never should be used with detail view and never should have the value kontakt (only single characters were used for the listing of all records starting with that letter = no detail view)
Using these parameters does not show the detail-view but the the list view (for letter 'A').
I do not find a reason why this special URL should be called (no link) and I don't know why TYPO3 should cache a content which belongs to another URL.
And it is a problem with TYPO3 cache as all works correct if I clear the cache of this single page.
Please check my answer to another issue. The accepted answer is right in that case, but in your case it can really be caused by failed cHash calculation, because it is not related to RealURL.
Try to clear the cache and then right after that go to tx_citkoegovservicelight_ansprechpartner[action]=show&tx_citkoegovservicelight_ansprechpartner[ansprechpartner]=282&tx_citkoegovservicelight_ansprechpartner[letter]=kontakt&id=61.
And then simply open the page id=61. If you see the wrong cached result, then the reason is in a combination of following factors:
Plugin's action is cached
Cache fails are allowed in installation
cHash calculation failed
To prevent this you should enable pageNotFoundOnCHashError in Install Tool. Then the problematic link above will just trigger 404 and will not force TYPO3 to render the page.
To a question where the link is coming from. If the website is already live, it can be everything: from a crawler, which somehow builded the link itself to a user who tried to play with parameters.

Deeper understanding of Document Object Model

I recently encountered this on one of my project and I don't think I have the full understanding of this thing at all. The only thing I know are the following:
-That DOM prevents scripts that are loaded on blocking the rest of the page.
-Html files and other page source codes are parsed and turned into DOM, with which, when you inspect it or go to view page source, the DOM format of the code is what it will throw you.
-I was also able to implement DOM on our project through the help of a tutorial.
Now, my questions are:
-Is the code in the devtools the DOM?
-Does DOM adds security features on a system?
-Since DOM was widely implemented in the layout engines of the web browser, is there any other advantages of using DOM aside from it prevents possible blocking of the rest of the codes of the page?
Thanks guys.
The DOM (Document Object Model) is all about the code/object hierarchy within a given system/node. It is symbolic of the branches of an upside-down tree. It forces the different layers of code to always have a parent-child-sibling relationship.Any code inside another block of code is a child of the larger block. For html, the html tag is the parent of all other tags, followed by the head, then body tag. Most all displayed content is in the body section, with one division creating the main page you see. After the division tag you have the ul / li / p / a tags. Sometime the span tag is used as a wrapper for the 'a' or 'p' tags. The 'ul' tag is a child of the div tag it is in, and the 'li' and/or 'p' tag is a child of the 'ul' tag. Only the span tag varies in location when used, depending on its need to keep objects and/or text inline. The lowest possible child (or leaf in a node tree) is either a 'p' tag or an 'a' tag. No other tag can be used inside the 'a' tag. A sibling is referred as a tag or node of the same level in the tree, but in an adjacent div or ul or li tag. Their relationship is not defined normally, unless there is a need to do so. In summary, the DOM is used to insure order and readability in html / XML /SQL and other software systems. It does NOT guarantee good working code by itself, but it sure helps create efficient working code early in the design stage.Also, new coding functions are being employed that can bypass or modify the way the DOM behaves. Angularjs and MEAN, which includes a micro-server and node.js, are trying to turn a clients web page into a de-facto desktop application, such that the request to the server become as minimal as possible. These new functions do not contradict the DOM model, but act as a wrapper so action/editing/motion on a webpage appears instantly without having to contact the main server. During periods of no user action an update is sent to the main server, so the website and the PC stay in sync in terms of changes that are at least semi-permanent.Please read as much as you can about these topics, because every year something new is added.

web submission automation: simulate onclick event on a title element to load form

A resume-service I use requires that for each listed activity on the resume, there is an hours-per-week field and total hours field. However, the total hours field does not update itself automatically no matter how many weeks pass. My goal is to write a script that does this.
The idea behind the script is:
Log in to website -> go to a certain page -> submit a form** on that page updating the total hours
**unfortunately, for the form to open, you need to click an "edit" title element first which causes it to show up. I've taken a look at the html of the webpage but cannot find the form or input tags corresponding to the form I wish to submit, only that the form is generated with what I think is a javascript function call from the element's onclick field.
I believe the relevant html snippet is:
<a title="edit" class="edit" href="#entry-type" onclick="editComponent('10227041','education');">Edit</a>
but just in case there is a much larger code snippet later in this post (check the 2nd pastebin link at the bottom)
THE QUESTION: Is there a specific language/library/way (preferably in python, although I can work with Java) to simulate an onclick event and that would result in a form loading?
I've worked on this problem a bit, starting with python's mechanize library. I wrote two functions,
def login(br,url):...
def navigate(br,baseurl,url):...
which would satisfy the first two parts of my script's plan, but the third is where the trouble starts. When I print all the forms on the page using
for form in br.forms():
print form
I get http://pastebin.com/Gxy2tc1A
The website's html can be found on http://pastebin.com/PySri5cb
Later I tried to work with Selenium (the firefox IDE plugin) and then exporting code into python, where I would edit it to satisfy my specific needs, but that was a no-go either due to some awkward errors.
Have you looked into GreaseMonkey? You should be able to use that to extract the hours per week, do the math and populate the total hours field. You could probably do the entire thing. Anything that can be done on the page in JavaScript could be done within GreaseMonkey.
EDIT: The code for that site is awful. I especially like the inline call to loadResume() that is made BEFORE the element it writes to (#build-wrap).

Go to a new page, but still have GWT variables?

In GWT, I would like to do something like a form submission that takes me to a new page, with new style sheet and new static elements, and when I get there, be able to extract the values of GWT variables still in GWT. In other words, I want to do most of the form processing on the client side instead of sending it to a servlet to be processed and sent back. Is that possible? Would FormPanel allow me to do that? How do I access the contents of the form fields in GWT on the new page?
I'm not sure I'm getting the right picture here, but I see several possibilities:
Pass the variables in the url like example.com/myform#create/param1/param2 or any other format you want, then read it using the History class
Use something like this - create an iframe from GWT (maybe put it in Lightbox or something similar), populate it the way you want using the current state of the app, and when the user is finished, he'll just close the (Lightbox) frame and get back to the main application
You could also pass around data in a "hidden" way (no visible data in the url or even through POST) using the window.name hack - there's even a sample implementation for GWT to get you started
ATM, I prefer the second option, since it goes best with the whole no refresh, same page, one app, GWT thing :) That is, unless I'm getting the wrong picture and you want to do something else.
GWT is really meant to be used for the whole application, where "pages" are replaced by application state and URL fragments, and "form submission" is replaced by AJAX calls.
If you want to validate form fields, this can easily be done with regular JS or a library like jQuery.
I'm not sure it I get you right either, but for what I'm receiving, having a new page to process the form is not the optimal design. The reason been that you might have to write different GWT app for that which mean overheads, and creating new window (or tab) will move the user's attention away from where they are. Why not using another page WITHIN gwt to process the form with tab panel or hidden panel?