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
# Create a new projectyo portals-clientside# Generate a javascript componentyo portals-clientside:component# Generate a javascript component and the associate HTML and DWP webpart fileyo portals-clientside:webpart# Extract list schema (comma delimited for multiple lists)yo portals-clientside:list# Create a Menu component and the accompanying 3 listsyo portals-clientside:menu# Override a field's displayyo portals-clientside:csr
Prerequisites
Install Node.js, go for highest version. Then use npm
to install Yeoman (yo
)
#install Yeomannpm install -g yo
Install the Generator
#Install the Yeoman Generatornpm install -g generator-portals-clientside# To update, runnpm update -g generator-portals-clientside
Create a new Project
The generator will create a new project folder for you.
yo portals-clientside
Just answer the prompts and you are good to go.
Lastly
- Switch into your new project folder
- Install your dependencies with
npm install
- Ensure your build with
npm run build
- Test your SP connection with
npm run deploy
- Inject your code onto SP with
npm run install
Sub Generators
Web Part
Adds a new JavaScript component plus and html file, plus a content editor .dwp
yo portals-clientside:webpart
Component
Adds a new JavaScript component to your project
yo portals-clientside:component
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.
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
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.
yo portals-clientside:csr