SOLVED

How To: Add unique ID to div

%3CLINGO-SUB%20id%3D%22lingo-sub-357237%22%20slang%3D%22en-US%22%3EHow%20To%3A%20Add%20unique%20ID%20to%20div%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-357237%22%20slang%3D%22en-US%22%3E%3CP%3EI%20am%20creating%20my%20first%20simple%20web%20part%20that%20will%20modify%20a%20div.%20I%20want%20to%20find%20the%20div%20by%20giving%20it%20a%20unique%20ID.%20As%20it%20is%20possible%20for%20a%20user%20to%20put%20more%20than%20one%20of%20my%20web%20part%20on%20a%20single%20page%2C%20how%20do%20I%20make%20the%20div's%20ID%20unique%20to%20each%20web%20part%20instance%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20creating%20the%20web%20part%20using%20the%20SharePoint%20Framework%20using%20the%20tutorials%20found%20at%3A%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fwww.youtube.com%2Fchannel%2FUC_mKdhw-V6CeCM7gTo_Iy7w%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fwww.youtube.com%2Fchannel%2FUC_mKdhw-V6CeCM7gTo_Iy7w%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-357237%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EPnP%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EWeb%20Parts%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-357269%22%20slang%3D%22en-US%22%3ERe%3A%20How%20To%3A%20Add%20unique%20ID%20to%20div%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-357269%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%20for%20your%20help.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESide%20note%3A%3CBR%20%2F%3EI%20didn't%20need%20the%20import%20line%20as%20the%20Yeoman%20scaffolding%20already%20included%20it%20for%20me%20(something%20I%20never%20noticed%20before)%20with%20this%20line%20of%20code%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CBLOCKQUOTE%3E%3CP%3Eimport%20%7B%20Version%2C%20Guid%20%7D%20from%20'%40microsoft%2Fsp-core-library'%3B%3C%2FP%3E%3C%2FBLOCKQUOTE%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-357254%22%20slang%3D%22en-US%22%3ERe%3A%20How%20To%3A%20Add%20unique%20ID%20to%20div%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-357254%22%20slang%3D%22en-US%22%3E%3CP%3EI%20failed%20to%20mention%20that%20I%20am%20using%20the%20SharePoint%20Framework%20with%20Visual%20Studio%20Code.%20I%20modified%20the%20original%20post%20to%20try%20and%20clarify%20my%20question.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-357243%22%20slang%3D%22en-US%22%3ERe%3A%20How%20To%3A%20Add%20unique%20ID%20to%20div%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-357243%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F288947%22%20target%3D%22_blank%22%3E%40smithme%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3Esure%20you%20can%20create%20and%20assign%20a%20Guid%26nbsp%3B%3C%2FP%3E%3CBLOCKQUOTE%3E%3CP%3Evar%20guid%3A%20Guid%20%3D%20Guid.newGuid()%3B%3C%2FP%3E%3C%2FBLOCKQUOTE%3E%3CP%3Eimporting%3C%2FP%3E%3CBLOCKQUOTE%3E%3CP%3Eimport%20%7B%20Guid%20%7D%20from%20'%40microsoft%2Fsp-client-base'%3B%3C%2FP%3E%3C%2FBLOCKQUOTE%3E%3CP%3ECheers%2C%3C%2FP%3E%3CP%3EFederico%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

I am creating my first simple web part that will modify a div. I want to find the div by giving it a unique ID. As it is possible for a user to put more than one of my web part on a single page, how do I make the div's ID unique to each web part instance?

 

I am creating the web part using the SharePoint Framework using the tutorials found at:

https://www.youtube.com/channel/UC_mKdhw-V6CeCM7gTo_Iy7w

 

3 Replies
Highlighted
Solution

Hi @smithme 

sure you can create and assign a Guid 

var guid: Guid = Guid.newGuid();

importing

import { Guid } from '@microsoft/sp-client-base';

Cheers,

Federico

Highlighted

I failed to mention that I am using the SharePoint Framework with Visual Studio Code. I modified the original post to try and clarify my question.

Highlighted

Thanks for your help.

 

Side note:
I didn't need the import line as the Yeoman scaffolding already included it for me (something I never noticed before) with this line of code:

 

import { Version, Guid } from '@microsoft/sp-core-library';