How to pass logged in user ID & name details to HTML script tag in service portal widget

Venkatesh43
Tera Contributor

Hi Experts,

 

I have requirement to pass current logged in user Id and name values to HTML script tag. Please find the below code snippet for you reference

 

HTML Script:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" charset="utf-8">

let userId = {{data.userId}}
  console.log("user ID " + userId)
  let user_customAttributes ={
      "snowusername": userId,
      "context.firstName": {{data.firstName}},
      "context.lastName": {{data.lastName}},
      userRequestedforAgent: "No",
      
  }

</script>

</head>

</html>

 

Server side script:

 

data.firstName = gs.getUser().getFirstName();
data.lastName = gs.getUser().getLastName();
data.userId = gs.getUserName();
 
The value was not passed to html and I see below error message in the console logs.
 
SyntaxError: Unexpected token '{'
at eval (<anonymous>)
at Function.globalEval (
2 REPLIES 2

-O-
Kilo Patron
Kilo Patron

When writing widgets (or AngularJS for that matter) the paradigm dictates that the HTML will not contain scripts - it kinda' defeats the purpose.

The HTML is supposed to be a sort of template, the data should be in the scope (this is handled behind the scenes in widgets - the automatic availability of object data in scopes) and AngularJS would take care of linking the two.

Client controller script is where any scripting that influences the scope and its data would be written.

That said, the problem with your HTML is that any JavaScript within a script tag must still be valid JavaScript and let userId = {{data.userId}} is clearly not valid JavaScript.
Mostly wherever you see {{...}} within that script tag, the JavaScript is not valid.

E.g. if you would want to display the information on the data object in your example, all you would have to write is:

<div>
  <p>First name: {{data.firstName}}</p>
  <p>Last name: {{data.lastName}}</p>
  <p>User ID: {{data.userId}}</p>
</div>

Because, remember, ServiceNow takes care of automatically making data be available in the widget's scope.

At the same time note that your Body HTML template will be part of an already existing page, so you must not add the DOCTYPE declaration and all the html, head, and meta tags.
Note that the field isn't even called HTML, but HTML template.
That is not by accident, it is because it really is not the whole HTML, but the template for a small part of the final portal page's HTML.

-O-
Kilo Patron
Kilo Patron

Also in this particular case you don't need to load the current user information, it is already there in widgets in the scope's user property.
So in this case your server script could be empty and the HTML template could be:

<div>
  <p>First name: {{c.user.first_name}}</p>
  <p>Last name: {{c.user.last_name}}</p>
  <p>User ID: {{c.user.user_name}}</p>
</div>