Within this series of posts about SPFx I will go through the following steps:
- Displaying SharePoint data in the SPFx web part
- Creating a clickable zone within the web part
- Creating a form in an SPFx web part
- Displaying status update within the SPFx Web part
- Saving data from a form to SharePoint
- Updating fields within SharePoint (including choice, people, date and text fields)
In my previous post I created a web part that would spit out html for my data in SharePoint lists.
The html for these blue cards looks a bit like this:
[code lang=text]
<div class=”${styles.rowContainer}”>…</div>
[/code]
So I now want to make these cards clickable and generate a form. To do this I will need to add a click event to my ul element, I’m doing this by selecting the HTML using the id, so that is bid_${id}
[code lang=text]
var bidContainer: Element = this.domElement.querySelector(`#bid_${id}`);
[/code]
Now that we have the element that we want we can use <a href=”https://www.w3schools.com/jsref/met_document_addeventlistener.asp”>AddEventListener</a> to add the code that we want to run.
Looking at the example on W3 School:
[code lang=text]
document.addEventListener(“click”, function(){
document.getElementById(“demo”).innerHTML = “Hello World!”;
});
[/code]
Although it would still be possible to use the function as shown in the example, I personally would prefer to go for the more TypeScript equivalent of:
[code lang=text]
bidContainer.addEventListener(‘click’, (evt: Event) => {
this.completeForm(item);
}, false);
[/code]
Ok, so all I now have to do is create a method that will generate the form for me. I will address this in my next post where I will go through building up a form.