How To Display Smart Contract Voting Results On UI

#tutorial #beginners #javascript #blockchain

This article is a part of a series called Corporate Governance on Blockchain.

Part 1 of the series outlines the potential applications of blockchain in corporate governance and walks through how to set up your project to follow this series. Part 2 outlines the entire business logic of the shareholder voting smart contract and includes best practices for smart contract development.

In Part 3, we started weaving in the UI and learned how to read from the blockchain. In Part 4, we added voting functionality for both the candidates and learned how to write to the blockchain.

This part is going to be the final part of this series. Until now, we were simply logging the results on the developer console. In this blog, we will learn how to display the voting results on the UI.

We will display the results in the form of a table which will look something like this:

We will achieve this in three simple steps:

Create a hidden <action-button> that will be fired each time a user votes.
Create a placeholder table to display the results similar to the above drawn table.
Modify the showResults() function to display the table on the UI.

Let’s get started!

Step 1: Create a hidden `<action-button>`

This <action-button> will be hidden so that the user (voter) can’t see the current results of the vote before actually casting their vote.

Create this <action-button> in dapp-page.js within render() function. This button will be wrapped within a div with a unique ID. This div should also be hidden.

In the above code snippet, you can see that the hidden property of the <action-button> is set to true. This <action-button> also has a unique ID get-candidates. We set ID to get-candidates because this <action-button> is essentially fetching all data relevant to the candidates. The most important property of this <action-button> is the .click property. When this hidden<action-button> is clicked, getCandidates() method is called. We will take care of clicking this button by manipulating the DOM. This button will be clicked and getCandidates() method will be fired as soon as the user (voter) castes their vote.

Let’s create the getCandidates() method within dapp-page.js. This function should be near other custom made functions like showResults().

The function getCandidates() fetches data from the blockchain by invoking the smart contract. The received result is then presented in the form of the table with a unique ID candidate-lookup. This table will be created in Step 2.

Step 2: Create a placeholder table

We need to create a placeholder table so that we can populate it dynamically. You can style it in anyway you like. We will use Tailwind CSS.

We will add this placeholder table within the div we created in Step 1 with ID tally.

Now, we are all set to display the results. The data to be populated is ready to be loaded, and the placeholder is ready to be filled. All we need to do is display the div with ID tally. We need to take care that the hidden <action-button> is clicked before the div is loaded.

Step 3: Modify the `showResults()` function

Until now we were just logging the result in the developer console. Now, let’s manipulate the DOM and display the result in the form of a table.

In the showResults() function in dapp-page.js, make the following changes:

We are accessing the DOM by capturing the element by ID (elid). First, we are clicking on the hidden <action-button> to fire the getCandidates() function and then we are removing the hidden class from div with ID tally to make it visible in the DOM.