OAF personalization - Java Script

Recently I got a requirement to change the default option from 'New Bank' to 'Existing Bank' on the iSupplier bank details page. 

This cannot be achieved by the direct personalization as values are being set dynamically. The value for ‘Existing Bank’ is ‘OLD’ and ‘NEW’ for ‘New Bank’. The inherited value is already ‘OLD’ but at the run time it is being set as ‘NEW’ and the default radio choice is ‘New Bank’ instead of ‘Existing Bank’.
With the help of my very good friend Vikram, I achieved it with java scripting.

To achieve this functionality, we need to write some java script which can overwrite the initial value to ‘OLD’. Components involved
   > Java & HTML script
   > OAF Personalization

First, to know about the logic, right click on the radio choice, ‘New bank’ and select ‘Inspect’ (it might possible you won’t able to perform this in IE, either use chrome or press F12)
Here you can see the logic how radio choice being selected; this is after the solution so you are seeing ‘OLD’

We tried first
<script>window.onload = document.querySelector("input[name=BankSelectChoice][value=OLD]").checked=true;</script>

In the ‘Console’ you can test your script before doing the actual personalization.

This Worked on Chrome but did not work on IE -- Depends on IE version and developer mode set, even the IE version is 11 but if developer mode is set as 5, the below script won’t work in IE.
If you change the developer mode more or equal to version 9, it would work as querySelector is not avaliable to less than IE9.

So the final Java & HTML Script
Ø  Script is finding the value of the Radio Choice BankBranch and setting the click when it is finding ‘OLD’ at the time of window load. OLD is the value for ‘Existing Bank’ or ‘Existing Branch’.

Ø  It is setting up ‘Bank Branch’ only because ‘Bank’ choice is dependent on the ‘Bank Branch’ choice. ‘Bank’ choice will change according to the ‘Bank Branch’ choice.

<script>
function xxakde() {
var x= document.getElementsByName("BankBranchSelectChoice");
var i;
for (i = 0; i < x.length; i++) {
  if (x[i].type == "radio") {
    if (x[i].value=="OLD") {
    x[i].click();
    }
  }
}
}
window.onload = xxakde;

</script>

Please Note: This can be done in a single script as above, but I have modularized it for better understanding and created two scripts. 

1> First to create a function to find the set the appropriate value 

<script>
function xxakde() {
var x= document.getElementsByName("BankBranchSelectChoice");
var i;
for (i = 0; i < x.length; i++) {
  if (x[i].type == "radio") {
    if (x[i].value=="OLD") {
    x[i].click();
    }
  }
}
}

</script>

2> Secondly, a wrapper function to call the above function on the window load

           <script>function xxdef() { xxakde();} window.onload= xxdef(); </script>

OAF Personalization

Responsibility: iSupplier Profile & user Manager > ‘Supplier details’ > ‘Banking Details’ 
Click on ‘Create’ Button' > ‘Personalize Page’

Choose ‘Complete View’ and ‘Expand All’
Now click on ‘Create Item’ symbol under the last topmost Region so that the custom items will be sitting at the end and easy to find.

ID: Any Suitable ID as per the Home Group naming standard EX: XXAKDEFAULTBRANCHOPTION
Leave the other properties with default values and ‘Apply’

Similarly, create another item
Choose Level as ‘Site’, Item Style as ‘Raw Text’ and modify below properties
ID: Any Suitable ID as per the Home Group naming standard EX: XXAKDEFAULT
 
Leave the other properties with default values and ‘Apply’
It should look like as below, click on ‘Return to Application’

It should do the job