This is my first day to participate in the Novembermore Challenge

SharePoint local workbench and hosted workbench

Conclusion: The SharePoint local workbench is a test of basic functionality, while the managed workbench is suitable for complex functionality, especially if it requires data from within a SharePoint site.

Local workbench and SharePoint hosted workbench

The native workbench is an excellent choice for testing SharePoint framework components, but it has significant limitations compared to the SharePoint hosted workbench. The SharePoint managed workbench runs in a real SharePoint environment, which means that components can use SharePoint apis, including SharePoint REST apis.

The local workbench has no true SharePoint context, which means it has no security context and cannot authenticate to call SharePoint apis, including the SharePoint REST API. If your component calls the SharePoint REST API, running it in the local workbench will fail.

1. How do I start the local workbench

Starting the local workbench is simple, start by creating a SharePoint file as described above, and then run the command line to add the trust certificate

gulp trust-dev-cert
Copy the code

Start the service

gulp serve
Copy the code

This will launch the local workbench. If I say that if I don’t launch it, I will open the browser. (Very rare, because your port is occupying my database port 5432, which happens to be the same as the SharePoint startup port.

Local Workbench effect

2. How do I start the managed workbench

There are two ways to launch the hosted workbench, but you need to do the same as before, just make sure you enter the correct URL for the set of SharePoint Online sites that you have access to

Gulp serve starts the service and opens the default workbench

The first is to modify the configuration file

// Modify server.config file "initialPage" in config: "Https://localhost:5432/workbench", / / modify SharePoint site for what you have + suffix exactly/workbench. Aspx "initialPage" : "Https:// {your own SharePoint site} / exactly / 15 / workbench. Aspx",Copy the code

The second,

Directly open the SharePoint site that you have the suffix exactly / 15 / workbench. Aspx, need to start gulp serve service

Managed workbench

It looks almost the same, but one is just a demo and the other can call SharePoint context content.

Practice 3.

Implement the SharePoint Rest interface using a managed workbench

Now add a list page named Countries to your SharePoint page

Like this

Build a SharePoint project but use the React framework when selecting it

Modify the configuration as mentioned earlier to enable it to open the hosted workbench by default.

In the SRC -> New Models folder, create the file icountrylistitem.ts

The purpose of this step is to create an interface for the SharePoint List

export interface ICountryListItem {
  Id: string;
  Title: string;
}
Copy the code

Create a button click practice of type Models -> Create a new file buttonClicKedCallback.ts

export type ButtonClickedCallback = () = > void;
Copy the code

Models – > new index. Ts

export * from './ButtonClickedCallback';
export * from './ICountryListItem';
Copy the code

Modify the file ISpFxHttpClientDemoProps. Ts

Import the one you created earlier

import {
  ButtonClickedCallback,
  ICountryListItem
} from '.. /.. /.. /models';
Copy the code

Update the react interface

export interface ISpFxHttpClientDemoProps {
  spListItems: ICountryListItem[]; onGetListItems? : ButtonClickedCallback; }Copy the code

In SpFxHttpClientDemo. Module. SCSS. File Add Style

.list {
  color: $ms-color-themeDark;
  background-color: $ms-color-themeLight;
  font-family: 'Segoe UI Regular WestEuropean'.'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  box-sizing: border-box;
  margin: 0 0;
  padding: 10px 0 100px 0;
  line-height: 50px;
  list-style-type: none;
}

.item {
  color: $ms-color-themeDark;
  background-color: $ms-color-themeLighterAlt;
  vertical-align: center;
  font-family: 'Segoe UI Regular WestEuropean'.'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  box-shadow: none;
  *zoom: 1;
  padding: 0 15px;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0.0.0.0.2), 0 25px 50px 0 rgba(0.0.0.0.1);
}
Copy the code

Add the following code to the Render method under spfxHttpClientDemo.tsx

<div className={ styles.container} >
    <div className={ styles.row} >
      <div className={ styles.column} >
        <p className={ styles.title} >SharePoint Content!</p>
        <a href="#" className={ styles.button } onClick={ this.onGetListItemsClicked} >
          <span className={ styles.label} >Get Counties</span>
        </a>
      </div>
    </div>

    <div className={ styles.row} >
      <ul className={ styles.list} >
        { this.props.spListItems &&
          this.props.spListItems.map((list) =>
            <li key={list.Id} className={styles.item}>
              <strong>Id:</strong> {list.Id}, <strong>Title:</strong> {list.Title}
            </li>)}</ul>
    </div>

  </div>
Copy the code

Add methods to classes with the same project name as yours

private onGetListItemsClicked = (event: React.MouseEvent<HTMLAnchorElement>): void= > {
  event.preventDefault();

  this.props.onGetListItems();
}
Copy the code

Retrieve data from the SharePoint REST API

SpFxHttpClientDemoWebPart.ts

Import the class

import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
import { ICountryListItem } from '.. /.. /models';


// Add private members
private_countries: ICountryListItem[] = []; Description -> replace withspListItems: this._countries,
onGetListItems: this._onGetListItems


// Add method
private _onGetListItems = (): void= > {
  this._getListItems()
    .then(response= > {
      this._countries = response;
      this.render();
    });
}
// This method uses the SharePoint REST API to retrieve list items from the Countries list. It will use the spHttpClient object to query the SharePoint REST API. When it receives the response, it calls Response.json ()
private _getListItems(): Promise<ICountryListItem[]> {
  return this.context.spHttpClient.get(
    this.context.pageContext.web.absoluteUrl + `/_api/web/lists/getbytitle('Countries')/items? $select=Id,Title`,
    SPHttpClient.configurations.v1)
    .then(response= > {
      return response.json();
    })
    .then(jsonResponse= > {
      return jsonResponse.value;
    }) as Promise<ICountryListItem[]>;
}
Copy the code

4. Test functionality

Find the directory where the file resides

gulp trust-dev-cert
Copy the code

gulp serve
Copy the code

The final result

The final product will be different from my diagram, because we only implemented one function to get the data, so you only have one getButton.