Within this series of posts 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.


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

<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}

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:

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:

bidContainer.addEventListener('click', (evt: Event) => {

this.completeForm(item);

}, 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.

Advertisements