This is the 25th day of my participation in the First Challenge 2022

React + Typescript is used to develop Webparts at work. I learned webparts from scratch.

Vs Code: Use code./ open the current project on terminal. If not, use command+shift +P ->shell command to install code

The drop – down box is generated by traversing

Declare the array TypeOfActivityChoices in the top state, and iterate over the generated option,getValue, to get the selected value.

public getValue = (event) = > {
        // Get the selected value
        console.log(event.target.value);
        this.setState({
            // The default value changes
            TypeOfActivityChoice: event.target.value
        })

    }

<span>Type of activity</span>
                                <select name='TypeOfActivityChoice' value={this.state.TypeOfActivityChoice} onChange={(e)= >Enclosing getValue (e)} > {/ / traverse option. This state. The TypeOfActivityChoices. The map ((ele, index) = > {return (<option key={index}>{ele}</option>)})}</select>
Copy the code

How to write a declared object

There are several, and I used this one:

var comfirm_GaoFlynt = { name: "Flynt Gao".Tele: "+ 86 123456".Email:  Location: "Tianjin",}Copy the code

Time date encountered pit

Want to generate a number, to establish the relationship between two tables, think about it, let’s use time

const timestamp = date.getFullYear() + (date.getMonth() + 1).toString() + date.getDate().toString() + date.getHours().toString() + date.getMinutes().toString() + date.getSeconds().toString();
Copy the code

I just want to remember that it starts from 0 like Java this month. Today is February 12. Give me a 1. One more thing:

  • Years of the date. GetYear ()
  • On the date. GetMonth ()
  • Date.getdate () this is not getDay(),day is the day of the week

SharePoint’s WebPart initialization is this method

The things that you want to use at the beginning of the page, you want to put in componentDidMount

public componentDidMount(): void {
       this.getCurrentUserProfile();
       // Set the default value when entering the page
       this.setPerson("Kyrie Gao");
       // Initialize time as the primary key
       this.setTimeStamp()
   }
Copy the code

SharePoint submits data to a List

The data that needs to be submitted is written to the request and then stored by calling the API.

// How to submit a form to another table
    public submitTable(event) {
        const request: any = {};
        request.body = JSON.stringify({
            // Form data
            hours: this.state.hours,
            vehicles: this.state.veh,
            amount: this.state.Amount,
            OData__x0025_: this.state.Percent,
            Staircase_x0025_: this.state.Staircase,
            Total: this.state.Total,
            lookupId: this.state.Id,
        });
        this.props.context.spHttpClient.post(
            this.props.context.pageContext.web.absoluteUrl + `/_api/web/lists/getbytitle('calculation')/items`,
            SPHttpClient.configurations.v1,
            request)
            .then(
                (response: SPHttpClientResponse) = > {
                    alert(response.status)
                })
        alert("SubmitTable completed")}Copy the code

Note that the names of items displayed in SharePoint lists are not the same as those in the program. For example, if there are Spaces in the List, it is ASCII, and () is also used, but it is too slow to check by yourself.

Find the List items in the SharePoint List

Same thing, call the API to look up the list item,

  • Getbytitle (‘ Calculation ‘) this is the name of the list
  • /items is used to query all list items without any arguments
  • ? $select=ACEId ? Select * from ‘where’; select * from ‘where’
  • Desc &$top this is in reverse order
public getListACE() {
        var getUrl = `The ${this.props.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('calculation')/items? $select=ACEId&$orderby=ACEId desc&$top`;
        this.props.context.spHttpClient
            .get(
                getUrl,
                SPHttpClient.configurations.v1
            )
            .then(
                (response: SPHttpClientResponse) = > {
                    return response.json();
                }
            ).then(
                (response) = > {
                    this.setState({ ACEId: response.value[0].ACEId })
                }
            ).then(
                () = > { alert(this.state.ACEId) }
            )
    }
Copy the code

Well, if we meet again in the future, we won’t need to look for needles in the sea. Instead, we will find information to solve the problem. After learning, we will update this article as a record.