SharePoint User defined Unique ID/Name for a Web Part.

[swensonic]

I would like the ability to give each web part a unique id or name so that I can easily access the elements for css and Javascript. For instance, I have 3 different "Quick Links" web parts on a page, Id like to apply different CSS to each "Quick Links" web part.

Is there such a Web Part that can accomplish this? 

[#2]

@swensonic this is not possible out-of-the-box. Maybe with SPFx....

Rob
Los Gallardos
Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)

[#3]

Thanks for the quick response. I figured it would be SPFx but just wondered if someone could point me in the right direction of any custom SPFx solutions.

[#4]

@swensonic I don't have access to SPFx so you'll need to speak to @ganeshsanap who has the knowledge about this.

Rob
Los Gallardos
Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)

[#5]

Hi @swensonic,

the correct way in this case would be to create your own Quicklinks webpart using SPFX.

There you have control over your own HTML and CSS. (The implementation of the default Quicklinks webpart might change at any time).
You then can apply different configurations to your different webpart instances.

Take a look at this project i found on github
https://github.com/clarktozer/spfx-quicklinks 
That should give you a good starting point.

Best Regards,
Sven

[#6]

Hi @swensonic,

or alternatively:
Create a list with a "Title" and "Url" Column (and perhaps an Icon column) and format the view to look like Quicklinks (See this sample here: https://github.com/pnp/list-formatting/tree/master/view-samples/icon-link-tiles). 
Now you have full control over the resulting HTML and CSS.

Then use the List View webpart instead of the Quicklinks webparts to show different views of your list formatted by that JSON formatting.

Best Regards,
Sven

[#7]

@swensonic If you want to build custom quick links web part using SPFx as suggested by @SvenSieverding, check below SPFx web part samples as well:

1. Links web part 
2. Custom Links 

---

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.