Cloning a widget with Angular ng templates, what is the best practice/ recommended way of doing so?

[Chandler2]

I have cloned a widget which has couple of Angular ng templates associated with it. Now, when I replace the OOTB widget with my cloned one (wihtout Angular ng templates), it doesn't work. So, I removed the Angular ng templates from the OOTB widget and associate it with my cloned widget. Doing this makes the cloned widget work just fine.

But, I want to know if this is the way to do it or is there a better recommended way?

Also, removing Angular ng templates from the OOTB will be considered a change in the widget?

[Michael Jones -]

Technically I don't think what you did would register as a change to the widget itself, but would show as a change to the templates (which would potentially mean any updates to those templates would not be automatically applied at upgrade).

Generally speaking, I try to leave everything the way I found it when dealing with anything out of the box. For widgets with templates (like the Cart widget) I recommend creating your clone and then opening each template on the original widget, changing the widget field and then using insert and stay to clone them as well.

That has been a successful path forward for me in the past.   

I hope this helps!

If this was helpful, or correct, please be kind and mark the answer appropriately.

Michael Jones - Proud member of the GlideFast Consulting Team!

[Chandler2]

Hi Michael,

So clone (insert and stay) each of those ng template and then use the clone ones with the cloned widget, correct?

Now, I did think of this but then I have another question,

I see that the HTML of the widget has ID of some of the ng template but don't have for all of them.

So what to do in that case?

The IDs that I find should be replaced with the new IDs of the cloned (insert and stay) ng template and for the ones no ID found in HTML should be fine?

[Michael Jones - · Accepted solution]

Yes, use the cloned templates for your new copy of the widget. 

If the HTML contains hard-coded values for a template, then also yes; update the values to match the ID of your copy of the template. 

You may also need to setup instance options when you add your widget to a page; you might see something like this in the HTML: 

<div ng-include="options.cartTemplate"></div>

That would mean on the instance of widget on the portal page you would click the pencil and set the template to use in the options. 

Occasionally I've seen similar use-cases where value is set to the ID of the template in the server-script as well

So, if you have templates associated to the widget, but don't see where the ID is included in the HTML you might need to check the Options and the Server Script to see where you might need to replace things. 

I hope this helps!

If this was helpful, or correct, please be kind and mark the answer appropriately.

Michael Jones - Proud member of the GlideFast Consulting Team!