Microsoft brings Modern UI to SharePoint Framework with Extensions

Microsoft brings Modern UI to SharePoint Framework with Extensions
Posted :

Over the years, SharePoint has evolved with new advances and has embraced new trends. Multiple developers have shaped and extended SharePoint Framework development in many ways. Currently, the SharePoint Framework is the next evolution in SharePoint development.

At the Microsoft Ignite 2017 event, SharePoint Framework was in the limelight. Ever since its release in August this year, we have observed a substantial excitement among its users. SharePoint Framework has recently introduced ‘SharePoint Framework Extensions’ that can be added to extend the user experience.

SharePoint 2019 Pre-Migration Check

There are several reasons why you should migrate to SharePoint 2019. It has hybrid cloud search, all the sites are in one place, it allows rapid site development, there are many PowerShell scripts and so on.

Let’s check out the new extensions and explore the benefits they have to offer.

Overview of New Extensions

SharePoint Framework Extensions are to be used to give a rich user experience to the users. The extensions will allow customization of facets including notification areas, toolbars, and list data views. All Office 365 tenants can use SharePoint Framework Extensions for production usage.
SharePoint Framework Extensions will enrich the user experience by providing the facility of modern pages and document libraries, utilizing client-side development. There are three new extension types added newly to SharePoint Framework as below.

  • Application Customizers – enables adding scripts to the page, allows access to well-known HTML element placeholders and customizing rendering.
  • Field Customizers – It functions to provide modified views to data for fields within a list.
  • Command Sets – features an extension of SharePoint command surfaces to add new actions, and supply client-side code that users can use to implement behaviors.

Users can create more extensions with the help of common scripting frameworks, such as AngularJS and React, together with plain JavaScript projects. For instance, users can use React along with components from Office UI Fabric React to create experiences based on the same components used in Office 365.

Insights

Download

New Updates

The SharePoint Framework development uses web parts, SharePoint feature XML, and more. Many features are written in C#, compiled to DLLs, and deployed on-premises. This infrastructure is suitable for environments with only one enterprise, but it doesn’t scale to the cloud, where multiple tenants run side-by-side. Thus, two new alternative models are introduced in SharePoint Framework, namely client-side JavaScript injection, and SharePoint Add-ins.

JavaScript injection

The Script Editor is one of the most famous web parts in SharePoint Online. Using the JavaScript into the Script Editor web part, the user can have the JavaScript performed when the page renders, hence it can connect with other controls of the page. It is simple to use and an efficient way of delivering good user experience.

SharePoint Add-in model

Add-in/app-part model is the currently available option that runs as a solution in NoScript. Executing this action, iFrame is created where the actual experience resides and executes. The biggest advantage is that it has no access to the current DOM connection, that’s because it’s external to the system. This makes it easier for the users to trust the source and deploy it. Most importantly, it facilitates the end-users to install the add-ins on NoScript sites.

Added values of Modern UI

Modern UI is the new term in the tech world to embrace the new changes in SharePoint Framework. Some of the major adopted tools that helped in creating the new extensions are AngularJS, Sass CSS, ReactJS, and Gulp. Here’s how SharePoint UI design can utilize these tools:

  •  AngularJS is a structural framework for dynamic web applications. SharePoint Framework adopted AngularJS to provide a material design for modern UI/UX for its users.
  • Sass is the premier CSS extension language that is stable and powerful. SharePoint used CSS as extensions to leverage from page functionality such as combining multiple CSS rules, referencing parent selectors, nesting of properties into other properties for grouping, and supporting placeholder selector using a class or ID selector by making use of @extend directive.
  • React is the best tool to create interactive UIs. SharePoint adopted React to efficiently update and render the right components when data changes. React can also render on the server using Node.js and power mobile apps using React Native. ReactJS provides users with a native experience.
  • Gulp is a toolkit that helps to automate time-consuming tasks in the development workflow. SharePoint Framework optimized Gulp for the deployment process..

SharePoint Framework over time has released new features of UI/UX solutions. With the new SharePoint Framework, designing a component with better UX has become easy because of the extensive use of client technologies like HTML 5, JavaScript, JS Frameworks and REST APIs.

Case Study

Download

Creating better UI/UX in SharePoint Framework is now intuitive with designing components. This will allow the designers and power users to instantly design and apply business branding using the browser-based configuration wizards.
Furthermore, developing a responsive site has become mandatory for businesses and sustaining the UX is necessarily challenging. SharePoint Framework with the new tools has helped us achieve them with ease and minimal coding.

Evolution of SharePoint 2016

In the past, SharePoint development created web parts using C# assemblies that were installed on the cloud servers. SharePoint needed a new development model as C# assemblies do not work anymore. Hence, the SharePoint Framework is the next evolution in SharePoint development. The new models for most web parts use JavaScript for running the browser.
SharePoint Framework web parts have already reached General Availability (GA). Automated updates and refinements around API names, flow, and more will be provided periodically to the users over time. SharePoint Framework will continue to grow as a solution to match compatibility.

Insights

We hope this piece of information with the latest SharePoint Framework Extensions helps you imagine new ways to customize your sites and apps within the SharePoint modern experience and automate activities.

SharePoint is believed to be working on developing on-premises support and new development scenarios, so stay tuned for new extensions and capabilities. More extensions are going to be launched in the near future.
If you wish to know more about how SharePoint Framework can help you with automation, connect with our SharePoint developers.

Need Help?
We are here for you

Step into a new land of opportunities and unearth the benefits of digital transformation.