Custom UI Page Form Submission - PLEASE HELP!!

hyena · ‎06-23-2015

I am trying to submit a form through a UI page. I think I have made great progress on this, but still need some help. I feel like I am ALMOST there, and just need the final step to get this working.

Here is where I am today with all of my code. If SOMEONE...ANYONE can please take a look and let me know what I am doing wrong?

WHAT IS WORKING

From our incident form, I am calling a client script.

function onLoad() {
     //Add a UI macro to a non-reference field
     //Set the name of the field to place the icon in the 'field' variable
     var field = 'description';
     //Append the table name to get the field id
     field = g_form.tableName + '.' + field;
     try{
     //Create the image element and add to the field
     //Icons can be used or a custom image uploaded to images
     var img = document.createElement('img');
     img.src = 'images/help.gifx';
     img.alt='Search PGiKnow';
     img.title='Search PGiKnow';
//img.width='100'; //allows you to set up the width of the image
//img.height='100'; //allows you to set up the height of the image
     var link = document.createElement('a');
     if (navigator.appName == 'Microsoft Internet Explorer'){
           link.setAttribute('onclick', 'Function(SelectName())');
     }
     else{
           link.setAttribute('onclick','SelectName()');
     }
     link.name='full_view_button';
     link.id='full_view_button';
     link.appendChild(img);
     document.getElementById(field).parentNode.appendChild(link);
     }
     catch(e){
           //alert('Error');
     }
}
//onclick event to fire when the image is clicked
var popup;
       function SelectName() {
   var desc = g_form.getValue('current.description');
   var inc = g_form.getUniqueValue();
   //loads a UI page to allow for form submission
               popup = window.open("ui_page.do?sys_id=d517cc7034410200eccae9e892f3c05a" + "&sysparm_number=" + inc + "&sysparm_search=#" + desc, "PGiKnow Search", "width=675,height=530");
               popup.focus();
       }

This pops open a custom UI Page complete with an iFrame to a WordPress Site. I have additional code on the WordPress site that gives me a response back on the current URL This is all working right now.

Here is the UI Page code and where the confusion comes in.

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:evaluate jelly="true">
         var knowsub = new GlideRecord('u_pgiknow_submissions');
knowsub.initialize();
knowsub.u_linked_task_number = "da7fb758f00906406848033d96c6a670";
knowsub.u_original_searchâ€‰= "RANDOM WORDS";
knowsub.u_pgiknow_urlâ€‰= "https://www.xxx.com";
         knowsub.insert();
</g:evaluate>

<script>
function resetUrl() {
               var subSite= "https://www.xxx.com/search=";
               var site = subSite+location.hash.substring(1);
document.getElementById('ifrmChild').src = site;
}
</script>

<script>
function SendMessage() {
                                                               var win = document.getElementById("ifrmChild").contentWindow;
                                                               win.postMessage("hello", "*");
                               }
function ReceiveMessage(evt) {
               var searchMe = document.getElementById("origSearch");
               var theMagic = document.getElementById("origInc");
                               var getInc = getParmVal('sysparm_number');
                               var message = JSON.parse(evt.data);
                               var txt = document.getElementById("txtUrl");
               searchMe.value = location.hash.substring(1);
               theMagic.value = getInc;
               txt.value = message.URL;
                               window.close();
                               }
                               if (window.addEventListener) {
                                                               window.addEventListener("message", ReceiveMessage, false);
                               }
                               else {
                                                               window.attachEvent("onmessage", ReceiveMessage);
                               }
</script>

<g:ui_form>

<body onload="resetUrl();">
<div align="right" style="background-color: #007689; color:#FFFFFF;">
<input id="origInc" name="origInc" value="Not Set"/>
<input id="origSearch" name="origSearch" value="${sysparm_number}"/>
<input id="txtUrl" name="txtUrl" value="Not Set"/>

<button id="btnGetUrl" onclick='return SendMessage();'>ATTACH</button>
<button id="btnCopyUrl" onclick='resetUrl();'>RESET</button>
<p></p>
</div>

<iframe name="ifrmChild" id="ifrmChild" src="${site}" width="645" height="400"/>

</body>
</g:ui_form>
</j:jelly>

This sets the UI page with three inputs (eventually to be hidden) and two buttons. The first is to "Attach" and the second is to "Reset" the search.

By Default, I have the UI Page fields being populated with "Not Set"
"OnLoad", the Incident Number is being passed to the "origInc" field, and the original incident description is being passed to "origSearch" field.
Finally, after the "SendMessage" function is called, the "txtUrl" field is populated with the current URL of the iFrame.

Two issues I need help with:

What seems to be happening is when the UI page is loaded, it is immediately submitting the form to my custom table. This doesn't give the form any time to load "original search" and the "incident number" that is being placed in to the fields when the SendMessage function is called.
- I only want the UI page form to submit when I click "Attach". (This will call the SendMessage function and populate the URL in my txtUrl field.
I want to be able to submit the current VALUE of the 3 input fields when submitting the form (By clicking Attach).

I cannot seem to get the variables that pass to these fields to submit, and am sure I am just doing something wrong. I have searched everywhere and anywhere and have spent a couple weeks trying to get this to work. I am still new to the whole scripting thing, but have done OK so far, so hoping someone can point me in the right direction or have me try something new?

MANY THANKS IN ADVANCE!!

hyena · ‎06-29-2015

crickets...

ahaz86 · ‎06-29-2015

Ok so, you open a popup from the incident form right? do you use something like window.open?

jcote · ‎09-17-2015

Hi Paul,

First things first- there is a JavaScript syntax error with your client script, go to line 30.

You have an extra '}' bracket.

   //Add a UI macro to a non-reference field


     //Set the name of the field to place the icon in the 'field' variable


     var field = 'description';


     //Append the table name to get the field id


     field = g_form.tableName + '.' + field;


     try{


     //Create the image element and add to the field


     //Icons can be used or a custom image uploaded to images


     var img = document.createElement('img');


     img.src = 'images/help.gifx';


     img.alt='Search PGiKnow';


     img.title='Search PGiKnow';


//img.width='100'; //allows you to set up the width of the image


//img.height='100'; //allows you to set up the height of the image


     var link = document.createElement('a');


     if (navigator.appName == 'Microsoft Internet Explorer'){


           link.setAttribute('onclick', 'Function(SelectName())');


     }


     else{


           link.setAttribute('onclick','SelectName()');


     }


     link.name='full_view_button';


     link.id='full_view_button';


     link.appendChild(img);


     document.getElementById(field).parentNode.appendChild(link);


     }


     catch(e){


           //alert('Error');


     }


}   // THIS SHOULD NOT BE HERE PAUL


//onclick event to fire when the image is clicked


var popup;


       function SelectName() {


   var desc = g_form.getValue('current.description');


   var inc = g_form.getUniqueValue();


   //loads a UI page to allow for form submission


               popup = window.open("ui_page.do?sys_id=d517cc7034410200eccae9e892f3c05a" + "&sysparm_number=" + inc + "&sysparm_search=#" + desc, "PGiKnow Search", "width=675,height=530");


               popup.focus();


       }

First try removing that and then post your results.

Paul Scofield