generator-portals-clientside/readme.md

Generates a SharePoint clientside project skeleton. Brought to you by Skyline's Portals & Collaboration Team.

# SharePoint Clientside Project Generator

This tool will automatically scaffold out your clientside sharepoint projects. It has sub-generators for components, list exports, and CSR fields.
# Available Generators
``` bash
# Create a new project
yo portals-clientside
# Generate a javascript component
yo portals-clientside:component
# Generate a javascript component and the associate HTML and DWP webpart file
yo portals-clientside:webpart
# Extract list schema (comma delimited for multiple lists)
yo portals-clientside:list
# Create a Menu component and the accompanying 3 lists
yo portals-clientside:menu
# Override a field's display
yo portals-clientside:csr

```
# Prerequisites
Install Node.js, go for highest version. Then use `npm` to install Yeoman (`yo`)
``` bash
#install Yeoman
npm install -g yo
```

# Install the Generator
``` bash
#Install the Yeoman Generator
npm install -g generator-portals-clientside

# To update, run
npm update -g generator-portals-clientside
```

# Create a new Project
The generator will create a new project folder for you.
``` bash
yo portals-clientside
```
Just answer the prompts and you are good to go.

![Example](docs/generator.PNG)

# Lastly
1. Switch into your new project folder
2. Install your dependencies with `npm install`
3. Ensure your build with `npm run build`
4. Test your SP connection with `npm run deploy`
5. Inject your code onto SP with `npm run install`

![ProjectFolder](docs/projectfolder.PNG)

# Sub Generators

## Web Part
Adds a new JavaScript component plus and html file, plus a content editor .dwp
``` bash
yo portals-clientside:webpart
```
![Component](docs/webpart.PNG)

## Component
Adds a new JavaScript component to your project
``` bash
yo portals-clientside:component
```
![Component](docs/component.PNG)

## Menu (Top Navigation, Footer, Left Nav etc...)
Adds ListSchema for 3 Menu lists to create hierarchy. Creates a new component which includes all the data access and rendering for the 3 lists.  Slap on some CSS and you are all set.
``` bash
yo portals-clientside:menu
```

## List
Exports the PnP List Schema of a list on your SharePoint site.  Saves it in your project's `ProvisioningSchemas` folder. 

*HINT: You can target multiple lists by passing comma delimited list names*
``` bash
yo portals-clientside:list
? Whats the name of the list?: <LIST_NAME>
``` 

## CSR Field
Set's up a Client Side Rendering field override. Supports Edit/New Form and Display Form.  You just need to invoke the `register()` method.
``` bash 
yo portals-clientside:csr
```
![CSR](docs/csr.PNG)