PowerSchool: Add Slide In Page for Custom Contact

Credit goes out to Sheldon from PSUG

Page fragment to add the button:

<script>

  jQuery(document).ready(function() {

    var url_string = window.location.href;

    console.log(url_string);

    var pStart = url_string.indexOf("contactid=", url_string.indexOf("#?")) + 10;

    var pEnd = url_string.indexOf("&", pStart);

    var contactID = 0;

    if (pEnd > 0)

      contactID = url_string.substring(pStart, pEnd);

    else

      contactID = url_string.substring(pStart);

    console.log(contactID);

    if (contactID != 0) {

      var html = '<div id="extensionfields-div"><label for="extensionfields-input">Extension Fields</label><a href="edit_extensionfields.html?id='+contactID+'" class="button dialogC dockedDialog" id="extensionfields-input" title="Extension Fields">Display</a></div>';

      jQuery("#suffix-div").after(html);

    }

  });

</script>

It looks like this:

The slide out page that has the input boxes (edit_extensionfields.html):

<script>

var existing = false;



jQuery.getJSON("edit_extensionfields.json?id=~(gpv.id)", function(data) {

  if (data.length > 1) {

    jQuery("#myfield1").val(data[0].myfield1);

    jQuery("#myfield2").val(data[0].myfield2);

    jQuery("#lastupdate").html(data[0].lastupdate);

    existing = true;

  }

});



function submitSave() {

  if (!existing) {

    jQuery.ajax({

      url: "/ws/schema/table/u_def_ext_person",

      async: false,

      method: "POST",

      contentType: "application/json",

      data: JSON.stringify({

        "tables":{

          "u_def_ext_person":{

            "personid":"~(gpv.id)",

            "myfield1":jQuery("#myfield1").val(),

            "myfield2":jQuery("#myfield2").val()

          }

        }

      }),

      complete: function(xhr, textStatus) {

        if (xhr.status == 200) {

          jQuery("#save-error").hide();

          jQuery("#save-complete").show();

        } else {

          jQuery("#save-complete").hide();

          jQuery("#save-error").show();

        }

      },

      error: function(result) {

        jQuery("#save-complete").hide();

        jQuery("#save-error").show();

      }

    });



  } else {

    jQuery.ajax({

      url: "/ws/schema/table/u_def_ext_person/~(gpv.id)",

      async: false,

      method: "PUT",

      contentType: "application/json",

      data: JSON.stringify({

        "tables":{

          "u_def_ext_person":{

            "myfield1":jQuery("#myfield1").val(),

            "myfield2":jQuery("#myfield2").val()

          }

        }

      }),

      complete: function(xhr, textStatus) {

        if (xhr.status == 200) {

          jQuery("#save-error").hide();

          jQuery("#save-complete").show();

        } else {

          jQuery("#save-complete").hide();

          jQuery("#save-error").show();

        }

      },

      error: function(result) {

        jQuery("#save-complete").hide();

        jQuery("#save-error").show();

      }

    });

  }



}

</script>



<div class="feedback-confirm" id="save-complete" style="display:none;">Record saved</div>

<div class="feedback-error" id="save-error" style="display:none;">There was a problem saving the record, please try again later</div>



<div class="box-round">

  <form action="edit.html" method="POST" id="saveForm">

  <table class="linkDescList">

    <tr>

      <td class="bold" style="width:180px;">My field 1</td>

      <td>

        <input type="text" name="myfield1" id="myfield1" value="">

      </td>

    </tr>

    <tr>

      <td class="bold">My field 2</td>

      <td>

        <input type="text" name="myfield2" id="myfield2" value="">

      </td>

    </tr>

    <tr>

      <td class="bold">Last Updated</td>

      <td>

        <span id="lastupdate"></span>

      </td>

    </tr>

  </table>

  </form>

</div>

<div class="button-row">

  <button type="button" onclick="submitSave()">Save</button>

</div>

Looks like this:

There's also a JSON (edit_extensionfields.json) that gets the existing values into slide in page:

[

~[tlist_sql;

select

myfield1,

myfield2,

nvl(whenmodified,whencreated) as lastupdate



from u_def_ext_person

where

personid = '~(gpv.id)'

;]

  {

    "myfield1":"~(myfield1;json)",

    "myfield2":"~(myfield2;json)",

    "lastupdate":"~(lastupdate;json)"

  },

[/tlist_sql]

  {}

]

And lastly, you'll need to install a plugin that gives permission to the slide in page to make the insert and update API calls (attached).  You'll need to edit the files inside to include your extension tables/fields.

Download: Contact Extension Plugin