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.

1. 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.)

2. Add an action button for both the candidates and wire the buttons with the voting function we wrote in step #1 in dapp-lib.js.

3. Finally, let’s verify if our voting logic is working correctly. We will call the getCandidates() function again. The voteCount for 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:

packages
  - dapplib
    - src
      - lib
        -> dapp-lib.js

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 dapp-lib.js file.
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 <action-button>.

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 Blockchain.post() method.

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.

An <action-button> needs the following tags:

• Source: This should point to the source div from where data is to be extracted
• Action: This is the name of the function as we wrote in dapp-lib.js
• Method: GET/POST
• Fields: Properties under the data object that will be an input to function in dapp-lib.js
• 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 dapp-page.js.

In the above code snippet, we created a hidden <input> with pre-populated value of 0 because candidateId for Miss Kitty is 0. The data-field is set to candidateId because <action-button> will get its data from candidateId. Note that this is wrapped in a div named kitty-form.

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 dapp-page.js, near constructor(args).

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 value of data-field is 1, and the name of the source div is doggo-form.

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, console.table().

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.

Start building with DappStarter.

Stay tuned.