Within this series of posts about SPFx I will go through the following steps:

In my previous post I created a web part that would spit out html for my data in SharePoint lists.

Office 365 - SharePoint SPFx - Creating a clickable zone Microsoft Office 365, Microsoft SharePoint, SPFx or SharePoint Framework bids

The html for these blue cards looks a bit like this:

[code lang=text]
<div class=”${styles.rowContainer}”>…</div>

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}`);

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!”;

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) => {


}, false);

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.

By Pieter Veenstra

Business Applications and Office Apps & Services Microsoft MVP working as a Microsoft Productivity Principal Consultant at HybrIT Services. You can contact me using contact@veenstra.me.uk.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: