Custom UI with Zoho Creator Widgets

09.09.21 11:21 AM By Praveen Kumar J

“Good design is the most important way to differentiate ourselves from our competitors.” 

-Yun Jong Yong

Introduction

The Human mind is programmed to get attracted to the colors and ambience it perceives. Therefore apart from the app development, the app design also plays a vital role in keeping the user engaged and active in the application.

For creating a fascinating and pleasing effect to its design in the application, Zoho Creator has a tool called Widget. This will let you with additional features to enhance the front-end capabilities of your app.

Widget capabilities

Widgets enable you to:
  • Create and customize features that are specific to your app

  • Redefine the way your application interacts with your customers

  • Take complete control of the front-end design

  • Incorporate third party apps that cater to your Creator app                        

Use Case

Let us take a sample use case of the tourism industry.

Assuming you have a company which provides tourism packages to the customers and charge them according to the package they choose.

Before the customer decides to go for the package, they would like to see the details of the services that are provided in that particular package. It will help them in deciding on the package they would like to opt for from you.

For showing the different available packages, you would need to create a UI that is modern and looks more of your company's standard as well as for the good look and feel for the customers. See the sample shown below.



In this sample widget, the customer will be able to see the packages offered and click on the button to see the details of the relevant package. In addition, the widget can be enhanced to provide multiple UI Options like showing the relevant data in Card Formats, redirected to any pages,etc along with Payment Gateway integration too.

The widget option in Zoho Creator application will give you the flexibility to create a UI which is not only dynamic but also rich in look and feel.

How Widgets work in Zoho Creator?

Step 1:

The widget can be created from scratch by using HTML, CSS and Java Scripts with the required custom look and feel features, standards, logos, any organization's specific standard UI representations as well.

Step 2:

Using the Zoho Creator CLI (Command Line Interface), a project is created with all the supporting libraries. The created widget is placed inside the project folder.

The successfully created project is then packed as a zip file using the CLI.

Please note that any minor change you have to do requires the repetition of building and packaging the Widget. Hence, once you are done with all changes, you can deploy. Else, it would take a considerable amount of time to do and redo of the widget creation process.

Step 3:

Once the zip file is ready, it will be deployed into the Zoho Creator application.From there on, the widget will be hosted inside the Zoho Creator cloud.

You can deploy more than one widget as well for your application depending upon your Zoho Subscription plans.

Conclusion

Thus widget is one feature in Zoho Creator that will give you the freedom to attain the usability you are looking for without compromising on the UI look and feel of the application.

Praveen Kumar J