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

Adrian_Paech

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 

Nicholas_Velich

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_Paech

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_hedrick

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_Paech

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_Paech

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

Regards,

Adrian

joivan_hedrick

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_Paech

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_hedrick

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_Paech

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_Paech

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!