How To Display Voting Results from Blockchain On UI
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.
And this was all!
Your dapp should now successfully display the current vote tally.
This was the final feature we wanted to add to this voting dapp.
If you have been following this series and made it till here, congratulations! 🎉
We hope you learned how to make an end-to-end full-stack voting dapp on the Ethereum blockchain. We will be coming up with more series with interesting use cases to build on the blockchain.
Stay tuned.
Build with DappStarter.
