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.

Pieter Veenstra

Is your business still running on paper trails, sprawling Excel files, or ageing Access databases? There's a better way — and I can show you exactly what it looks like. I'm the Technical Director of Vantage 365, a Microsoft solutions consultancy working with clients across the UK, the Netherlands, and worldwide. For over 30 years I've been turning messy, manual business processes into clean, automated systems that save time, reduce errors, and give teams the visibility they need to make better decisions. You can contact me using contact@sharepains.com