How to Implement Voting Functionality: From Backend to 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 this part, we will add voting functionality for both the candidates and learn how to write to the blockchain.
By the end of Part 3, our dapp was looking like this:
In this part, we will follow 3 steps to facilitate voting in our dapp.
- Create a voting function in our library,
dapp-lib.js. This function will be responsible for writing the votes to the blockchain. (Note: writing to the blockchain is analogous to calling a HTTP POST method and is not free.)
- Add an action button for both the candidates and wire the buttons with the voting function we wrote in step #1 in
- Finally, let’s verify if our voting logic is working correctly. We will call the
getCandidates()function again. The
voteCountfor both the candidates should now be different.
Step 1: Create a voting function in our library, dapp-lib.js
DappStarter has already generated
dapp-lib.js for this purpose. You can find it with this path:
As a good practice, I would suggest you write this function near the
getCandidates() function to make it easier to track which functions you’ve added to the
The format of this function will remain similar for all functions that intend to write to the blockchain.
This function will take
data as an input parameter. This input object will be received from
<action-button> which we will create in the next step in
dapp-page.js. Within this
data object, there will be a property called
candidateId which will also be received from
Under the hood,
dapp-page.js communicates with
blockchain.js internally to write to the blockchain. So from
dapp-page.js, all we have to do is call the
Our work in
dapp-lib.js is now done. Let’s move onto
dapp-page.js to add action buttons to the UI.
Step 2: Add an action button and wire them to the voting logic
<action-button> is a custom element that provides an interface to communicate with
dapp-lib.js to access functions of our smart contract.
<action-button> needs the following tags:
- Source: This should point to the source
divfrom where data is to be extracted
- Action: This is the name of the function as we wrote in
- Fields: Properties under the
dataobject that will be an input to function in
- Text: This is the text on the button visible to the user
- Class: CSS class of the button
- .Click: Function to call when this button is clicked.
First, let’s add an action button for our first candidate, Miss Kitty. Navigate to
render() function in
In the above code snippet, we created a hidden
<input> with pre-populated
candidateId for Miss Kitty is
data-field is set to
<action-button> will get its data from
candidateId. Note that this is wrapped in a
Let’s create the
showResults() function. This function will be called whenever
<action-button> is clicked. We will create this function in the beginning of
The name of this function will be
showResults(). We will call
getCandidates() function in
dapp-lib.js and display the results. We will modify this function in later parts when we will present the result in the UI.
Similarly, we will write an
<action-button> for Mr Doggo. Note that
1, and the name of the source
After successfully making these changes, your dapp should look like this:
Step 3: Verify that our voting logic is working correctly
We are almost done. Now we just have to verify that it’s working properly.
To check if everything is working as expected, click on the buttons in the UI. You can click on them multiple times. ;)
In the developer’s console, you should see something like this. We see a clean table instead of a nested JSON because we did not do
console.log() but instead,
The terminal should also reflect the transaction occurring on the blockchain. You will be able to see the transaction id, gas usage, block number, and block time. It should look like this:
In this article, we’ve learned how to add voting functionality for our candidates. As mentioned in Part 1, instead of voting for candidates, you can also choose to vote on agendas. You can customize your dapp in whichever way you like. We also learned how to write to the blockchain. We learned how to work with
<action-button>. These custom elements are one of the key magic features of DappStarter.
We are very close to finishing this dapp. In the next article, we will see how we can display results directly in the UI to make it easy for users to see the current tally for each candidate.