Service Portal - getElement

[Ken83]

Hello Community,

        I've been scouring the community to see if I could find some solid information to reference on this issue but I've come up empty on everything I have found and tried. I am wondering if anyone has found a way to get a DOM element on the Service Portal from a client script. Before switching to the Service Portal, we implemented some field formatting via an onLoad client script that utilized the g_form.getElement() method which is now deprecated(along with g_form.getFormElement). I am able to utilize the g_form.getControl() method but it does not contain the DOM element.

Here is a snippet of the method I am trying to use. It is in a global UI Script which has been loaded into my Service Portal via the Theme JS Includes...

function startPhoneNumberFormat(id){
var phoneNumberInput = g_form.getElement(id);
phoneNumberInput.addEventListener('input', function(event){
phoneNumberInput.value = formatPhoneNumber(this.value);
}, false);
phoneNumberInput.addEventListener('onChange', function(event){
phoneNumberInput.value = formatPhoneNumber(this.value);
}, false);
}

When I call the method from an onLoad client script, i get console errors saying that g_form is not defined.(This same error was mentioned in a different document i read). So, if I can't run this method, I'd settle for recreating the functionality locally for the catalog item but regardless of the approach, I need a way to identify and retrieve the DOM element. Any suggestions?

[Andrew Wortham]

Hey Ken,

With SP widgets you have full access to the HTML, CSS, and JS.  

If you need to do DOM manipulation, you can do it using good ol' standard JS.  

The most common way being "document.getElementById("ID_GOES_HERE").innerHTML = "Some Value";"

HTML DOM getElementById() Method

You can set the styles and whatnot as well.

If you need to implement an on change function, you can use ng-change etc... You are definitely going to have to change some of the client scripts, there is good documentation on what is supported in SP and what is not, but I don't have it handy.

Best,

Andrew

[Ken83]

I guess I'll have to do some digging for that documentation because i attempted standard JS using document.getElementById() but it threw 'cannot find getElementById() of null'. Then I tried just logging document, and it said document is not defined. This is from the context of an onLoad client script on table in the Service Portal.

[Andrew Wortham]

Hey Ken,

Yes look into HTML / JS documentation.

In order for getElementById() to work you would have to assign an ID to the HTML element you are trying to work with.   Notice in the documentation:

HTML

<p id="demo">Click the button to change the text in this paragraph.</p>

JS:

document.getElementById("demo").innerHTML = "Hello World";

The ID of the HTML has to be set by you, you can also get elements by class name, but ID should be unique to a single HTML element so will prevent confusion.

Does that help?

Best,

Andrew

[Andrew Wortham]

O I see to do it this way you have to do it directly in the widget.   It will not work from an onload client script.   I do not know of a way to do it from a client script that is not the client script of a widget...