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