[Service Portal] How to use one ng-template in multiple widgets ?

[Community Alums]

Hi guys,

I'm trying to use the same ng-template in multiple widgets. Here is my method with no Angular ng-template dependency : 

sp_ng_template record (with the Widget field empty)

Widget

<div>

  <ul>
    <li ng-repeat="contact in c.data.myContactList" ng-include="'csaTemplateExample.html'">
    </li>
  </ul>

</div>

The ng-include doesn't work if I don't create a dependency between the template and a widget. If I put the Widget name, my ng-include is displayed but therefore, my template is linked to that Widget.

So, how can you use the template with many widgets ?

Thanks in advance

Christophe

[Gurpreet07]

That's not possible.. The relationship is one to one. They should have created m2m list for this.

[Dan Conroy · Accepted solution]

It is a one-to-one relationship, but there are some options:

• Include the template in the header or footer widget and then it will be available to other widgets as it is cached. Downside is you might be loading it when you don't need it.
• Use the $templateCache service and cache your own template. You can create a new service, and store the template there, and publish it to the cache.

[janlarsen]

In order to reduce widget cloning I have been exploring how to make widgets more configurable from the instance (options) level. The goal is to fetch pre-made code snippets from instance options.

At this point the bottle points at:

1. ng-templates
2. Angular Providers

According to my tests both methods suffer from the fact, that they have to be related to the relevant widget prior to execution. This is less than optimal - and not very flexible IMO.

Then this post turns up reveiling, that ng-templates - unlike providers - may be collected behind the scenes in $templateCache and referenced from there.

But how do you do that exactly, @Dan Conroy (and others, please)?

The addition below to my widget client script doesn't work, even though `c.widget.ngTemplates` replicates precisely the content from `widget.ngTemplates`, when both ng-templates have been related to the widget.

c.widget.ngTemplates = {"task-category4": "<span> -  - </span>", "task-category2": "<span>2: et-eller-andet</span>"};
    
$templateCache.put('tngTemplates', c.widget.ngTemplates);
    
$templateCache.get('tngTemplates');

This page on $templateCache from Angularjs.org provides some clues, but how do you translate those into a SN-widget syntax?

[janlarsen]

Got it.

The method `$templateCache.put` doesn't populate the entire `$templateCache`-object. It populates the object one property at a time.

More reading.

This client script fetches multiple ng-templates like a charm - without any related templates at all:

    c.widget.ngTemplates = JSON.parse(c.data.ngTemplatesString);
    
    for (var thisTemplate in c.widget.ngTemplates) {
        $templateCache.put(thisTemplate, c.widget.ngTemplates[thisTemplate]);
}