Create a coupon code manager application in less than 30 minutes
Tags: github, coupon, appwritehack, tutorial
Published: 2022-11-03 04:00:43

`<blockquote>In this article, you will walk through a beginning to finish guide to build an app for managing coupon codes which lets you create coupon codes , and then manage their descriptions, discounts as well as expiry date.</blockquote>
<p>This tutorial will help you on how to create a CRUD-based application that lets you create coupons for new customers, and edit or delete coupons that are already in use.&nbsp;We will use ToolJet to build this app and will be using Google Sheets as the data source.</p>

<h2>Prerequisites</h2>

<ul>
	<li><strong>ToolJet</strong>&nbsp;(<a href="https://github.com/ToolJet/ToolJet">https://github.com/ToolJet/ToolJet</a>): A free and open-source low-code platform that allows you to quickly build applications.&nbsp;Join&nbsp;<a href="https://tooljet.com/">here to sign up</a>.</li>
	<li><strong>Google Sheet</strong>: A Google Sheet with some already-existing data is preferable.&nbsp;You can copy the sheet that I have used&nbsp;<a href="https://docs.google.com/spreadsheets/d/1-TWBdgwbl-HrNooECdLXjvhWNly1qDgJYgt-dtpIpJg/edit?usp=sharing">in this article</a>.</li>
</ul>

<p>Here&#39;s a look at the app you&#39;ll build:</p>

<p>I&#39;ve broken the entire tutorial into the following sections:</p>

<ol>
	<li><strong><strong>Create User Interface</strong></strong></li>
	<li><strong><strong>Generate the questions</strong></strong></li>
	<li><strong><strong>Edit properties of widgets in conjunction with queries</strong></strong></li>
</ol>

<p>Let&#39;s jump into the ToolJet and click on&nbsp;<strong>Create new application&nbsp;</strong>button on the top-right corner of the dashboard. Once entered the app editor, you&#39;ll be asked to create a version - enter a version name and click&nbsp;<strong>Create&nbsp;</strong>.</p>

<p>Before we can begin to create an app, I&#39;ll take you through a brief tour of the ToolJet editor for apps:</p>

<h2>Develop the user interface</h2>

<p>We will begin by creating the user interface for our application.&nbsp;To create an interface for users, we&#39;ll use widgets such as containers, images and text, text input button and modal as well as tables.</p>

<p>Let&#39;s begin building this header by first building:</p>

<ul>
	<li>Bring a container onto the canvas, and alter its width and height in accordance with the dimensions, and then place it on top.</li>
	<li>Then click onto the component&#39;s&nbsp;<strong>widget&#39;s handle</strong>&nbsp;to open an&nbsp;<strong>the inspector panel</strong>&nbsp;located on the right sidebar.&nbsp;You can modify the properties and apply the appearance of any widget or component from the inspect panel.&nbsp;Click on&nbsp;<strong>styles</strong>and add an additional background color to the container.&nbsp;You can choose one of the colors from the selection or include an Hex-code.</li>
	<li>Then, let&#39;s move the&nbsp;<strong>picture</strong>&nbsp;widget into the container.&nbsp;This image widget to show an image of the company logo on our application.&nbsp;Click on the widget to open an inspect panel. In the&nbsp;<strong>URL</strong>&nbsp;field, type in the URL and the SVG logo or png.</li>
	<li>Lastly, place finally, drop a&nbsp;<strong>word</strong>&nbsp;widget into the container, to provide an app&#39;s title.&nbsp;In the inspect panel, in the text box, type the name of your app.&nbsp;It is also possible to use HTML tags to design the text.</li>
</ul>

<p>We are now done with the head of the application:</p>

<p>Let&#39;s design the main part of our application.&nbsp;This section we&#39;ll work primarily with buttons as well as modals and tables.&nbsp;The button is used to open an modal with an entry form for creating an entirely new coupon.&nbsp;The table will be used to show the coupons, edit and erase coupons.&nbsp;It will include two buttons for action that can be used to edit and deleting coupons.&nbsp;Now, let&#39;s construct the body.</p>

<ul>
	<li>Drag the&nbsp;<strong>container</strong>&nbsp;on the canvas just below the header, and adjust the width and height accordingly.&nbsp;Include a background of light to the container using The Styles within the inspector panel.</li>
	<li>Create an&nbsp;<strong>Text</strong>&nbsp;widget at the top-left of the container. Then in the text box, enter&nbsp;<code>the word &quot;All Coupons&quot;</code>.&nbsp;It can be styled by using HTML tags and change the color of the text in the styles tab.</li>
</ul>

<h4>UI for displaying coupons on the table</h4>

<ul>
	<li>Drag and drop tables and then edit the properties.
	<ul>
		<li>Set the value for the&nbsp;<strong>Table data</strong>&nbsp;field as to&nbsp;where the&nbsp;<strong>read</strong>&nbsp;is the name of the query that we will create later in this tutorial,&nbsp;<strong>data</strong>&nbsp;is the data that the query will hold.</li>
		<li>In the column section, include all necessary columns you wish to show on the table.&nbsp;It is important to include an identical key that you used for the column&#39;s name on the Google Sheet.</li>
		<li>Include two buttons for action for:&nbsp;<strong>Edit Coupon</strong>&nbsp;and&nbsp;<strong>Remove Coupon</strong>.</li>
		<li>The table can be styled with the widget by altering the radius of its border up to&nbsp;<code>10,</code>&nbsp;and also the border radius of the action button from&nbsp;<code>5.</code>.&nbsp;We&#39;ll modify the table after we finish making the queries.</li>
	</ul>
	</li>
</ul>

<h3>UI to create coupons</h3>

<ul>
	<li>Create an&nbsp;<strong>button</strong>&nbsp;at the top-right edge in the center of the box.&nbsp;Click on the button handle to open an inspect panel and edit propertiesof the button: Text is: Create Coupon Background color #705EC5 (hex) and Border radius 10.</li>
	<li>Drag the&nbsp;<strong>Modal</strong>&nbsp;below the table , and click on it to modify its properties.&nbsp;We&#39;ll include the Title in&nbsp;<code>create coupon</code>.</li>
	<li>Open the properties of the Create Coupon button and add a handler to the On-click events and an action that shows modal</li>
	<li>When you click on the button , it will open the modal you&#39;ve added.&nbsp;You are now able to drag and drop other widgets into this modal in order to create forms.&nbsp;The widgets below will be used for creating a page that can be used to create coupons:
	<ul>
		<li><strong>Text</strong>&nbsp;widgets that allow you to add titles to fields.&nbsp;ex: Coupon code, description, discount, free delivery etc.</li>
		<li><strong>text input</strong>&nbsp;widget that can be used to input coupon codes.&nbsp;It is also possible to use validation to only accept certain types of words in the coupon code.</li>
		<li><strong>Text area</strong>&nbsp;for description.</li>
		<li><strong>Numeric input</strong>&nbsp;widgets to set discounts as well as redemption limits.&nbsp;You can set the minimum value to&nbsp;<code>10,</code>&nbsp;as well as the maximum of&nbsp;<code>100</code>&nbsp;for discount, and&nbsp;<code>up to 10 for redemption limit.</code>&nbsp;up to&nbsp;<code>10,</code>&nbsp;for the redemption limit.</li>
		<li><strong>Radio button</strong>&nbsp;widget with no cost delivery.&nbsp;Set default value to&nbsp;<code>&quot;no&#39;|*|&gt;}</code>&nbsp;options, and labels for option values are set to&nbsp;.</li>
		<li><strong>Day picker</strong>&nbsp;to be redeemed before value.&nbsp;In default value field use momentjs to get current date&nbsp;.&nbsp;You can also add a validation to only accept dates in future: {{moment(components.datepicker3.value, &#39;DD/MM/YYYY&#39;).isSameOrAfter(moment().startOf(&#39;day&#39;)) ?&nbsp;True : &#39;Selected date is from the previous &#39;}}</li>
		<li><strong>Coupon creation</strong>&nbsp;button to create coupons that execute on&nbsp;<code>make</code>&nbsp;query and then close the modal.&nbsp;The button will have two event handlers for this button. The first one will trigger the create query and the closing the dialog.</li>
	</ul>
	</li>
</ul>

<h3>UI to edit the coupon form</h3>

<p>We will make use of the same form interface that we used to create coupon.&nbsp;We will choose the modal we created earlier, and then press&nbsp;<strong>Ctrl/Cmnd+D</strong>&nbsp;to duplicate the modal. Then, we will create a new modal using the same widgets that were within the one modal.<br />
We will include an event handler in this button.&nbsp;<strong>modify coupon</strong>&nbsp;button in the table to display the modal(modal2).</p>

<p>In&nbsp;<strong>modal2</strong>, for all the fields we will set the default value as&nbsp;(key is the column name in google sheet).&nbsp;This will automatically fill in the values of the form from the selected row of the table.<br />
You must change the message in the click from&nbsp;<strong>Create Coupon and Update Coupon</strong>&nbsp;and then change the handler&#39;s query between update and create.</p>

<p>&nbsp;</p>

<h2>Create the queries</h2>

<p>In order to use this app it is necessary to create 4 queries. the queries will be able to perform read create, update, and delete functions on the Google Sheet and Google Sheet, respectively.</p>

<p>&nbsp;</p>

<p>Go through the&nbsp;<a href="https://docs.tooljet.com/docs/data-sources/google.sheets">Docs</a>&nbsp;to learn about all the functions that are available in the Google Sheet datasource.</p>

<h3>Connecting data source</h3>

<p>Before we can make queries, it is necessary to join the source of data to our application.&nbsp;We will use Google Sheet as the data source.&nbsp;To connect to the data source, open the manager for data sources in the left-hand sidebar, and select the&nbsp;<code>+</code>&nbsp;button to add a source.&nbsp;Choose Google Sheet from the list of data sources that appear in the popup.<br />
In the next pop-up you&#39;ll be asked to select&nbsp;<strong>only read</strong>&nbsp;or&nbsp;<strong>Write or Read permission</strong>that you&#39;ll grant ToolJet.&nbsp;Choose Write or Read permission, and then click&nbsp;<strong>connect Google Sheet. Click Connect Google Sheet</strong>&nbsp;and authorize ToolJet and finally click the&nbsp;<strong>Save the data source</strong>button.</p>

<p>Let&#39;s get started on the research:</p>

<h3>Reading coupons</h3>

<p>After we&#39;ve successfully connected to our data source, we can perform a read operation to read the data from Google sheet and then display the results the data in our tableau.</p>

<ul>
	<li>The query window select the&nbsp;<code>+</code>&nbsp;button to create a new query. then select&nbsp;<code>the Google Sheet</code>&nbsp;in the data sources available.</li>
	<li>Choose the&nbsp;<code>the Read information from spreadsheet</code>&nbsp;choice on the&nbsp;<strong>Operation</strong>&nbsp;dropdown.</li>
	<li>Enter the&nbsp;<strong>spreadsheet ID</strong>.&nbsp;The spreadsheet&#39;s id will be on the page&#39;s URL. your Google sheet.&nbsp;ex: https://docs.google.com/spreadsheets/d/<em><strong>1tVwSon7Xp9HYOavlmx9oW_jKlZL2qrqGVImOmShtsVI</strong></em>/edit#gid=0<br />
	The bold string represents the spreadsheet ID.</li>
	<li>Name the request&nbsp;<code>read</code>&nbsp;by the field located on the top-right side of the panel for query.</li>
	<li>Click on go to the&nbsp;<strong>advanced</strong>&nbsp;tab, and then toggle on&nbsp;<code>the Run query when pages loads?</code>&nbsp;.&nbsp;This will execute this query each when the app is launched.</li>
	<li>Click the&nbsp;<strong>&quot;Create&quot;</strong>&nbsp;button in order to save your query.</li>
	<li>Click hit the&nbsp;<strong>button to run</strong>&nbsp;button beside the query in to the left of the panel.&nbsp;This will retrieve all current data available in the Google sheets.&nbsp;You can examine the information that the query returns using the inspector panel.</li>
</ul>

<p>&nbsp;</p>

<p>You can also click to the&nbsp;<strong>Preview</strong>button for a quick an overview of the information without running the query.</p>

<h3>Eliminating a coupon code</h3>

<p>Create a brand new Google sheet query in the similar to how we made that&nbsp;<code>Read</code>&nbsp;query.&nbsp;The name will be&nbsp;<code>delete</code>&nbsp;.</p>

<ul>
	<li>Select the&nbsp;<code>delete row from the spreadsheet</code>&nbsp;choice on the&nbsp;<strong>Operation</strong>&nbsp;dropdown.</li>
	<li>Input your&nbsp;<strong>GID</strong>&nbsp;which is mentioned in the spreadsheet&#39;s URL.</li>
	<li>In the&nbsp;<strong>delete row number</strong>&nbsp;field, we will enter:&nbsp;.&nbsp;The table&#39;s&nbsp;<strong>selectedRow</strong>&nbsp;property to find the row&#39;s number from the table, and then using&nbsp;<strong>the parseInt</strong>function for converting the string into a numerical value as it only accepts the value of a number.&nbsp;We add 2 to the value since the value returned by the property selectedRow is in relation the table&#39;s value in ToolJet however in Google Sheet it is&nbsp;<code>2</code>&nbsp;to the row&#39;s number.</li>
	<li>Click&nbsp;<strong>the Create button</strong>&nbsp;for the option to save your query.</li>
</ul>

<h3>Create a coupon</h3>

<p>Create a new Google Sheet query, and then choose&nbsp;<code>add data to an Excel spreadsheet</code>&nbsp;.&nbsp;Enter the&nbsp;<strong>spreadsheet&#39;s id</strong>and do not leave the&nbsp;<strong>sheet</strong>field empty (if you leave it blank, it will select the first sheet automatically).</p>

<p>Within the&nbsp;<strong>Rows</strong>&nbsp;field, type:<br />
<br />
The value of the&nbsp;<strong>the id</strong>&nbsp;key gets generated random with Javascript&nbsp;<strong>time findTime()</strong>&nbsp;method and for&nbsp;<strong>created_at</strong>we&#39;re using momentjs to calculate the actual date (i.e date of coupon&#39;s creation).&nbsp;In all other keys, we&#39;ll take the values from widgets within&nbsp;<strong>the modal1.</strong></p>

<h3>Updates to coupons</h3>

<p>Create your own query, choose&nbsp;<strong><strong>Google Sheets</strong></strong>&nbsp;for the data source and add the following data values:</p>

<ul>
	<li><strong><strong>Operation</strong></strong>:&nbsp;<code>Update data into spreadsheet</code>&nbsp;to update the information</li>
	<li><strong><strong>Spreadsheet</strong></strong>&nbsp;<strong><strong>ID</strong></strong>&nbsp;ID taken via the address Google Spreadsheet</li>
	<li>Where, Operator, and Value: For Where we will use the name which is the key of a column, for Operator we will use === (used to check equality), and for Value, we will use i.e the value of name from the selected row in table.</li>
	<li><strong><strong>Body</strong></strong>:</li>
</ul>

<p>We have now developed four queries needed to carry out the read create, update, and delete actions.</p>

<p>&nbsp;</p>

<p>You can include the event handler in the&nbsp;<strong><strong>Advanced</strong></strong>&nbsp;tab to execute an action when the query succeeds.&nbsp;For instance, you can create an event handler for every one of the&nbsp;<strong><strong>Append or Update</strong></strong>&nbsp;queries that will run in the&nbsp;<strong><strong>read</strong></strong>&nbsp;query. This will load the table with the latest data each when the user deletes, adds, or changes data.<br />
It is also possible to display an individual success message each time the query is successful by using on the Advanced tab.</p>

<h2><strong><strong>Change widget&#39;s properties, and then connect to queries</strong></strong></h2>

<h3>Place coupons on tables</h3>

<p>Click on table to open it&#39;s properties and in table data field enter:&nbsp;this will get the data from read query.&nbsp;Then add columns in the table:</p>

<ul>
	<li>Name of the column:&nbsp;<strong>Name</strong>, key:&nbsp;<strong>name</strong></li>
	<li>The column&#39;s name is&nbsp;<strong>the description</strong>&nbsp;and key&nbsp;<strong>description</strong></li>
	<li>Name of column: discount, key discount, Text color:{ cellValue &gt;= 30?&nbsp;&quot;green&quot;: &quot;red &#39;}} If the discount is higher than or equal to 30, it will appear green, and the other the color will be red.</li>
	<li>The column name is free_delivery key free_delivery, text color{: cellValue&gt; &#39;yes&#39;&nbsp;green&#39;:&#39;red&#39; &#39;}} If it is found that the service was free i.e yes, the color of text will be green or red.</li>
	<li>Name of column:&nbsp;<strong>redemption_limit</strong>, key:&nbsp;<strong>redemption_limit</strong></li>
	<li>Name of column:&nbsp;<strong>&quot;redeem_before</strong>&nbsp;and key word:&nbsp;<strong>redeem_before</strong></li>
	<li>Name of column:&nbsp;<strong>created_at</strong>, key:&nbsp;<strong>created_at</strong></li>
</ul>

<p>Change the settings of the two action buttons we designed before:</p>

<ol>
	<li><strong>Coupon edit:</strong>Add an event handler for this button to trigger an&nbsp;<strong>the on-click</strong>&nbsp;event to execute&nbsp;<strong>the show-modal</strong>&nbsp;action. Select&nbsp;<strong>the modal2</strong>.</li>
	<li><strong>Coupon to delete:</strong>Add a handler to this action button&nbsp;<strong>on-click</strong>&nbsp;occasion to&nbsp;<strong>execute an query</strong>&nbsp;action, and then choose&nbsp;<strong>the delete</strong>query.</li>
</ol>

<p>In&nbsp;<strong>the Options</strong>&nbsp;you can toggle the&nbsp;<strong>highlight button</strong>&nbsp;to display the selected rows in table.&nbsp;In loading state field, click on Fx and enter {{queries.create.isLoading || queries.update.isLoading ?&nbsp;true or false }}</p>

<h1>&nbsp;</h1>`

**Demo**

> Page demo: [Zon.Tools Coupon Codes](https://www.tenereteam.com/store/zontools)
> Created by the team building [TenereTeam.com](https://www.tenereteam.com/)