SharePoint Development

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.

Thanks for reading.

Introduction

 

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”).

Here the TextField styles Interface as sample.

The styles can be defined in two ways – Object-based or Function-Based.

 

Object-based Styling

 

In Object-Based, we create a jscript object and define styles for each area of the component. like define above:

// Define styling, split out styles for each area.
const styles: IComponentStyles {
  root: { /* styles */ },
  child1: ['className', { /* styles */ }],
  child2: { /* styles */ }
  subComponentStyles: {
    subComponent: {
      root: { /* styles */ },
      child1: { /* styles */ },
    }
  }
}

// In render()
return <Component styles={styles} ... />;

 

Sample:

 

const theme = getTheme();
const styles = {
  root: [
    {
      background: theme.palette.themePrimary,
      display: 'none',
      selectors: {
        ':hover': {
          background: theme.palette.themeSecondary,
        },
        '&.isExpanded': {
            display: 'block'
        },
        '&:hover .childElement': {
            color: 'white' 
        }
      }
    }
  ]
};

// In render()
return <Component styles={styles} ... />;

 

Function-based Styling

 

With Function-based, the styling applied to each area may depend on the state of the component. So you should also be able to define styles as a function of these inputs:

// Take in styling input, split out styles for each area.
const styles = (props: IComponentStyleProps): IComponentStyles => {
  return {
    root: { /* styles */ },
    child1: ['className', { /* styles */ }],
    child2: ['className', props.someBoolean && { /* styles */ }],
    subComponentStyles: {
      subComponent: (subProps:ISubComponentStyleProps) => {
        const { theme, disabled, hasBoolean } = props; // parent props are available in subComponents
        const { required, hasOtherBoolean } = subProps;
        return ({
          root: { /* styles */ },
          child1: { /* styles */ },
        });
      }
    }
  };
}

// In render()
return <Component styles={styles} ... />;

 

Sample:

 

const styles = props => ({
  root: [
    {
      background: props.theme.palette.themePrimary,
      selectors: {
        ':hover': {
          background: props.theme.palette.themeSecondary,
        }
      }
    },
    props.isExpanded
      ? { display: 'block' }
      : { display: 'none' }
  ]
});

// In render()
return <Component styles={styles} ... />;

 

 

Conclusion

Using the CSS-in-JS approach to styling components is flexible and powerful if we need to styling different “areas” or sub-components of component on easy way.

 

Summary

The Web Part Tree Organization Chart, shows the Organization Chart of the Company or the team, the webpart reads information from current user to build the Organization Chart.


We can configure in the webpart properties if it show all Organization Chart or the only user team, (same manager and peers).

Tree Organization Chart WebPart
Tree Organization Chart WebPart
My Team Organization Chart

Code is here, soon I will create a PR to sp-dev-fx-webparts.

Sharing is Caring…

Screenshot 2018-09-22 at 14.26.23

 

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:

npm install create-react-app -g 

Can find more information here:

https://www.npmjs.com/package/create-react-app

after you have to install the react-scripts-ts with:

npm i react-scripts-ts -g

Can find more information here:

https://github.com/wmonk/create-react-app-typescript

Finally create the project:

create-react-app  <projectName> –scripts-version=react-scripts-ts

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.

Here the my script:

CreateReactTS.sh . that have the following code:

create-react-app $1 –scripts-version=react-scripts-ts

To work with project I use VSCode as my editor , but you can use what you want, please see what is create, for details please see this links:

https://github.com/wmonk/create-react-apptypescript/blob/master/template/README.md​

https://github.com/facebook/create-react-app​

Screenshot 2018-10-03 at 21.18.35
Let start creating our SharePoint 2013 App. 🙂
Install Required Packages:
I use additional packages :

 

Project Organization:

Class to access SharePoint Data (services.ts) here are defined all methods to get data from SharePoint,  I use @PnP/PnPjs .

Note on use@PnP/PnPjs  , we are using SharePoint 2013 REST API’s,  first we have to setup@PnP/PnPjs .:

This is required in SharePoint 2013.

Screenshot 2018-10-03 at 21.43.06

Sample of my service.ts class:

Screenshot 2018-10-03 at 21.55.21

I use a class for some staff I use in my components, that I called util.ts

Screenshot 2018-10-03 at 22.01.38

Here my Application  App.tsx

Screenshot 2018-10-03 at 22.08.10

Screenshot 2018-10-03 at 22.11.52

 

Let’s compile my Application and prepare to deploy to SharePoint.

First thing is define a environment var called PUBLIC_URL to the location of SharePoint library where the build directory is replicated.

export PUBLIC_URL = “/Shared%20Documents/App/build”

On build process all path of our files, css, jscript, etc.. are reference to this location in the index.html.

Next, build the App.

npm run build

go to the build directory of your project and you will see the compiled files:

Screenshot 2018-10-04 at 09.32.57

Open the project folder with File Explorer in Windows or Finder in MAC and copy all the content of build directory to your SharePoint Document Library.

Screenshot 2018-10-04 at 09.42.56

In Document Library:

Screenshot 2018-10-04 at 11.24.48

After I create a WebPart based on Content Editor WebPart, point to my Index.html

Screenshot 2018-10-04 at 11.33.15

Upload the dwp file to WebPart Gallery and is ready to use. 🙂

Here my Sample:

Screenshot 2018-10-04 at 11.38.20

Screenshot 2018-10-04 at 11.39.36