I’m working with ServiceNow angular.js portal widgets and in order to avoid cloning widgets I instead make my own and embed their widget into mine. And then I do all sorts of stuff to manipulate the embedded widget data.

Including altering the HTMl template of the embedded widget.
However, it seems like it stores it in cache, cause if I navigate to another page where the same widget is used as the one I embedded in the first one, the alterned HTML template is rendered. If I refresh it’s back to normal again.

What could be going on here?

My Server Script is simple:

data.widget = $sp.getWidget('relevant_for_you', options);

And the client script is something like this:

let widgetsData = c.data.widget.data.widgetsData;

widgetsData.forEach(item => {
    
    // Proceed with cloning and modifying the template
    let thisWidgetTemplate = item.data.widgetData.template.slice(0);

    // Create a temp jQuery object from the HTML string
    let $tempDiv = $('<div>').html(thisWidgetTemplate);

    // Find the element with the class card-image-container
    let $contentContainer = $tempDiv.find('.content-card-container');

    if ($contentContainer.length > 0) {
        // Create a temporary element
        let $newElement = $('<div>', {
            class: 'arrow-container',
            text: item.data.widgetData.orderMessage
        });

        // Append the new element to the content container
        $contentContainer.append($newElement);

        // Update the template with the modified HTML
        thisWidgetTemplate = $tempDiv.html();

        // Ensure the template is only injected into the intended widget
        item.data.widgetData.template = thisWidgetTemplate;
    } 

});

What’s weird though is that if I console.log the HTML template in the other widget on the other page, the arrow-container element isn’t part of the template. So it’s almost as if it’s living specifically in cache or something.

The HTML template of my widget is pretty simple and straightforward

 <div class="{{c.options.sp_column}}">
    <div ng-class="{'negative-margin': options.negative_top_margin === 'true' && c.location.indexOf('$spd.do') === -1}">
      <sp-widget widget="data.widget"></sp-widget>
    </div>
 </div>