[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

[tomashrobarik]

@James Freund  That reminds me another nice hack. You can actually keep the name of macro and just add a new query string to the angular procesor: e.g. using a timestamp or some global property that will change with every release might do the trick as well.

/angular.do?sysparm_type=get_partial&name={uimacro}&t={timestamp}
/angular.do?sysparm_type=get_partial&name={uimacro}&v={version}

It doesn't matter what query string you provide, but just make sure it is unique and it hasn't been used before. This will force to fetch the latest version of UI macro.

[James Freund]

Additionally just wanted to mention that getTemplateUrl points to the url:
/angular.do?sysparm_type=get_partial&name=<UI_MACRO_API_NAME_HERE>

The name parameter being the API Name of your macro you would like to pull your template from.

[Quang Nguyen1]

Hi James -

Thanks for this workaround. However, i'm unable to get this to work. getTemplateUrl() doesn't return anything on my end. Is this solution still applicable for you? 

function fcDataTable(spUtil,getTemplateUrl) {
    return {
        restrict: 'E',
        templateUrl: getTemplateUrl('x_509925_fc_core_FcDataTable'),

x_509925_fc_core_FcDataTable is my UI Macro.

Thanks!

[Tammy Simmons]

Hi all, I came across this post since I have the same issue trying to copy directives from a cloned widget. There were 3 directives I needed to copy and the above was a little more effort than I was hoping for. I ended up just trying to see if I could use the old 'insert' ui and it actually worked. Here is my solution for anyone needing this going forward:

1. From the original widget, under the 'Angular ng-template' related list, open the ng-template.

2. Do the following:

     a. Modify the ID name (I just appended a couple of letters to the end of the original name).

     b. In the widget reference field, select your new widget.

3. When finished, right click at the top of the form and select 'Insert' or 'Insert and Stay'.

The new template is saved to the new widget. Just be sure to go to the widget and replace the ng-template name to the name of your new ng-template.

[Community Alums]

Hi Tammy,

thanks for your feedback. As I understand, you created one template by Widget. I was rather trying to use a common template for several Widget.

Thanks

Chris