Creating web applications to run your business can seem like quite the daunting task, especially when building applications from the ground-up taking hundreds of lines of code. However, the folks at Zoho have launched Zoho Creator: an easy to use database application maker.
With Zoho Creator, you can create code-free applications that run off of new or existing databases created in Excel or Access. For example, if you're trying to collect data on your customers online, but already have already collected data through other means, you can import that data to your new application and continue to build off of it. It's much like a more modern version of Microsoft Access' GUI builder for databases, with more power—the perfect tool for making your own custom web apps.
Creating Applications in Zoho Creator
Now that you have a bit of background on what Zoho Creator is, I'm going to show you how to use the suite to make applications for your office. To start, we'll take a look at the Application Gallery where you can use pre-made templates for your apps. Then, we'll look at creating apps from an Excel file, and finish with creating an app from scratch.
To start, head over to the Zoho Creator website and create an account by clicking on the red Sign Up button located towards the upper right-hand corner of the screen. Fill out the requested information, and you'll be brought to your Zoho Creator home page.
Look towards the upper right-hand corner of your homepage and click on the Create Application button. You'll then be redirected to the application creation page. If you look towards the left-hand side of the page you'll see three tabs labeled: Application Gallery, Import File, and From Scratch.
Creating Apps Using The Application Gallery
Select the Application Gallery tab and look towards the center of the window where you can view all available templates. For this example, we will be using the IT Asset Management template, so select that from the window and you'll be brought to an informational page on the template. Click the Install Now button to install the template.
You'll now be brought back to your Zoho Creator homepage. Look towards the center of the window at the newly created IT Asset Management app, hover over it with your cursor, and click on the app's name to access the application.
When in the application, you can add new hardware and software manually via the sidebar. However, you can also add data by importing Excel and Access files. To do this, click on the Add New Hardware button from the sidebar.
From the top of the window, look to the right of the Add New Hardware button and click on the Settings button. Click on the Import Data button from the drop-down menu. A popup window will appear.
Select the type of file you'll be uploading or pasting in using the File Type drop-down menu and select how you'd like to upload your file to the IT Asset Manager app. For this tutorial, I'll be uploading my Excel file from my hard drive.
Upload your file by clicking the Choose File button from the center of the page. Click Next to finish the upload.
You'll now be prompted to match columns on your spreadsheet to data types within the IT Assets App. For example, you can match an OS type column in the app to the Operating System data type in the application.
Creating Apps Using An Existing Access or Excel File
One of the best features in Zoho Creator is the fact that you can base your entire application around existing data from databases in Access or spreadsheets and Excel and add to them. To create a new app using existing data, click the Import File button from the new application window.
When in the Import File window, select how you'd like to import your data using the radio buttons to the right of the Choose data Location header. You can import your data from your local drive, from Google Drive, or by copying and pasting your spreadsheet.
You'll now be taken to a screen where you can label your rows and columns as well as assign each column a field type. Setting field types essentially tells Zoho Creator what will be stored in the selected field. For instance, set the field type to Email if the assigned column will be holding email addresses. When you're done naming fields, press the Finish button from the bottom of the window, and you'll be taken to a live version of your web app.
Though simple, you can now use your Zoho Creator web app to add content to your existing data base. From the center of the Creator window, you'll notice that your column names have been turned into text-boxes; filling out these text-boxes and pressing the Submit button will add content to their respective columns in Zoho Creator.
To view all data collected in your database, look to the top of the top of your web app and click on the "[App Name] Report" button. All data housed in your database, wether it be existing data or new data collected through Zoho Creator, will be shown in this screen.
If you'd like to embed your new Zoho Creator web app into your existing website, click the Settings button located to the right of your app's header title. From the drop-down menu, click on the Embed in your website button and copy-and-paste the shown HTML code into your website.
If you'd like to further customize your web app, look towards the upper right-hand side corner of the window and click the Edit this application button to be redirected to the app builder. I'll be covering the app builder in the next section of this tutorial: Creating Apps From Scratch.
Creating Apps From Scratch
Creating an application from scratch in Zoho Creator gives you the chance to start developing a web app without any previous data base, giving you a clean slate to collect new info. To do this, select From Scratch from the new application window, and give your new app a name from the Application Name text box.
You'll now be brought to an app builder screen. From the left-hand side of the screen, you'll notice a bank of fields. Choose the type of field you'd like to add to your app's form, and drag it towards the center of the window into your new form.
To customize your field, look to the left-hand side of the window at the field properties box. From this box, you can give your field a name, make it a mandatory field, set field permissions, and change a ton of other options. Additionally, you can customize your form as a whole by clicking on the Form Properties button from the upper right-hand corner of the window.
Editing Your Application's Workflow
If you'd like to further customize and add more functionality to your Zoho Creator apps, you can do so by adding form actions to your forms and fields. To add these actions to your app, look to the left-hand side of the app builder and click on the Workflow button.
From the right-hand side of the window, you'll see two headers: form actions and field actions. For this tutorial, I'll be showing you how to add a field action to your web app, though the process is universal for form and field actions.
To add a field action to your web app, look under the Field Actions header and find the name of the field you'd like to edit. You'll see two options: on user input and on update. Selecting "on user input" will edit what happens to the form when a user inputs data, while "on update" will affect the button after it's updated. Click on the option you'd like to edit.
Towards the center of the window you'll see a code editor with some pre-added commands. You can add more commands to your field by clicking-and-dragging commands from the list of commands that's located directly to the left of the code editor.
When you're ready to test your application, look towards the upper right-hand side of the window and click on the green Access This Application button. You can then test your application and view the inputted data like shown in the previous section of this tutorial.
That's It! You Can Now Create Apps For Your Business
And that's it: how to create database applications for your business. In the comments, let us know what you've made in Zoho Creator!
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post