Home Analyst Portal

custom.js, Unable to Implement EventHandling on "RelatedUserInfo.js" ??

Adrian_PaechAdrian_Paech Customer Advanced IT Monkey ✭✭✭

Hi,

We have a requirement to enable analysts to edit user details on the "RelatedUserInfo.js" template.
I was going to work towards adding a button on the form, and then writing some event handling on the button to write the changes back to the SCSM database.
For some reason, no matter what I do, I cannot seem to get any event handling working on the RelatedUserInfo template.

In "custom.js" When using the following function...

      "app.custom.formTasks.add('<template name>', null, function (formObj, viewModel) {

Where <template name> is the name of the template, I have tried...

  1. "user"
  2. "userRelatedInfo"
  3. "relatedUserInfo"

... but nothing seems to work.

Here is a full example of my test code:

app.custom.formTasks.add('User', null, function (formObj, viewModel) {
 formObj.boundReady(function(){
   alert("hi");
 });
 return;
});

Any help with this would be much appreciated!

Regards,
Adrian 

Comments

  • Nicholas_VelichNicholas_Velich Cireson Consultant Ninja IT Monkey ✭✭✭✭
    Hi Adrian,

    At this time, it is only possible to work in the custom tasks section for:
    • Incident
    • ServiceRequest
    • ChangeRequest
    • Problem
    • ReleaseRecord
    That being said, the custom.js file does load on every page of the Portal. This means you could put your code directly in the custom.js file, but I wouldn't recommend it. If you must work outside of the five areas noted above, the following code would at least narrow down the page before execution:

    var url = window.location.href
    if(url.indexOf("/user/UserRelatedInfoById/") > -1){
            // Code goes here
    }

    This code is essentially verifying that the URL of the current page is for the RelatedUserInfo page before executing.

    Thanks,
    Nick
  • Adrian_PaechAdrian_Paech Customer Advanced IT Monkey ✭✭✭

    Hi Nick,

    Thanks for that.. But this only loads when the form loads.

    If I add a button in the form, or change some text in one of the fields on the form, how do I execute code as a result of that event?

    I tried adding the following code in custom.js:

    viewModel.set("UpdateUserDetails", function() {
     alert("test");
    });

    Yet the button that executes the action "UpdateUserDetails" never triggers this code?

    What am I missing here?

    Regards,

    Adrian

  • joivan_hedrickjoivan_hedrick Cireson Consultant Advanced IT Monkey ✭✭✭
    You're looking to add an event but only after the form loads? You'll have to use something that waits until the element exists. This can either be a setTimeout, MutationObserver, or other. The example below uses a MutationObserver. Is this what you are looking for?

    $(document).ready(function(){
        //Only load on user information pages.
        if (document.URL.indexOf("user/UserRelatedInfoById/") === -1) { 
            return; 
        }
        
        //The form doesn't load immediately. So wait for it to laod before we create any events.
        var mainPageNode = document.getElementById('main_wrapper');
        
        // create an observer instance
        var observer = new MutationObserver(function(mutations) {
            //The page changed. See if our element exists.
            var pageTitle = $(".page_title");
            if (pageTitle.length > 0) { //Our element now exists. Add the event.
                //Create the viewModel event to execute our code.
                pageForm.viewModel.set("UpdateUserDetails", function() {
                    //event code goes here
                    alert("test");
                });
                
                //Create a click event on the page title, or button. 
                pageTitle.click(function() {
                  pageForm.viewModel.UpdateUserDetails();
                });
                
                observer.disconnect();
            }
        });
         
        // configure the observer. For our purposes, subtree is required.
        var observerConfig = { attributes: true, childList: true, subtree: true, characterData: true };
         
        // pass in the node, and our mutationobserver options.
        observer.observe(mainPageNode, observerConfig);
    });


  • Adrian_PaechAdrian_Paech Customer Advanced IT Monkey ✭✭✭

    wow thanks Joivan.

    It "almost" worked, except I got a debug code error in IE: "unknown method 'apply'" when I clicked on button..

    Have I missing something?

    Does the same code work for you?

    Regards,

    Adrian

  • Adrian_PaechAdrian_Paech Customer Advanced IT Monkey ✭✭✭

    More specifically I get "Object doesn't support property or method 'apply'" in 'jquery.min.js'

    Regards,

    Adrian

  • joivan_hedrickjoivan_hedrick Cireson Consultant Advanced IT Monkey ✭✭✭
    I'm not seeing this issue with the code from above. My example doesn't use a button - can you post your code that you are using? 
  • Adrian_PaechAdrian_Paech Customer Advanced IT Monkey ✭✭✭

    I just tested by clicking on the title.. and it worked perfectly!

    However, When clicking on the button, I get the error above.

    I essentially copied and pasted your code as it is. (no change).

    And in "RelatedUserInfo.js" I have added the following line to include a clickable button.

    { DataType: "Button", PropertyDisplayName: "Update User Details", ButtonType: "Default", Action: "UpdateUserDetails" },

    Any ideas?

    Regards,

    Adrian

  • joivan_hedrickjoivan_hedrick Cireson Consultant Advanced IT Monkey ✭✭✭
    Ahh, that's a timing issue. The function has to exist after the viewModel exists, but before the form exists. Fortunately, the viewModel exists while we're in our (document).ready() call. So we can add a new function immediately, even if the form isn't ready yet. Below, I added the function to the viewModel after calling the Mutationobserver instance. 

    $(document).ready(function(){
        //Only load on user information pages.
        if (document.URL.indexOf("user/UserRelatedInfoById/") === -1) { 
            return; 
        }
        
        //The form doesn't load immediately. So wait for it to laod before we create any events.
        var mainPageNode = document.getElementById('main_wrapper');
        
        // create an observer instance
        var observer = new MutationObserver(function(mutations) {
            //The page changed. See if our element exists.
            var pageTitle = $(".page_title");
            if (pageTitle.length > 0) { //Our element now exists. Add the event.
                
                //Create a click event on the page title, or button. 
                pageTitle.click(function() {
                  pageForm.viewModel.UpdateUserDetails();
                });
                
                observer.disconnect();
            }
        });
         
        // configure the observer. For our purposes, subtree is required.
        var observerConfig = { attributes: true, childList: true, subtree: true, characterData: true };
         
        // pass in the node, and our mutationobserver options.
        observer.observe(mainPageNode, observerConfig);
        
        //the viewModel exists when document.ready is called. e.g. right now. So add our viewModel's function right now.
        //Create the viewModel event to execute our code.
        pageForm.viewModel.set("UpdateUserDetails", function() {
            //event code goes here
            alert("test");
        });
    });
    

  • Adrian_PaechAdrian_Paech Customer Advanced IT Monkey ✭✭✭

    Nice!

    That worked perfectly!

    Thanks so much for your help... much appreciated.

    Also, one last question (which I also posted here https://community.cireson.com/discussion/455/custom-js-problems-working-with-userpicker-fields-objects-e-g-requestedworkitem#latest)

    Is there a way I can "update" user properties via the REST API, or is this not currently possible?
    By looking at the controller.js, I figured out how to retrieve user properties:

    $.get(("/Search/GetObjectPropertiesByProjection?projectionId=490ab845-b14c-1d91-c39f-bb9e8a350933&id=<userGUID>"), function (data) { alert(data[0].FirstName); });

    But I cant seem to find a way to update them again back in SCSM??

    Any thoughts?

    Regards,
    Adrian

  • Adrian_PaechAdrian_Paech Customer Advanced IT Monkey ✭✭✭

    Got it working (pushing user details back to SCSM) with "/api/V3/Projection/Commit" (yay). :)

    Just doing the final touches now. Once I have finished I will post up the solution for other people to use if they wish.

    Thanks for everyone's help!

Sign In or Register to comment.