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.
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:
- 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.
<action-button> will be
hidden so that the user (voter) can’t see the current results of the vote before actually casting their vote.
render() function. This button will be wrapped within a
div with a unique ID. This
div should also be
In the above code snippet, you can see that the
hidden property of the
<action-button> is set to
<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
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.
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
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
<action-button> is clicked before the
div is loaded.
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.
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
<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.
Your dapp should now successfully display the current vote tally.
This was the final feature we wanted to add to this voting dapp.