top of page
Hello Web Modules

Hello Web Modules

Get started writing backend code with Web Modules

Intermediate.png

Beginner

2K

Published:

December 18, 2022

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

In this example, we demonstrate how to write backend code that is easily callable from the frontend. We also demonstrate how you can add permissions to backend functions so they are only called by certain types of site visitors.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

Page Elements


This site contains two pages.

  • The SIMPLE page demonstrates a call to a backend function without any permissions set.

  • The PERMISSIONS page demonstrates several calls to backend functions with different permissions settings.


Both of these pages contain buttons to trigger the calls to the backend functions and text elements to display the responses returned from the backend.


We've also added a member login bar so that we can test the web modules permissions functionality with users who have different roles.


Code


The site contains the following frontend and backend code, organized here by the pages that use the code. Note that functions in the backend that will be called from the frontend must be exported using the `export` keyword.


SIMPLE page

  • Backend helloModule.jsw: The `rotatingGreeting()` backend function takes in a number and returns the corresponding greeting from the `hellos` array.

  • Page code: We begin by importing the `rotatingGreeting()` backend function. Then we call the function in a button handler and display its response. Note that backend functions always return a promise. Here we deal with the returned promise using the async/await syntax.

PERMISSIONS page

  • Backend helloModule.jsw: The `helloAnyone()`, `helloMember()`, and `helloAdmin()` functions all return a message as a string. Each of these functions is set with different permissions . The `helloAnyone()`function is set with the default permissions so that anyone can call it. The `helloMember()`function is set with member permissions so that only site members can call it. The `helloAdmin()`function is set with admin permissions so that only the site admin can call it.

  • Page code: We begin by importing the backend functions that are used on the page. For each button on the page we add an event handler that calls the corresponding backend function. We use a try/catch to make the function call and handle any errors that might occur due to insufficient permissions. You can test calling the functions with different user roles by logging in or out of the site with different accounts.

APIs We Used

API Link

Non-code example.

Related Articles

Article Link

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Image placeholder.png

Add to Cart Gallery

Let customers to add products to their cart

Intermediate.png

INTERMEDIATE

Image placeholder.png

Hide and Show Elements

Hide and show elements in response to user interactions

Begginer.png

BEGGINER

Image placeholder.png

Hide and Show Elements

Hide and show elements in response to user interactions

Begginer.png

BEGGINER

Anchor 2

This website was designed with Velo by Wix

bottom of page

We use cookies and similar technologies. You can opt-out by clicking 'Do Not Sell or Share My Personal Information' at the bottom of the page.