How to Implement Voting Functionality: From Backend to UI
Tags: blockchain, webdev, beginners, tutorial
Published: 2020-07-01 14:52:13


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

[Part 1](https://www.trycrypto.com/blog/how-blockchain-could-change-corporate-governance-for-the-better) 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](https://www.trycrypto.com/blog/part-2-voting-smart-contract) outlines the entire business logic of the shareholder voting smart contract and includes best practices for smart contract development.
 
In [Part 3](https://www.trycrypto.com/guides-and-tutorials/connecting-a-smart-contract-with-a-ui-and-reading-from-the-blockchain), 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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/832ndwxs7zbjzep741i6.png)

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.
 
{% gist https://gist.github.com/niharrs/8cf4135e9eef1f46bacbe4500183a3eb %}

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`.

{% gist https://gist.github.com/niharrs/ebc55b5e09141ee00b50c4c9dbf742ab %}

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.

{% gist https://gist.github.com/niharrs/64b727ef037fb2bd534e92a19a84b392 %}

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`.

{% gist https://gist.github.com/niharrs/bb9f3d952009b64fec4d0a107fa2c1fb %}

After successfully making these changes, your dapp should look like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sjqpm4jy6xgtr31yzvgu.png)

###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()`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o54hatnu0o92tku1lmpi.png)

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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c811k0vdu9f7yqlbdobq.png)

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](https://dappstarter.trycrypto.com/).

Stay tuned.