Sp-dev-fx-webparts: Using Jquery in Angular SPFX WebPart

[sprider]

Category

• [ ] Question

Desired Behavior

_Could you please explain how to use JQuery in Classic Angular migrated SharePoint Framework WebPart?_

Thank you.

[waldekmastykarz]

Could you explain a bit more what you would like to use jQuery for?

[sprider]

I have to migrate few JQuery webparts to Angular SPFX client side webparts. The legacy webparts uses JQuery and JQuery UI functions which i need to convert Angular or i should continue use the JQuery in SPFX webparts. I have to add all these in the angular controller.

Example JQuery actions

• closest
• find
• each
• parent().addClass
• append, etc.,
• fadeIn("slow")

[waldekmastykarz]

Ideally when using Angular you wouldn't manipulate DOM outside of Angular. Instead you would build directives or components that manage their DOM using Angular's APIs.
If you have jQuery web parts why not just keep using jQuery with SPFx?

My recommendation would be either to stick with jQuery in SPFx or migrate to Angular using directives or components.

[sprider]

Thank you Waldek. Let me try this and keep you posted.

[sprider]

Hi Waldek,

I tried to add my classic custom JavaScript file (from our cdn) in SPFX webpart via config.json but i am unable to call the functions written inside custom js inside the render method.

Do you have any examples for this scenario?

[waldekmastykarz]

This article might be helpful: https://blog.mastykarz.nl/migrate-sharepoint-javascript-customizations-sharepoint-framework-reference-functions/

[sprider]

Thank you Waldek.
This is what i am trying to achieve in SPFX. Please let me know if you have any better idea.

https://blog.sprider.org/2016/11/22/webparts-in-tabs-accordions-where-tabs-act-as-accordions-in-lower-resolutions/

[waldekmastykarz]

This solution is based on manipulating the DOM outside of the web part. SharePoint Framework discourages this approach as it's error-prone with future updates to SharePoint: if the way web parts are rendered on the canvas would change, your solution would break.

While it would be okay to render tabs inside your web part, rendering all web parts on the canvas as tabs is something you should avoid to ensure that your web parts work as intended across all platforms and devices.

[sprider]

Yes, it is something similar to the custom actions(JS Injection) we used to write based on some IDs.

Let me think about a different solution in this case. Thank you Waldek for your valuable feedback.

Please close this item.

[Danny-Engelman]

You linked to a SharePoint blog using jQuery/HillBilly Tabs

But if you have React, and understand Tabs are different States,
then you don't need any dependencies

Plenty of React-Tabs examples around:
https://reactcommunity.org/react-tabs/example/
is a good starter

http://blog.ricardofilipe.com/post/react-tabs-component
takes is further

Note: depending on your requirements you can also do Tabs with CSS only: https://kyusuf.com/post/completely-css-tabs

With CSS Media Queries you then set the Accordion-on-smaller-screen beaviour

[sprider]

Hi Danny,

Thank you for your inputs.

I guess the point what Waldek making here is "Don't rely on any SharePoint Div IDs" as it will change in future".