Browser add on/extension to intercept data selection then simulate link click and data entry - browser

Background: a third party web application with a requirement on the order page to explicitly guide staff when a certain category of product is ordered.
Normal process:
select product to add order line (click on product image)
New process:
select product to add order line (click on product image)
[add on] simulate click on edit order line
[add on] simulate clear of default additional information form fields
enter additional information and click save
Note that the two steps to be performed by the add-on could be performed by the user however when things get busy or new staff begin is often the case that the order gets processed with the default value.
Any pointers in the right direction would be appreciated.
A multi-browser solution is preferred but not essential.
I am an experienced developer, including web development, but have no experience in browser add on/extension development.
Thanks.

You can make an addon out of this very easily. You addEventListener to the gBrowser and if the event.target is the product element then preventDefault so the click doesnt go thru (you will have to do mousedown and mouseup prevent as well). Then rather get the id of the "edit order line" and do .click() if that doesnt work and you really need to simulate use MouseEvent:
MDN :: MouseEvent
MDN :: Initatite/Dispatch MouseEvent
To enter aditional information get the id of the fields, and set their value. Then get the "Save" button id and then do .submit() or .click()
i said do get id in this post but you can use querySelector and go by css selector
see this page here on how to interact with content in currently selected tab:
https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Tabbed_browser
basically just do gBrowser.contentDocument.getElementById

Related

How to display images accourding to choise from dropdown?

I'm creating a Django website where I want to implement such functionality.
There will be one Dropdown list and one submit button. When user selects any item from dropdown list - An image according to user selection will be displayed.
ie. There's drop-down list containing names of animals and one submit button. When user selects any animal from list, photo/details of that animal should appear before pressing submit button.
I don't know how to create link between them. Any reference to such work or advice would be appreciate.
Thank you :)
You likely want to use async request with JavaScript here (look for AJAX or JS Fetch API)
Attach it to onchange event of select element and send it's value to django.
Django will have a view that processes this request and returns a JsonResponse with image url.
Alternatively you can load all urls before hand and just select them on page without request, but anyway if you don't want to press button to take change - you need JavaScript.

calling validation on tab click ( jQuery-Validation-Engine )

I have set up the jQuery-Validation-Engine addon (https://github.com/posabsolute/jQuery-Validation-Engine) and it works great on the submit button.
However, since i invoked a tab-based interface, it doesn't really bring the user back to the proper tab with the error fields.
As a work around, i've decided its better to validate each tab when leaving to the next one (as it is a step-wise tab) so that the button click at the end will only 'really' need to correct any errors on the currently displayed tab.
I'm using a simple anchor to call some div swaps (using negative margins for content off-page).
I'd like to invoke the validation method to this as well.
Documentation says it can only be attached to a form element.
Any ideas?
Update- i ditched the tab idea and am now using one big form so this no longer really applies.
No support led to going after a different approach. No longer needed.

Hide CRM form left hand side navigation item

I have my account entity linked to a custom entity called inspections, I only want these inspections to be created for accounts of a certain type. So when it isn't that type I want the left hand navigation to this entity to be hidden away. I've seen some code that says will hide it away, as long as you have the navID of the item.
I've had a crack at hiding it using what i thought could be the ID but it hasn't worked, so I'm wondering if anyone knows how to get this ID, or if there is another way to do this?
The code I'm using to hide the navigation is below:
var navitem = Xrm.Page.ui.navigation.items.get("nav_ts_inspection");
if (navitem != null)
{
navitem.setVisible(false);
}
Load the form
Press F12 to show IE Developer's Toolbar
From here you can use CTRL+F to search for the display name of the item you'd like to hide. This will give you a link that is generated. The Id of this element is what you need to use to show/hide the link.
As an example, you can see results of searching for 'Sub Accounts' on the Account screen for an installation I am working on at the moment. The Id can be seen and is 'navSubAct'
Changes by traversing DOM and manually hide an area is not officially supported.
Luckily if you are on CRM 2011, you can go to
Settings > Customization Or open the solution.
Select the entity > Forms. Inside the Form editor window, open the Form Properties of the entity.
Go to Display Tab and untick "Show navigation items" checkbox.
Finally do not forget to Publish your changes.
Use the relationshipname to hide folder in navigation like this:
If you have folder with the relationship name: ts_inspection
Use this for ID: navts_inspection
So otherwise the same as above, but lose the extra underscore (_) between nav and ts.
var navitem = Xrm.Page.ui.navigation.items.get("navts_inspection");
If you want to hide particular navigation section from the FORM then remove all the links from that section and publish it. That section will not be visible anymore.
If you want to just remove Navigation Pane from FORM, then go to 'Display' tab of form and mark as 'Do Not Show' and then publish it.

Automatically open document when only one document is listed in repeat control

I have a repeat control for a domino view which displays the results from a search field.
As you type more characters into the search field the number of items in the list is reduced. If/When the the list only contains a single item I would like to open item automatically, without having to click the link.
Any ideas are appreciated.
Edit: after some very interesting responses, here are some screenshots
I have 3 elements on the page, a searchbar, a repeat control and a form:
When I start typing in the search bar, the repeat is refreshed with every keystroke:
the list is reduced, typing the next character ...
again the list is reduced, only 2 left, typing again....
Only one left, now it would be time to open the document in the form ..... without clicking the link.
I've tried several events on the page, but it seems that I could not find the one that will allow me to "select" the document and display the data in the form.
It seems that it's not as simple as I thought
Since you want to open the link automatically I don't know if I would try to base it on the getRowCount() of the repeat itself. You don't want to even get that far right? you just want to go to the single document.
I would put a function in beforePageLoad event maybe. Not totally sure which event but I'd try that first. Use SSJS and do a lookup that would basically return a collection of what the repeat would show. If the collection count = 1 then get your destination from that entry and do your redirection from there.
That what I would try at least. Interesting scenario!
Now that I see the screenshots this might be easier then you think and I have already implemented something similar on an internal application that I have built. It does rely on the fact that each entry in the list is 100% unique.
First of all you will need to bind the search field to a scoped variable and the onchange/onkeypress event will need to perform a partial refresh of a panel that contains both the list and the document portion of the page.
For the list the link on each item should set the value of the same scoped variable used in the search box and clicking the link should be set to run a partial refresh of the document area.
For the document area you will need two panels, the first panel will only display if there is no matching document and the second panel will only display if there is a matching document, you can do this in the rendered section by writing some ssjs that grabs a handle to the db/view and does a dblookup and returns either true or false if the document exists depending on panel your dealing with.
With this setup, when somebody clicks a link or fills out the searchbox the scoped variable will contain a value, the document panels will then check to see if this is a unique value in the view in the db and update themselves to either display the 'no document' panel or the 'document' panel accordingly.
You could add a evaluation script to the entry of your repeat control which checks the size of your repeat control using the method getRowCount() from the component. If this is 1 you could execute a context.redirectToPage("yourpage.xsp?id=yourid",true) this forces the current page to send a redirect request back to the browser and therefore redirects you to the correct page.
All you need to know is which xpage you need to open and which parameters you should use. But these could be retrieved from the content you are iterating over.

Watir : How do we capture the subitems displayed by doing mouseover on a particular item

I am trying to work with mouseover on a particular Item in my application by using the following command
{
ie.text_field(:xpath, "//a[contains(text(),'Deal')]").fire_event('onmouseover')
}
On doing mouseover on a item, two subitems are displayed.
Is there any way to capture the sub items which are part of the Item by doing mouseover with which we can report that our test is pass or fail.
Please suggest.
Additional Information :
If we take example,On the StackOver flow page, If i do mouseover on my name, i get a window where i see activity, privileges, Logout and other stuff. This is really what i was looking for. Is there a way to capture the items displayed on the window on doing mouseover.
I also tried to capture the subitems with the following :
{
text=ie.text_field(:xpath, "//a[contains(text(),'Deal')]").fire_event('onmouseover')
puts(text.inspect)
}
On doing this "text" value is displayed as 'nil'.
My general tactic for such things is a combination of using IRB and the IE Developer tool, or Firebug.
using IRB, type out (or cut and paste) the watir statement to fire the onmouseover command to the proper element on the page.
Then have the developer tool rescan the DOM (there's a little refresh icon you can click) The use the tool to point to an element to point to one of the items in the stuff exposed by the onmouseover. Using the info from that, you can then figure out how to address those elements to get the text from the proper div, etc.
If I do that here to the info that opens up when I float the mouse over my name I can find out that it is a table of class "profile-recent-summary" Furthermore I can then look at the way the table is made up and see for example that the 'today' reputation value is in the second cell on that row.. The row also has the text 'reputation' in it.. so
browser.table(:class, 'profile-recent-summary').row(:text, /reputation/).cell(:index, 2).flash
Should flash the cell I want (index might be 1 if using firewatir or webdriver) I can then replace the .flash with something else like .text if I want to get the text from that cell (which is actually inside a link that sits in the cell)..
without seeing your code, I would 'inspect' the element that you are trying to verify and when_present (text) assert that its true

Resources