In the first part of this serie we've learnt how to build a simple Raffle using Google Sheet ( https://dev.to/jagedn/build-a-raffle-with-google-sheet-5da )
In this second part we'll refactor some parts of the code and improve it with new features
Separate business logic from UI
Open the script editor (as explained in the previous post) and create a new html file called Client.html and another file called Dialog.html
Client.html
Paste this code into the Client.html
This will render the sidebar once the user select the Raffle option in the menu.
We'll show how many participants remains to participate and we'll build a list of buttons, once per prizze. In this way the admin can choose what prizze to raffle in every moment
As you can see, when the admin click a prizze button we'll call a remote function sending the prizze selected.
Dialog.html
Paste this code into the Dialog.html
This file is the template to render the winner of a prizze and let to choose an action (accept, denied, and not pressent)
Once the admin click one of buttons following actions happen:
- the dialog call a remote function to notify the action selected
- when the remote function is executed the dialog is closed.
For example if the winner accept the prizze the dialog will execute this:
google.script.run.withSuccessHandler(google.script.host.close).yepes(suertudoIdx,prizze)
where yepes is a remote function
Business
Paste this code into the Code.gs (replace all the code if you followed the previous post)
Prepare your Raffle
In a clean sheet write the participants and the prizzes following this screen:
Pay attention to use the same rows and columns or if you want to use different ranges remember to adjust them into the Code.gs file
See in action
In this video you can see the raffle in action
Top comments (0)