How to add HTML to sharePoint online

%3CLINGO-SUB%20id%3D%22lingo-sub-692005%22%20slang%3D%22en-US%22%3EHow%20to%20add%20HTML%20to%20sharePoint%20online%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-692005%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ehow%20do%20i%20add%20HTML%20code%20and%20JavaScript%20to%20SharePoint%20online%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-696140%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20add%20HTML%20to%20sharePoint%20online%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-696140%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F360267%22%20target%3D%22_blank%22%3E%40Molete%3C%2FA%3E%26nbsp%3Bdepending%20on%20what%20you're%20trying%20to%20achieve%20they%20may%20be%20several%20options.%20I%20strongly%20advice%20you%20to%20go%20through%20SharePoint%20development%20overview%20documentation%20to%20get%20a%20better%20picture%20of%20what%20is%20possible%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fgeneral-development%2Fsharepoint-development-overview%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fgeneral-development%2Fsharepoint-development-overview%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-696349%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20add%20HTML%20to%20sharePoint%20online%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-696349%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F360267%22%20target%3D%22_blank%22%3E%40Molete%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESeems%20difficult%20and%20didn't%20work%20with%20the%20suggested%20ways.%20But%20somewhere%2C%20I%20found%20a%20solution%20which%20worked%20very%20well%3A%20Upload%20all%20the%20files%20and%20folders%20used%20in%20the%20html%20site%20to%20a%20SP%20library%2C%20keeping%20the%20same%20structure.%26nbsp%3BOpen%20the%20startpage%20in%20an%20editor%20%26gt%3B%26nbsp%3Bsave%20it%20as%26nbsp%3B%3CSTRONG%3E.%3C%2FSTRONG%3Easpx%20file%20%26gt%3B%20upload%20this%20.aspx%20to%20the%20SP%20library%20in%20the%20folder%20where%20you%20have%20the%20.html%20file.%20The%20.aspx%20can%20be%20opened%26nbsp%3Bfrom%20SP%20and%20the%20links%20will%20be%20ok.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-696412%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20add%20HTML%20to%20sharePoint%20online%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-696412%22%20slang%3D%22en-US%22%3E%3CBLOCKQUOTE%3E%3CHR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F241707%22%20target%3D%22_blank%22%3E%40Thomas%20Berman%3C%2FA%3E%26nbsp%3Bwrote%3A%3CBR%20%2F%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F360267%22%20target%3D%22_blank%22%3E%40Molete%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIf%20you're%20on%20classic%20pages%2C%20you%20can%20add%20a%20Content%20Editor%20Web%20Part%20which%20points%20to%20your%20HTML%20file%2C%20which%20in%20turn%20loads%20your%20JavaScript%20files.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EOn%20modern%20pages%2C%20you%20can%3A%3C%2FP%3E%0A%3CP%3E-%20Create%20an%20SPFx%20web%20part%20that%20does%20what%20you%20need%3C%2FP%3E%0A%3CP%3E-%20Create%20an%20SPFx%20full%20page%20application%3C%2FP%3E%0A%3CP%3E-%20Use%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F34%22%20target%3D%22_blank%22%3E%40Mikael%20Svenson%3C%2FA%3E's%26nbsp%3BSPFx%20Script%20Editor%20web%20part%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-script-editor%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-script-editor%3C%2FA%3E%3C%2FP%3E%0A%3CHR%20%2F%3E%3C%2FBLOCKQUOTE%3E%0A%3CP%3EThe%20proper%20way%20is%20to%20create%20a%20new%20SPFx%20webpart%20with%20the%20html%2Fscript.%20There%20are%20many%20security%20reasons%20why%20using%20my%20web%20part%20or%20the%20the%20old%20classic%20ones%20are%20a%20bad%20idea.%3C%2FP%3E%0A%3CP%3EJust%20to%20be%20clear%20before%20you%20go%20any%20which%20way%20just%20because%20you%20can%20%3Agrinning_face%3A%3C%2Fimg%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-696404%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20add%20HTML%20to%20sharePoint%20online%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-696404%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F360267%22%20target%3D%22_blank%22%3E%40Molete%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRIKE%3EIf%20you're%20on%20classic%20pages%2C%20you%20can%20add%20a%20Content%20Editor%20Web%20Part%20which%20points%20to%20your%20HTML%20file%2C%20which%20in%20turn%20loads%20your%20JavaScript%20files.%3C%2FSTRIKE%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYou%20can%3A%3C%2FP%3E%3CP%3E-%20Create%20an%20SPFx%20web%20part%20that%20does%20what%20you%20need%3C%2FP%3E%3CP%3E-%20Create%20an%20SPFx%20single%20part%20app%20page%20that%20does%20what%20you%20need%3C%2FP%3E%3CP%3E-%20%3CSTRIKE%3EUse%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F34%22%20target%3D%22_blank%22%3E%40Mikael%20Svenson%3C%2FA%3E's%26nbsp%3BSPFx%20Script%20Editor%20web%20part%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-script-editor%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-script-editor%3C%2FA%3E%3C%2FSTRIKE%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Visitor

Hi 

 

how do i add HTML code and JavaScript to SharePoint online

4 Replies
Highlighted

@Molete depending on what you're trying to achieve they may be several options. I strongly advice you to go through SharePoint development overview documentation to get a better picture of what is possible https://docs.microsoft.com/en-us/sharepoint/dev/general-development/sharepoint-development-overview

Highlighted

@Molete 

Seems difficult and didn't work with the suggested ways. But somewhere, I found a solution which worked very well: Upload all the files and folders used in the html site to a SP library, keeping the same structure. Open the startpage in an editor > save it as .aspx file > upload this .aspx to the SP library in the folder where you have the .html file. The .aspx can be opened from SP and the links will be ok.

Highlighted

@Molete 

 

If you're on classic pages, you can add a Content Editor Web Part which points to your HTML file, which in turn loads your JavaScript files.

 

You can:

- Create an SPFx web part that does what you need

- Create an SPFx single part app page that does what you need

- Use @Mikael Svenson's SPFx Script Editor web part: https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-script-editor

Highlighted

@Thomas Berman wrote:

@Molete 

 

If you're on classic pages, you can add a Content Editor Web Part which points to your HTML file, which in turn loads your JavaScript files.

 

On modern pages, you can:

- Create an SPFx web part that does what you need

- Create an SPFx full page application

- Use @Mikael Svenson's SPFx Script Editor web part: https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-script-editor


The proper way is to create a new SPFx webpart with the html/script. There are many security reasons why using my web part or the the old classic ones are a bad idea.

Just to be clear before you go any which way just because you can :grinning_face: