Let’s imagine that we have SharePoint on-prem. For some reason we want to ignore modern SharePoint development framework SPFx. We want to create SharePoint WSP solution with some pages – for example Application Pages.
I’m not a designer expert – I don’t want to spend my lifetime looking for icons to use, tweaking colors to make sure that we are web friendly etc. Sometimes the look and feel of an application takes longer to create than actually functionality behind the scene. It is so easier if we take Office Fabric UI and our SharePoint page will look like all other OOTB pages from Office 365.
“The Office UI Fabric is The front-end framework for building experiences for Office and Office 365. It is a responsive, mobile-first, front-end framework, designed to make it quick and simple for you to create web experiences using the Office Design Language. It’s easy to get up and running with Fabric – whether you’re creating a new Office experience from scratch or adding new features to an existing one.”
We can simply import css file of Fabric UI Styles to our page and we could use styles from it – responsive UI, brand icons, colors, localization, theme generator, animations etc.
Another things are Fabric UI Components like Button, Checkbox, Rating, Slider, Breadcrumb, SearchBox, DetailsList, PeoplePicker, DatePicker, ColorPicker, MessageBar, ProgressIndicator, Dialog, Modal etc. List of all components you can see here.
But if you want to go with them, you have to use React (you can use AngularJS or Swift too) because they are built with the React framework. That is not bad side, that is good side! SPFx use React too, so your code could look very similar to them.
I want to share with you my idea / my solution how to use Office UI Fabric Components with React and TypeScript inside any type of SharePoint on-prem pages within WSP solution. Continue reading “SharePoint Application Pages with React and Office Fabric UI interface”