The FeedbackWebPart.ts file has the render method, which is at the core of user experience. We want there to be an icon, a text field with hint text, and a button. There are many ways to do that. This time we are building DOM elements by first inserting some HTML and then binding event handlers, and so on. In Chapter 9, Using React and Office UI Fabric React Components, and Chapter 10, Working with Different JavaScript Frameworks and 3rd Party Frameworks, you will see different approaches, such as React and various JavaScript libraries.

We start from the srcwebpartsfeedbackFeedback.module.scss file. Replace the contents of the file with the following simple CSS definition and save the file.

.input { 
    border: 1px solid gray; 
    width: 50%;     
    margin: 0px 10px 0px 10px; 
} 
.successIndicator { 
    border: 0px; 
} 

The reason we can get away with such simple CSS is that we are using classes from Office UI Fabric.

Next, open FeedbackWebPart.ts again and replace the render function with the following.

public render(): void { 
      this.domElement.innerHTML = 
        `<div> 
          <i class='ms-Icon ms-Icon--NoteForward' aria-hidden='true'></i> 
          <input type='text' class='${styles.input}' maxlenght='255' placeholder='${escape(this.properties.hintText)}' /> 
          <button type='button' class='ms-Button'><span class='ms-Button-label'>Send</span></button> 
          <p class='${styles.successIndicator}'></p> 
        </div>`; 
      this.setComment = this.setComment.bind(this); 
      const textInput: HTMLInputElement = this.domElement.getElementsByTagName("INPUT")[0] as HTMLInputElement; 
      textInput.addEventListener("keyup", this.setComment); 
      this.sendFeedback = this.sendFeedback.bind(this); 
      const button: HTMLButtonElement =  this.domElement.getElementsByTagName("BUTTON")[0] as HTMLButtonElement; 
      button.onclick = this.sendFeedback; 
  } 

Before diving into details, insert the following code fragment after the render method:

  private _commentText : string; // used to store comment text 
  private setComment(event: Event): void { 
    let srcElement: HTMLInputElement = event.srcElement as HTMLInputElement; 
    this._commentText = escape(srcElement.value); 
  } 
  private sendFeedback(): void { 
    alert("Input Text Value: "+ this._commentText); 
  } 

The render function starts by setting innerHTML of the web part to include a number of child elements.

It is important to know that the render function can be called multiple times during the life cycle of the page for example, when a user switches to or from edit mode, so we need to be careful not to create the elements multiple times. This version of the code does not try to keep track of whether the elements already exist or not. Because of this, if the user types something into the text field and then switches the page mode, the text field will be recreated. We let it be, because it is unlikely that it will cause any harm and, if it does, the user can use our web part to give us feedback on that!

The first element is the icon. As you can see, we are using the i tag to create it, so the magic lies in the class definition, which relies on Office UI Fabric.

<i class='ms-Icon ms-Icon--NoteForward' aria-hidden='true'></i>

The second element is the text field. This time we are using our own class. The maximum length is set to 255 because that is maximum that the Title column in the Feedback list can hold. The placeholder is read from hintText web part property. Remember to use the escape function, because this is user input.

<input type='text' class='${styles.input}' maxlength='255' placeholder='${escape(this.properties.hintText)}' />

For the button, we are using the Office UI Fabric Button component (https://dev.office.com/fabric-js/Components/Button/Button.html). It will look like a button in Office 365.

<button type='button' class='ms-Button'><span class='ms-Button-label'>Send</span></button>

The last element is a paragraph element, which we are using to show a message after the feedback has been successfully saved. We don't use it for error messages because SharePoint Framework has built-in functions for that, as you will soon see.

<p class='${styles.successIndicator}'></p>

The next section of the code binds this to our setComment function. The syntax of the operation looks weird, but what it does is ensure that this in setComment and render functions refer to same object--which is our web part. Then, we create an event listener to call setComment whenever a user types in this input field.

The binding in the sendFeedback function is done the same way as with setComment. We are assigning the this.sendFeedback function to an onclick event:

In addition to the render function, we made one private property for the web part object. It is called _commentText and is via the setComment function, which is called whenever the user types into the input field. In setComment, we get a reference to the input element by using an event parameter, so that we can read its value and assign it to _commentText. Instead of using event.srcElement we could have used the same getElementsByTagName function as we did previously. At this point, the sendFeedback function simply sets the text on our success indicator paragraph.