Using jQuery to control Save of Related Content

Related Content allows you to add functionality as well enrich a transaction with supporting information.  In this example I will be demonstrating saving the related content transaction from the target, in the video above the target transaction is the Performance document for Brian Drennon and the related content is the quarterly comments.

TargetContent JavaScript:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script type="text/javascript"> 
 
function save_rlcArea()
 {
   try {
window.top.document.getElementById('RelatedContent').contentWindow.document.getElementById('RCArea').contentWindow.remoteSave();}
catch (e) {
        // do nothing
  }
}
   
$( document ).ready(function() {
     
$("input[name='EXIT_SAVE#SAVE']").click(save_rlcArea());

});
</script>

This JavaScript injects jQuery into the TargetContent and creates a function called save_rlcArea.  This function attempts to call a function that is declared in the Related Content frame called remoteSave().  I use a try and catch because we are not sure if the user has even attempted to open the related content, so the frame may not even exists.

Related Content JavaScript:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
function remoteSave() {

  submitAction_%formname(document.%formname, '#ICSave');

};
</script>
<script>
$( document ).ready(function() {

var tgtHead = window.top.document.getElementsByTagName('Head');

var scriptJQ = document.createElement('script');
scriptJQ.type='text/javascript';
scriptJQ.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js";
tgtHead[0].appendChild(scriptJQ);
scriptJQ.onload = function () {

     window.top.$("a[role='tab']").click(function() {
     try {
           window.top.document.getElementById('RelatedContent').contentWindow.document.getElementById('RCArea').contentWindow.remoteSave();}

catch (e) {

             // do nothing
         }
});
};

//inserting button if the button is not there

var tgtFrame = window.top.document.getElementById('ptifrmtgtframe');
if ( !(tgtFrame.contentWindow.$( "input[name='EXIT_SAVE\\#SAVE']" ).length )) {

var $mySep = $("<span>" , {id: "Sep", class: "PSTEXT", style: "margin-left:2px;margin-right:0px"});
var $myAnchor = $("<a>", {id: "Left", class: "PSPUSHBUTTON", role : "presentation"});
var $myAnchorSpan = $("<span>");
var $myAnchorSpanInput = $("<input>", {type: "button",name: "EXIT_SAVE#SAVE", class: "PSPUSHBUTTON", style: "min-width:62px;", value: "Save", onclick: "javascript:save_rlcArea()"});



$myAnchorSpan.append($myAnchorSpanInput);
$myAnchor.append($myAnchorSpan);



tgtFrame.contentWindow.$("#EXIT_SAVE").append($mySep);
tgtFrame.contentWindow.$("#EXIT_SAVE").append($myAnchor);
}
//end insert of button code
});
</script>

If we take a closer look at this JavaScript it is doing that majority of the work. It creates the remoteSave() function used by the target content JavaScript.  Then it loads jQuery into the top window and then adds a handler to the related content tabs, this handler saves the contents of the related area if the user uses the tabs to navigate to another related content. And finally it evaluates if the target content has the save button, if it does not have the save button then it creates the save button that will call the remoteSave() function if it is clicked.


Please note, this code is not production ready.  This is simply an example of how you can improve the users experience.  Remove references to external files if you want to use this example in production.