UI Page Form Submission Help

hyena
Mega Contributor

‎07-10-2015 11:04 AM

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?   I am also willing to try other methods, but need to keep the core functionality.


WHAT IS WORKING

From our incident form, I am calling a client script to PopUp the UI Page with Form and customized iFrame.

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="Not Set"/>

<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!!

0 Helpfuls
  • 3,529 Views
3 REPLIES 3

Mike Allen
Mega Sage

‎07-10-2015 11:11 AM

I had to this to get it not to submit:



function continueCancel(){



   //Close the dialog window



   GlideDialogWindow.get().destroy();



   return false;



}


This is in the client script of my UI Page.


0 Helpfuls

hyena
Mega Contributor
In response to Mike Allen

‎07-10-2015 11:15 AM

Thanks Mike, but neither of these work because of the Cross Domain iFrame I am using.   I need the iFrame to load and be searchable before "submitting" the form.



The object of this whole thing is to search an external WordPress site (where we have KB stored) and take the link of the article a user finds and "Attach" it to an incident.   Using a GlideDialog I am unable to get the UI page to load with the iFrame content.


0 Helpfuls