Create new custom form of SPList using HTML controls, css, JS

%3CLINGO-SUB%20id%3D%22lingo-sub-203674%22%20slang%3D%22en-US%22%3ECreate%20new%20custom%20form%20of%20SPList%20using%20HTML%20controls%2C%20css%2C%20JS%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-203674%22%20slang%3D%22en-US%22%3E%3CP%3EI%20wanted%20to%20create%20a%20completely%20custom%20form%20from%20my%20SPOList%20forms.%3C%2FP%3E%3CP%3EI%20have%20a%20customer%20list%2C%20which%20has%20newform%2C%20dispform%2Ceditformby%20default.%3C%2FP%3E%3CP%3EHere%2CI%20would%20like%20to%20create%20a%20completely%20custom%20new%20form%20using%20html%20controls%20and%2C%20css%2C%20javascript%20.%3C%2FP%3E%3CP%3Ewhere%20will%20i%20start%20and%20any%20steps%20by%20step%20procedure%20to%20create%20this%3F%3C%2FP%3E%3CP%3Ei%26nbsp%3B%20created%20a%20new%20form%20from%20sp%20designer%20and%20saved.%20but%20i%20am%20unable%20to%20delete%20the%20contents%20of%20this%20newcustomform%20and%20unable%20to%20refer%20any%20js%20%2Ccss%20files.%3C%2FP%3E%3CP%3Eany%20articles%2Csource%20code.%20appreciated!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-203899%22%20slang%3D%22en-US%22%3ERe%3A%20Create%20new%20custom%20form%20of%20SPList%20using%20HTML%20controls%2C%20css%2C%20JS%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-203899%22%20slang%3D%22en-US%22%3EPowerApps%20allows%20you%20to%20set%20rules%20that%20can%20handle%20validation%2C%20as%20well%20as%20conditional%20displays%20of%20fields%2C%20etc.%20In%20order%20to%20send%20emails%2C%20I%20would%20probably%20bring%20Flow%20into%20the%20mix.%20So%20your%20PowerApp%20would%20add%20a%20new%20record%20to%20a%20list%2C%20and%20there%20would%20be%20a%20Flow%20set%20to%20run%20any%20time%20a%20new%20record%20is%20added%20to%20send%20the%20email%20notifications.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-203834%22%20slang%3D%22en-US%22%3ERe%3A%20Create%20new%20custom%20form%20of%20SPList%20using%20HTML%20controls%2C%20css%2C%20JS%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-203834%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F4572%22%20target%3D%22_blank%22%3E%40Courtney%20Prothero%3C%2FA%3E%26nbsp%3Bcurrently%20i%20am%20newbie%20in%20SPFx.%20and%26nbsp%3B%20we%20dont%20have%20any%20environment%20to%20get%20the%20privileges%20to%20deploy%20the%20elements%20into%20the%20site.%3C%2FP%3E%3CP%3EIf%20i%20use%20PowerApps%20%2C%20how%20to%20perform%20the%20validation%2C%20show%2Fhide%20and%20send%20emails%20to%20a%20groups%20of%20person%2C%20etc%20...%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-203750%22%20slang%3D%22en-US%22%3ERe%3A%20Create%20new%20custom%20form%20of%20SPList%20using%20HTML%20controls%2C%20css%2C%20JS%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-203750%22%20slang%3D%22en-US%22%3E%3CP%3EIt%20sounds%20like%20you%20need%20the%20Sharepoint%20Framework.%20There%20are%20lots%20of%20tutorials%20online.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EOtherwise%20you%20might%20check%20out%20PowerApps%2C%20which%20are%20pretty%20flexible%2C%20but%20don't%20allow%20you%20to%20do%20javascript.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

I wanted to create a completely custom form from my SPOList forms.

I have a customer list, which has newform, dispform,editformby default.

Here,I would like to create a completely custom new form using html controls and, css, javascript .

where will i start and any steps by step procedure to create this?

i  created a new form from sp designer and saved. but i am unable to delete the contents of this newcustomform and unable to refer any js ,css files.

any articles,source code. appreciated!

 

3 Replies
Highlighted

It sounds like you need the Sharepoint Framework. There are lots of tutorials online. 

 

Otherwise you might check out PowerApps, which are pretty flexible, but don't allow you to do javascript. 

 

 

Highlighted

@Courtney Prothero currently i am newbie in SPFx. and  we dont have any environment to get the privileges to deploy the elements into the site.

If i use PowerApps , how to perform the validation, show/hide and send emails to a groups of person, etc ... 

Highlighted
PowerApps allows you to set rules that can handle validation, as well as conditional displays of fields, etc. In order to send emails, I would probably bring Flow into the mix. So your PowerApp would add a new record to a list, and there would be a Flow set to run any time a new record is added to send the email notifications.