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.
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
Non-code example.
Related Articles
Related Examples
Did this help?
|
Thanks for your feedback!

Add to Cart Gallery
Let customers to add products to their cart

INTERMEDIATE

Hide and Show Elements
Hide and show elements in response to user interactions

BEGGINER

Hide and Show Elements
Hide and show elements in response to user interactions

BEGGINER