Modern UI Vs Classic UI Vs Power App, IS Classic UI still the most flexible way to customize SharePoint list forms?

Question

Most of the time when I add a new custom list inside SharePoint online, its New & Edit forms will need to be customized, the customization falls into these main categories:

1. Certain fields to be disabled depending on other field. For example, if Status = close, then the title and description should be disabled,and so on.

2. Cascading lists.

Now in SharePoint on-premises (Mainly 2013), I use to add a script web part inside the New/Edit list forms and write those using JavaScript/jQuery. And if I need to do server-side checking (for example to make sure that no one modify a title for closed item), then I will write an item updating event receiver to do the check and cancel the update if needed.

But in SharePoint online, I thought that we will have other approaches to customize the lists' forms, mainly Modern UI and PowerApp, but those have these main drawbacks:

PowerApps:

1. Some SharePoint features are not currently supported, for example you can not add a picture inside a multi-line of text fields.
2. If you have a multi-line of text field with "Append changes to existing text" enabled, then the old appended text will not be shown inside the edit form.

Modern UI: They can not be customized by their own.

So most of the time I ended up using the classic UI + Script Editor + Remote Event Receiver, to implement our business logic inside SharePoint online lists.

Any advice on this?

Answer 1

The drawbacks you mentioned for the PowerApps are correct. However the simple customization's like disabling the fields or cascading the drop-downs or not allowing the users to update the closed items can easily be achieved using PowerApp Functions.

For simple customization's:

So, wherever you do not have complex scenarios like using enhanced rich multiple lines of text or multi-line of text field with "Append changes to existing text" enabled then I will suggest you to use PowerApp for the list form customization.

For complex customization's:

For complex customization's I will suggest you to use either SharePoint Framework (Modern Experience) or SharePoint Add-ins (Classic Experience).

Using SPFx you can build the complete solution on your own. You can create a webpart using SPFx and add it to the Modern Site Page where users will go and add/update list items (and not directly from list).

In SPFx, you can use any JavaScript framework for customization. From UI perspective you can use Angular, React to easily achieve complex things. For CRUD operations you can use SharePoint REST APIs, PnP JS library, etc. Also you can use Reusable React controls for your SharePoint Framework solutions which are very handy while developing list forms using SPFx.

Useful Links:

1. React List Form WebPart
2. SharePoint CRUD operations
3. SharePoint Framework - CRUD Operations Using ReactJS
4. SharePoint Framework (SPFx) React Controls : Creating custom list form including People picker and Taxonomy picker

Answer 2

If you truly want the most "flexible" way to customize list forms in SharePoint Online, you will want to create a custom SharePoint Framework (SPFx) WebPart, in which you could build an entirely custom JavaScript App, including your own entirely custom Form. Using this strategy, you will need to handle data saving/retrieving yourself through the Framework API. Once you choose a new page to host your webpart, you will want to ensure users use your newly developed page instead of the built-in Forms. Unfortunately, there is currently no way in the "Modern" experience to force users to use this new Form to replace the built-in list forms. You can use PowerShell to change the content type's EditFormUrl and NewFormUrl to point to your new page, but the List UI very rarely directs the user to those pages for input. The New button, for example on a list view, opens a modern form in a side-panel, that would not use your custom page. So, you probably only want to use this technique if your users do not do much interaction directly with the list.

Another Option, If you want something more similar to what you used to do with a ScriptEditor webpart in classic pages, you can build an SPFx Application Customizer Extension. The downsides to creating an SPFx Extention for this purposes, is that the Extension will be loaded on every page in your site, so you will need to wrap your code in a conditional to only perform your actions/validation when the expected list form elements are on the page.

Are either of these the the easiest way to customize a List Form? Absolutely not. A PowerApp would be much easier to build and maintain. But you specifically asked for the most "flexible", and if you truly need custom code to accomplish what you are doing, building SPFx Extenstions and/or SPFx Webparts will give you just that.

Also note that Remote Event Receivers are equally supported in both classic and modern lists, but developing WebHooks is the preferred approach to triggering custom code from SharePoint events -- and is a more widely supported standard.