By default a list don’t have the tile view available like the document library has, but we can use List View Formating JSON to create Tiles and then the option will appear and we can switch from List to Tiles View.
Define Tiles View as Default View
Sometime we need to define the Tiles View as a default view on a list and here the steps to do it:
Create a New View
On the switch view options, selected “Save View as ” on the view that has the information you want.
Apply List Formating JSON file on the new view
Set Tiles View as Default View
On the switch view option select “Tiles” that appears after applied JSON, and then in switch view select “Set Current View as Default”.
After this steps the list has Tiles View as Default View.
Office UI Fabric is a responsive, mobile-first, front-end framework for developers, designed to make it simple to quickly create web experiences.
With Office UI Fabric we can apply simple CSS styles to make web applications look and feel like the rest of Office 365 Applications.
To Styling an Office UI Fabric component we can use the follow approaches:
Styles defined in SCSS file and applied with ClassName prop
Styles applied with style prop
Styles applied with styles prop using CSS-in-JS
Fabric’s recommended styling approach uses CSS-in-JS and revolves around the styles prop, which is provided by most Fabric components and allows strongly-typed customisations to individual areas of a component.
Styling a Component
Unlike a style prop that only applies styles to the root component, the styles prop (provided by most Fabric components) allows you to control the styling of every part of a component: the root, the children, and even sub-components.
A component consists of DOM elements, or “areas.” Each of the areas should be targetable for styling.
To find the available areas for a component, use intellisense or look at the IComponentStyles interface of Control. (Substituting the actual component name for “Component”).
Client Side Development to SP2013 is not new, but in this Post I’ll try explain my experience with develop a Client Solution App with same technology that are use with SPFx, Typescript, React, React-Ui-Fabric-React Components, I use the @PnP/PnPjs to access Lista Data.
SPFx is supported in SP2016 (Feature Pack 2) and SP2019 but not in SP2013.
First Step is create a Type Script React Project, I use the create-react-app with create-react-app-ts script this will scaffold a project with tools necessary to create a React App with TypeScript
If you don’t have installed create-react-app you must install with:
I use MAC OS X as my principal environment for development and for simplify the creation of a React Project with TypeScript I create a simple bash shell script that only receive a project name as parameter.