Need help with Portal widget

[Rajini2]

I have a widget that partly works. This widget is embedded in my index page.

When you click this icon, it should take you to the incident record producer. - First time it works fine.

Now, go to back to index page or some other form & come back to index page. - It is not working anymore. It does not take me to the incident record producer.

If I have to see this working, I have to refresh the index page. Anyone know how to fix this?

Enclosing the sp_widget xml. It should be embedded in index page.

Thanks

[nataliya_b]

I tried your widget and it is working for me. Could be browser issue.

Maybe you could try to hard code record producer link like below: (html) and have nothing in client script and link

<div id="flyout-menu" class="flyout-menu">

<div id="flyout-incident-button" class="flyout-incident">
<a ng-href="?id=sc_cat_item&sys_id=3f1dd0320a0a0b99000a53f7604a2ef9&sysparm_category=e15706fc0a0a0aa7007fc21e1ab70c2f">
<img src="sp-flyout-create-incident-off.jpg" class="flyout-incident-image"/>
<div class="flyout-incident-overlay">
<img src="sp-flyout-create-incident-on.jpg" width="155" height="60"/>
</div>
</a>
</div>

</div>

[Aravind2799 · Accepted solution]

Hey @Rajini2 

The issue with your widget seems to be related to how the click event handler is attached to the button element. Here's why it might not be working after the first click:

1. Event handler attachment: In your current code, the $(document).ready function ensures the click event handler is attached only when the page first loads. Subsequent navigations within the same page won't trigger this function again.

Here's how to fix it:

Option 1: Using jQuery's .on method:

Instead of relying on $(document).ready, use the .on method to attach the click event handler dynamically. This allows attaching the handler even after the initial page load.

Update your link function like this:

<link><![CDATA[function link(scope, element, attrs, controller) { 
  $(element).on("click", "#flyout-incident-button", function() {
    window.location = "?id=sc_cat_item&sys_id=3f1dd0320a0a0b99000a53f7604a2ef9&sysparm_category=e15706fc0a0a0aa7007fc21e1ab70c2f";
  });
}]]></link>

Option 2: Using ServiceNow UI API (recommended):

ServiceNow offers a more robust way to handle UI interactions through the UI API. This eliminates reliance on jQuery and ensures better compatibility across different UI frameworks.

Here's a basic example using the UI API:

<link><![CDATA[function link(scope, element, attrs, controller) { 
  var flyoutIncidentButton = element.querySelector("#flyout-incident-button");
  flyoutIncidentButton.addEventListener("click", function() {
    window.location = "?id=sc_cat_item&sys_id=3f1dd0320a0a0b99000a53f7604a2ef9&sysparm_category=e15706fc0a0a0aa7007fc21e1ab70c2f";
  });
}]]></link>

This approach uses addEventListener to attach the click event handler directly to the button element within the widget.

Remember to choose the option that best suits your development environment and familiarity with ServiceNow APIs. Both options should address the issue of the click event not working after the first click on the widget.

Thanks

Aravind Panchanathan

[Rajini2]

Thank you Aravind. The addEventListener did not work in my script. But the first option did work and I implemented that. It is working fine.