SOLVED

Customizing "modern" lists and libraries new form

%3CLINGO-SUB%20id%3D%22lingo-sub-103636%22%20slang%3D%22en-US%22%3ECustomizing%20%22modern%22%20lists%20and%20libraries%20new%20form%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-103636%22%20slang%3D%22en-US%22%3E%3CP%3EHello%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHow%20to%20render%20the%20field%20runtime%20into%20the%20modern%20UI%20of%20new%20form%20of%20the%20list%20or%20library%3F%3C%2FP%3E%3CP%3ELike%20in%20classic%20sharepoint%20UI%20js%20link%20used%20to%20render%20field%20runtime%20in%20%3CSPAN%3Elist%20or%20library%20NewForm.aspx%3C%2FSPAN%3E.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERegards%2C%3C%2FP%3E%3CP%3EGayatri%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-212445%22%20slang%3D%22en-US%22%3ERe%3A%20Customizing%20%22modern%22%20lists%20and%20libraries%20new%20form%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-212445%22%20slang%3D%22en-US%22%3E%3CP%3EYou%20can%20install%20and%20enable%20Sintel%20Forms%20on%20your%20list%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fsintel.ie%2Fproducts%2Fsintel-forms%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fsintel.ie%2Fproducts%2Fsintel-forms%2F%3C%2FA%3E.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIt%20is%20free%20for%20up%20to%202%20forms.%3C%2FP%3E%3CP%3EIt%20will%20allow%20you%20to%26nbsp%3Bconfigure%20any%20layout%20including%20the%20tabs.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-149809%22%20slang%3D%22en-US%22%3ERe%3A%20Customizing%20%22modern%22%20lists%20and%20libraries%20new%20form%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-149809%22%20slang%3D%22en-US%22%3E%3CP%3EUnfortunately%2C%20MS%20does%20not%20provide%26nbsp%3Bcustomization%26nbsp%3Boptions%26nbsp%3Bfor%20modern%20forms.%20I%20can%20recommend%20you%20to%20take%20a%20look%20at%20a%203rd%20party%20tool%20-%20%3CA%20href%3D%22https%3A%2F%2Fplumsail.com%2Fforms%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3EPlumsail%20Forms%3C%2FA%3E%20-%26nbsp%3Bit%20allows%20you%20to%26nbsp%3Bbuild%20fully%20responsive%20web%20forms%20in%20handy%20designer%20and%20publish%20them%20in%20SharePoint%20modern%20pages.%20They%20support%20multiple%20layouts%20-%20for%20PCs%2C%20tablets%2C%20and%20phones.%20And%20with%20the%20help%20of%20its%20%3CA%20href%3D%22https%3A%2F%2Fplumsail.com%2Fdocs%2Fforms%2Fjavascript%2Fgeneral.html%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3EJS-framework%3C%2FA%3E%2C%20you%20can%20implement%20business%20logic%20of%20any%20complexity.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-103639%22%20slang%3D%22en-US%22%3ERe%3A%20Customizing%20%22modern%22%20lists%20and%20libraries%20new%20form%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-103639%22%20slang%3D%22en-US%22%3E%3CP%3EHello%20Gayatri%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAs%20of%20now%2C%20there%20is%20no%20functionality%20to%20customizing%20modern%20UI.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThere%20are%20numerous%20customizations%20which%20currently%20are%20not%20supported%20for%20%22modern%22%20lists%20and%20libraries%3A%3C%2FP%3E%3CUL%3E%3CLI%3EJSLink%20based%20field%20customizations%20-%20See%20note%20on%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3ESharePoint%20Framework%20Extensions%3C%2FSTRONG%3E%3C%2FLI%3E%3CLI%3EJSLink%20based%20view%20customizations%20-%20See%20note%20on%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3ESharePoint%20Framework%20Extensions%3C%2FSTRONG%3E%3C%2FLI%3E%3CLI%3ECustom%20CSS%20via%20AlternateCSSUrl%20web%20property%3C%2FLI%3E%3CLI%3ECustom%20JavaScript%20embedded%20via%20User%20Custom%20Actions%20-%20See%20note%20on%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSTRONG%3ESharePoint%20Framework%20Extensions%3C%2FSTRONG%3E%3C%2FLI%3E%3CLI%3ECustom%20master%20pages%20-%20More%20extensive%20branding%20will%20be%20supported%20later%20using%20alternative%20options%3C%2FLI%3E%3CLI%3ECustomization%20via%20InfoPath%3C%2FLI%3E%3CLI%3EMinimal%20Download%20Strategy%20(MDS)%3C%2FLI%3E%3CLI%3ESharePoint%20Server%20Publishing%3C%2FLI%3E%3C%2FUL%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3EBut%20Microsoft%20is%20working%20on%20following%20thing%20which%20is%20in%20SharePoint%20Framework%20roadmap%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3EClient-side%20web%20parts%2B%2B%20and%20add-ins%3C%2FSTRONG%3E%3C%2FP%3E%3CUL%3E%3CLI%3E%3CP%3ESupporting%20more%20complex%20scenarios%20and%20interactions%20with%20web%20parts%3C%2FP%3E%3CUL%3E%3CLI%3EPart-to-part%20communication%3C%2FLI%3E%3CLI%3EJS%20Framework%20isolation%3C%2FLI%3E%3CLI%3E%22citizen%20developer%22%20model%20for%20lightweight%20development%3C%2FLI%3E%3C%2FUL%3E%3C%2FLI%3E%3CLI%3E%3CP%3EBring%20add-ins%20to%20the%20modern%20world%3A%20Let%E2%80%99s%20make%20them%20play%20nicer%20with%20the%20new%20UX.%3C%2FP%3E%3CUL%3E%3CLI%3EAzure%20AD%20Registration%3C%2FLI%3E%3CLI%3ENative%20responsive%20support%3C%2FLI%3E%3CLI%3EBuild%20Add-Ins%20with%20SharePoint%20Framework%3C%2FLI%3E%3C%2FUL%3E%3C%2FLI%3E%3C%2FUL%3E%3CP%3E%3CSTRONG%3EJavaScript%20embedding%20support%20(JSLink%2C%20User%20Custom%20Actions)%3C%2FSTRONG%3E%3C%2FP%3E%3CUL%3E%3CLI%3EThe%20same%20tool%20chain%20and%20deployment%20model%20as%20client-side%20web%20parts%3C%2FLI%3E%3CLI%3EDrive%20from%20a%20strongly%20typed%20base%20class%20wherever%20possible%20rather%20than%20manipulating%20the%20page%20DOM%20directly.%3C%2FLI%3E%3CLI%3EEnable%20modern%20extension%20usage%20with%20modern%20experiences%20similar%20as%20Custom%20Actions%20and%20JS%20Link%20in%20classic%20experience%3C%2FLI%3E%3CLI%3EWork%20with%20NoScript%20via%20tenant%20app%20catalog%3C%2FLI%3E%3C%2FUL%3E%3C%2FLINGO-BODY%3E
New Contributor

Hello,

 

How to render the field runtime into the modern UI of new form of the list or library?

Like in classic sharepoint UI js link used to render field runtime in list or library NewForm.aspx.

 

Regards,

Gayatri

3 Replies
best response confirmed by Gayatri Rajput (New Contributor)
Solution

Hello Gayatri,

 

As of now, there is no functionality to customizing modern UI.

 

There are numerous customizations which currently are not supported for "modern" lists and libraries:

  • JSLink based field customizations - See note on SharePoint Framework Extensions
  • JSLink based view customizations - See note on SharePoint Framework Extensions
  • Custom CSS via AlternateCSSUrl web property
  • Custom JavaScript embedded via User Custom Actions - See note on SharePoint Framework Extensions
  • Custom master pages - More extensive branding will be supported later using alternative options
  • Customization via InfoPath
  • Minimal Download Strategy (MDS)
  • SharePoint Server Publishing

 

But Microsoft is working on following thing which is in SharePoint Framework roadmap

 

Client-side web parts++ and add-ins

  • Supporting more complex scenarios and interactions with web parts

    • Part-to-part communication
    • JS Framework isolation
    • "citizen developer" model for lightweight development
  • Bring add-ins to the modern world: Let’s make them play nicer with the new UX.

    • Azure AD Registration
    • Native responsive support
    • Build Add-Ins with SharePoint Framework

JavaScript embedding support (JSLink, User Custom Actions)

  • The same tool chain and deployment model as client-side web parts
  • Drive from a strongly typed base class wherever possible rather than manipulating the page DOM directly.
  • Enable modern extension usage with modern experiences similar as Custom Actions and JS Link in classic experience
  • Work with NoScript via tenant app catalog

Unfortunately, MS does not provide customization options for modern forms. I can recommend you to take a look at a 3rd party tool - Plumsail Forms - it allows you to build fully responsive web forms in handy designer and publish them in SharePoint modern pages. They support multiple layouts - for PCs, tablets, and phones. And with the help of its JS-framework, you can implement business logic of any complexity.

You can install and enable Sintel Forms on your list https://sintel.ie/products/sintel-forms/.

 

It is free for up to 2 forms.

It will allow you to configure any layout including the tabs.