Office 365 – SharePoint SPFx – Creating a clickable zone

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>
[/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.

Leave a Reply

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

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 4,912 other subscribers

Recent Posts

Archive

Thank you for visiting SharePains

%d bloggers like this: