Create a coupon code manager application in less than 30 minutes

`

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.

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. We will use ToolJet to build this app and will be using Google Sheets as the data source.

Prerequisites

• ToolJet (https://github.com/ToolJet/ToolJet): A free and open-source low-code platform that allows you to quickly build applications. Join here to sign up.
• Google Sheet: A Google Sheet with some already-existing data is preferable. You can copy the sheet that I have used in this article.

Here's a look at the app you'll build:

I've broken the entire tutorial into the following sections:

1. Create User Interface
2. Generate the questions
3. Edit properties of widgets in conjunction with queries

Let's jump into the ToolJet and click on Create new application button on the top-right corner of the dashboard. Once entered the app editor, you'll be asked to create a version - enter a version name and click Create .

Before we can begin to create an app, I'll take you through a brief tour of the ToolJet editor for apps:

Develop the user interface

We will begin by creating the user interface for our application. To create an interface for users, we'll use widgets such as containers, images and text, text input button and modal as well as tables.

Let's begin building this header by first building:

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

We are now done with the head of the application:

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

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

UI for displaying coupons on the table

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

UI to create coupons

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

UI to edit the coupon form

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

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

 

Create the queries

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.

 

Go through the Docs to learn about all the functions that are available in the Google Sheet datasource.

Connecting data source

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

Let's get started on the research:

Reading coupons

After we'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.

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

 

You can also click to the Previewbutton for a quick an overview of the information without running the query.

Eliminating a coupon code

Create a brand new Google sheet query in the similar to how we made that Read query. The name will be delete .

• Select the delete row from the spreadsheet choice on the Operation dropdown.
• Input your GID which is mentioned in the spreadsheet's URL.
• In the delete row number field, we will enter: . The table's selectedRow property to find the row's number from the table, and then using the parseIntfunction for converting the string into a numerical value as it only accepts the value of a number. We add 2 to the value since the value returned by the property selectedRow is in relation the table's value in ToolJet however in Google Sheet it is 2 to the row's number.
• Click the Create button for the option to save your query.

Create a coupon

Create a new Google Sheet query, and then choose add data to an Excel spreadsheet . Enter the spreadsheet's idand do not leave the sheetfield empty (if you leave it blank, it will select the first sheet automatically).

Within the Rows field, type:

The value of the the id key gets generated random with Javascript time findTime() method and for created_atwe're using momentjs to calculate the actual date (i.e date of coupon's creation). In all other keys, we'll take the values from widgets within the modal1.

Updates to coupons

Create your own query, choose Google Sheets for the data source and add the following data values:

• Operation: Update data into spreadsheet to update the information
• Spreadsheet ID ID taken via the address Google Spreadsheet
• 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.
• Body:

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

 

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

Change widget's properties, and then connect to queries

Place coupons on tables

Click on table to open it's properties and in table data field enter: this will get the data from read query. Then add columns in the table:

• Name of the column: Name, key: name
• The column's name is the description and key description
• Name of column: discount, key discount, Text color:{ cellValue >= 30? "green": "red '}} If the discount is higher than or equal to 30, it will appear green, and the other the color will be red.
• The column name is free_delivery key free_delivery, text color{: cellValue> 'yes' green':'red' '}} If it is found that the service was free i.e yes, the color of text will be green or red.
• Name of column: redemption_limit, key: redemption_limit
• Name of column: "redeem_before and key word: redeem_before
• Name of column: created_at, key: created_at

Change the settings of the two action buttons we designed before:

1. Coupon edit:Add an event handler for this button to trigger an the on-click event to execute the show-modal action. Select the modal2.
2. Coupon to delete:Add a handler to this action button on-click occasion to execute an query action, and then choose the deletequery.

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

 

`

Demo

Page demo: Zon.Tools Coupon Codes
Created by the team building TenereTeam.com