Change Order List Form - FastSharePoint

Creating a change order form by customizing a list’s forms provides a better experience and all of the benefits that SharePoint forms provide but it takes more time to implement. One advantage would be to send emails to stakeholders, approvers and the creator when the order status changes.

SPFX Form Customizer

To create a change order form using SharePoint’s SPFx (SharePoint Framework) form customizer, you’ll need to follow a few steps to set up your development environment, write the form, and implement the functionality to send an email upon form submission. Below, I’ll guide you through these steps.

Step 1: Set Up Your Development Environment

Install Node.js: Ensure you have Node.js installed, as it’s required for SharePoint development.
Install Yeoman and Gulp: These tools help you to build your SPFx project. Install them using npm:

   npm install -g yo gulp

Install SharePoint Generator: This generator helps in creating SharePoint client-side projects.

   npm install -g @microsoft/generator-sharepoint

Step 2: Create Your SPFx Project

Create a new directory for your project and navigate into it:

   mkdir my-spfx-project
   cd my-spfx-project

Run the Yeoman SharePoint Generator:

   yo @microsoft/sharepoint

Follow the prompts to set up your project. Choose “WebPart” as the component type, “React” as the framework, and provide all other necessary details.

Step 3: Implement the Change Order Form

Edit your web part’s React component to include a form. This will typically involve modifying the

render method of your component. Here’s a sample form:

   render() {
       return (
           <form onSubmit={this.handleSubmit}>
               <label>
                   Order ID:
                   <input type="text" name="orderId" onChange={this.handleChange} />
               </label>
               <label>
                   Description:
                   <textarea name="description" onChange={this.handleChange} />
               </label>
               <label>
                   Amount:
                   <input type="number" name="amount" onChange={this.handleChange} />
               </label>
               <input type="submit" value="Submit Change Order" />
           </form>
       );
   }

Add state management in the constructor for your component:

   constructor(props) {
       super(props);
       this.state = {
           orderId: '',
           description: '',
           amount: 0
       };

       this.handleChange = this.handleChange.bind(this);
       this.handleSubmit = this.handleSubmit.bind(this);
   }

   handleChange(event) {
       this.setState({[event.target.name]: event.target.value});
   }

   handleSubmit(event) {
       event.preventDefault();
       // Implement email sending logic here
   }

Step 4: Send an Email When the Form is Submitted

To send an email when the form is submitted, you can utilize the Microsoft Graph API, which allows email sending via SharePoint Online. You’ll need appropriate permissions and setup in Azure AD.

Add Microsoft Graph Client:

Install the Graph client library:

bash npm install @microsoft/microsoft-graph-client
Import and configure it in your SPFx solution.

Implement the email sending functionality in the handleSubmit method:

   handleSubmit(event) {
       event.preventDefault();
       const client = MicrosoftGraph.Client.init({
           authProvider: (done) => {
               done(null, this.props.context.msGraphClientFactory); // ensure correct scopes are configured in your SPFx package-solution.json
           }
       });

       const message = {
           subject: 'Change Order Request',
           body: {
               contentType: 'Text',
               content: `A change order has been requested for Order ID: ${this.state.orderId}`
           },
           toRecipients: [
               {
                   emailAddress: {
                       address: "approver@example.com" // Change to your approver’s email
                   }
               }
           ]
       };

       client.api('/users/{userId}/sendMail')
           .post({message: message}, (error, response) => {
               if (error) {
                   console.error(error);
                   return;
               }
               alert('Mail sent successfully!');
           });
   }

Step 5: Deploy and Test

Bundle and package your solution:

   gulp bundle --ship
   gulp package-solution --ship

Deploy the package to your SharePoint app catalog and test the web part on a SharePoint page.

This setup will give you a basic form with email functionality on submission. Adjust fields, styling, and functionality as needed for your specific requirements.