Office 365 – SharePoint SPFx – Creating a clickable zone

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&gt; 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.