How To Integrate A FlutterFlow App With A Backendless Backend (Complete Tutorial)
Tags: flutter, tutorial, database, api
Published: 2023-03-17 19:33:37

In this article, we are going to briefly introduce you to FlutterFlow, a low-code builder for mobile apps with a visual builder that lets you build cross-platform native apps with [Flutter](https://backendless.com/developers/#flutter).

We will also describe how to add a powerful and scalable Backendless backend to complement a FlutterFlow frontend.

Building a mobile or web app used to be an enormous undertaking. In the past, creating apps, or digital products as they are sometimes called, required lots of technical knowledge and many months – even years – of dedicated development time.

The [no-code/low-code movement](https://backendless.com/nocode-vs-low-code-vs-full-code-app-development-strategies/) has changed that. Now, with tools like Backendless and FlutterFlow, non-technical builders can learn and build apps in months or even weeks.

Ready to build beautiful and [scalable](https://backendless.com/superscaling-build-apps-that-grow-without-limit/) apps with Backendless and FlutterFlow? Then let’s get started.

Try Backendless For Free To Power Up Your FlutterFlow App
---------------------------------------------------------

Make your FlutterFlow app more powerful and scalable than ever by adding a Codeless Backendless backend and real-time database.

[Start Your 30-Day Free Trial](https://develop.backendless.com/registration)

Table of Contents
-----------------

[1\. What is FlutterFlow](#about-flutterflow)

[2\. Frontend vs Backend Development – and Why It Matters](#frontend-vs-backend)

[3\. Benefits of Adding a Backendless Backend and Database](#benefits-of-adding-backendless)

[4\. How to Integrate a FlutterFlow App with a Backendless Backend](#how-to-integrate)

[4.1 User Registration with Backendless](#user-registration)

[4.2 Login with Backendless](#user-login)

[4.3 Run a Query in Backendless](#run-query)

[4.4 Create a New Object in Backendless](#create-object)

[4.5 Edit an Existing Object in Backendless](#edit-object)

[4.6 Send an Email Using a Template in Backendless](#send-email-with-template)

[5\. Conclusion](#conclusion)

<a name="about-flutterflow"></a>What is FlutterFlow?
--------------------

[FlutterFlow](https://flutterflow.io/?utm_source=backendless&utm_medium=integration_guide) is a platform that allows users to easily create and develop mobile apps without coding knowledge. The platform offers a range of pre-built projects, including templates for different types of apps such as travel apps, which users can use as a starting point for their own project.

The app’s canvas provides users with a visual interface to drag and drop widgets to create the desired layout. Users can select from a range of widgets and modify their properties, such as text size and font. FlutterFlow’s widget tree allows users to see the architecture of their app, which can be composed of multiple pages.

FlutterFlow also offers a range of features that make it easy to add functionality to your app. Users can add actions to different items and access third-party databases via API.

The platform also includes an animation editor to add animations to different elements in the app. FlutterFlow’s customization options include setting up themes, selecting language options, and integrating with GitHub and other tools.

Overall, FlutterFlow’s user-friendly interface and variety of features make it a useful platform for anyone looking to create mobile app UIs without coding knowledge.

<a name="frontend-vs-backend"></a>Frontend vs Backend Development – and Why It Matters
----------------------------------------------------

From a high-level perspective, an application’s frontend is what the end user or customer will interact with. This may be an app on their mobile device, an interactive website, or a piece of software. The backend of an application is where long-term data is stored and much of the “heavy lifting” occurs.

An application’s speed and usability, and thus the user experience, is dependent on the processing power of the device where computations occur. Apps built with a beautiful frontend will get little traction if the app is painfully slow.

That is why it is recommended that as much of the logic as possible be stored on the backend. A typical server – including Cloud servers – contains far more processing power than a typical mobile phone, tablet, or laptop.

Similarly, the capabilities of the backend will be essential to growth and scale. Developers should be careful to disregard backend development because that is where the bulk of user experience failures occur.

A solid backend should not only include a database, but should offer the ability to create backend logic, build and access APIs, provide ample storage for files, images, and videos, and support messaging and notification systems.

<a name="benefits-of-adding-backendless"></a>Benefits of Adding a Backendless Backend and Database
-----------------------------------------------------

We’ve now established that a successful app requires much more than just an impressive user interface. Most apps will be supported by their backend, including servers (hosting), data storage, user management, and in many cases, logic.

The more capable an app’s backend, the more effective the app and the better the user experience.

FlutterFlow states over 350k creators are utilizing their Flutter-based low-code mobile app development platform, but for all the strengths the platform offers on the frontend, it’s backend capabilities – and particularly database features – are lacking.

FlutterFlow offers fantastic low-code UI development tools. For all the strengths the platform offers on the frontend, however, it’s backend capabilities are limited.

**That’s where Backendless comes in.**

With a powerful visual database, [huge assortment of pre-built APIs](https://backendless.com/docs/rest/index.html) and the capability to [build your own codeless APIs](https://backendless.com/features/api-services/codeless), Backendless easily fills in all the backend gaps in your FlutterFlow app.

For developers looking to build a long-term product, Backendless is critical. Backendless scales infinitely out of the box, meaning you never need to worry about your server infrastructure holding up under heavy traffic. Additionally, you can [host your app on Backendless’ cloud servers](https://backendless.com/pricing/backendless-cloud/) in the United States or European Union [(perfect for GDPR compliance)](https://backendless.com/european-union-hosting-cluster/) or [on your own on-premise servers](https://backendless.com/pricing/backendless-pro/).

From a feature standpoint, Backendless provides the most complete low-code backend capabilities on the market. In this article, we will discuss some of the basics – user authentication (registration and login) and database manipulation. However, that merely scratches the surface of what Backendless has to offer.

Other features your FlutterFlow app will benefit from include:

*   [A large pre-built API collection](https://backendless.com/docs/rest/index.html),
*   [Serverless hosting](https://backendless.com/what-is-serverless-computing/),
*   [Codeless logic builder](https://backendless.com/features/backendless-core/codeless),
*   [Cloud Code, timers, and event handlers](https://backendless.com/features/backendless-core/cloud-code/),
*   [Email and push notification support](https://backendless.com/features/#user-engagement),
*   [Team-driven development](https://backendless.com/features/build-faster/team-driven-development),
*   and much more.

<a name=how-to-integrate></a>How to Integrate a FlutterFlow App with a Backendless Backend
-------------------------------------------------------------

From this point on, we will be demonstrating how to integrate FlutterFlow with Backendless. In this article, we’re going to walk you through the process of integrating several basic backend functions into your FlutterFlow app (click to jump to each section):

*   [User Registration](#user-registration)
*   [User Login](#user-login)
*   [Query Your Database](#run-query)
*   [Create a New Data Object](#create-object)
*   [Edit or Delete an Existing Object](#edit-object)
*   [Send an Email Using a Template](#send-email-with-template)

To get started, you will need a [FlutterFlow account](https://flutterflow.io/create-account?utm_source=backendless) as well as a [Backendless account](https://develop.backendless.com/login) ([register here for free](https://develop.backendless.com/registration)).

_**Note:** The simplest way to access Backendless’ robust backend features is to build your frontend with Backendless as well. Be sure to [check out our no-code UI Builder](https://backendless.com/how-to-build-a-no-code-app-with-ui-builder/) to see how it stacks up to FlutterFlow._

<a name="user-registration"></a>User Registration
-----------------

Let’s start with User Registration.

User registration opens up the entire set of [user management](https://backendless.com/features/backendless-core/user-management) functions in Backendless. These include session management, password management, user roles, and relating users to other data objects.

User registration also opens up user engagement opportunities such as [email messaging](https://backendless.com/features/user-engagement/email-marketing), [push notifications](https://backendless.com/features/user-engagement/email-marketing), and [in-app messaging](https://backendless.com/features/backendless-core/pub-sub-messaging).

Firstly, let’s create a new page named Registration. Change the AppBar title text to User Registration so it describes the page logic.

Under the AppBar, add the Column component with two Text Fields (`EmailField` and `PasswordField`) and a Button (`RegisterButton`).

The Widget Tree will look like this:

[![FlutterFlow user registration Widget Tree](https://backendless.com/wp-content/uploads/2023/03/01-FlutterFlow-user-registration-Widget-Tree-600x595.png)](https://backendless.com/wp-content/uploads/2023/03/01-FlutterFlow-user-registration-Widget-Tree.png)

Toggle the Password Field setting for the `PasswordField` component:

[![FlutterFlow password field toggle](https://backendless.com/wp-content/uploads/2023/03/02-FlutterFlow-password-field-toggle-600x490.png)](https://backendless.com/wp-content/uploads/2023/03/02-FlutterFlow-password-field-toggle.png)

Also, add the disable options for the RegisterButton so it is inactive when the `EmailField` or the `PasswordField` are not filled:

[![Disable register button if password or email not filled](https://backendless.com/wp-content/uploads/2023/03/03-Disable-register-button-if-password-or-email-not-filled-442x600.png)](https://backendless.com/wp-content/uploads/2023/03/03-Disable-register-button-if-password-or-email-not-filled.png)

At this point, I’ll skip the description of setting up the components style, alignment, and paddings (you can change these at your own discretion). Finally, the page layout might look like this:

[![Example user registration page in FlutterFlow](https://backendless.com/wp-content/uploads/2023/03/04-Example-user-registration-page-in-FlutterFlow-335x600.png)](https://backendless.com/wp-content/uploads/2023/03/04-Example-user-registration-page-in-FlutterFlow.png)

So the UI is ready. Now let’s go to the registration part.

Let’s create a new POST API and name it `RegisterUserAPI`. Configure it with corresponding URL and headers.

[![Define Register User API call to Backendless in FlutterFlow](https://backendless.com/wp-content/uploads/2023/03/05-Define-Register-User-API-call-to-Backendless-in-FlutterFlow-600x294.png)](https://backendless.com/wp-content/uploads/2023/03/05-Define-Register-User-API-call-to-Backendless-in-FlutterFlow.png)

The URL value is [https://api.backendless.com/APP\_ID/REST\_API\_KEY/users/register](https://api.backendless.com/APP_ID/REST_API_KEY/users/register) (or [https://eu-api.backendless.com/APP\_ID/REST\_API\_KEY/users/register](https://eu-api.backendless.com/APP_ID/REST_API_KEY/users/register) for the EU cluster). Be sure to replace `APP_ID` and `REST_API_KEY` with your app’s values, found on your Backendless Backend Dashboard.

Also let’s create two variables – `email` and `password` of type String – that would be passed to the body of the [Backendless User Registration API](https://backendless.com/docs/rest/users_user_registration.html):

[![Create user registration API call variables in FlutterFlow](https://backendless.com/wp-content/uploads/2023/03/06-Create-user-registration-API-call-variables-in-FlutterFlow-600x214.png)](https://backendless.com/wp-content/uploads/2023/03/06-Create-user-registration-API-call-variables-in-FlutterFlow.png)

And then pass these variables to the request body:

[![Pass user registration variables to request body](https://backendless.com/wp-content/uploads/2023/03/07-Pass-user-registration-variables-to-request-body-600x261.png)](https://backendless.com/wp-content/uploads/2023/03/07-Pass-user-registration-variables-to-request-body.png)

Now you’re able to test the RegisterUserAPI from the Response & Test tab:

[![Test user registration API call from FlutterFlow to Backendless](https://backendless.com/wp-content/uploads/2023/03/08-Test-user-registration-API-call-from-FlutterFlow-to-Backendless-600x404.png)](https://backendless.com/wp-content/uploads/2023/03/08-Test-user-registration-API-call-from-FlutterFlow-to-Backendless.png)

As you can see, the API works correctly and the registered user object is returned with status 200 as expected.

Now we can move forward to the RegisterButton actions. Create a new On Tap action and configure an Action Chain that looks like:

[![On Tap Action Chain for user registration button in FlutterFlow](https://backendless.com/wp-content/uploads/2023/03/09-On-Tap-Action-Chain-for-user-registration-button-in-FlutterFlow-600x593.png)](https://backendless.com/wp-content/uploads/2023/03/09-On-Tap-Action-Chain-for-user-registration-button-in-FlutterFlow.png)

1\. Сall the RegisterUserAPI and pass the `email` and `password` values:

[![Call RegisterUserAPI](https://backendless.com/wp-content/uploads/2023/03/10-Call-RegisterUserAPI-390x600.png)](https://backendless.com/wp-content/uploads/2023/03/10-Call-RegisterUserAPI.png)

The result of the request will be set to the `registerUserResult` variable.

The `email` and `password` values are taken from the corresponding `EmailField` and `PasswordField` components:

[![Add email and password values to variables](https://backendless.com/wp-content/uploads/2023/03/11-Add-email-and-password-values-to-variables-304x600.png)](https://backendless.com/wp-content/uploads/2023/03/11-Add-email-and-password-values-to-variables.png)

2\. After the RegisterUserAPI is called, we receive its response. It could be successful (3) or failed (4).

3\. If the response is successful, an alert with a “User has been registered in Backendless. You can now login.” message is shown:

[![Set successful user registration message](https://backendless.com/wp-content/uploads/2023/03/12-Set-successful-user-registration-message-288x600.png)](https://backendless.com/wp-content/uploads/2023/03/12-Set-successful-user-registration-message.png)

4\. Otherwise, the failure alert is shown with the error text received in the `registerUserResult`:

[![Set failed user registration message with result from API call](https://backendless.com/wp-content/uploads/2023/03/13-Set-failed-user-registration-message-with-result-from-API-call-303x600.png)](https://backendless.com/wp-content/uploads/2023/03/13-Set-failed-user-registration-message-with-result-from-API-call.png)

We will only display the message from the error, not the whole object. This can be done by using the Custom JSON Path name:

[![Use custom JSON path to display only error message](https://backendless.com/wp-content/uploads/2023/03/14-Use-custom-JSON-path-to-display-only-error-message-355x600.png)](https://backendless.com/wp-content/uploads/2023/03/14-Use-custom-JSON-path-to-display-only-error-message.png)

5\. Finally, we can clear the `EmailField` and `PasswordField` components:

[![Clear email and password text components](https://backendless.com/wp-content/uploads/2023/03/15-Clear-email-and-password-text-components-600x477.png)](https://backendless.com/wp-content/uploads/2023/03/15-Clear-email-and-password-text-components.png)

The RegisterButton On Tap action is configured and we can now test how the User Registration works.

Return to the UI Builder page and press the “Run your app in Test Mode” button. Please note that the API won’t work in the Preview mode.

Wait until the test session is loaded, enter an email and password of a new user and click Register:

[![Test user registration in FlutterFlow](https://backendless.com/wp-content/uploads/2023/03/16-Test-user-registration-in-FlutterFlow-335x600.png)](https://backendless.com/wp-content/uploads/2023/03/16-Test-user-registration-in-FlutterFlow.png)

If the registration was successful, we will receive a message about success:

[![Successful user registration test](https://backendless.com/wp-content/uploads/2023/03/17-Successful-user-registration-test-338x600.png)](https://backendless.com/wp-content/uploads/2023/03/17-Successful-user-registration-test.png)

If an error occurred during registration (for example, an attempt was made to register an existing user), we will receive the following notification:

[![Failed user registration test message](https://backendless.com/wp-content/uploads/2023/03/18-Failed-user-registration-test-message-336x600.png)](https://backendless.com/wp-content/uploads/2023/03/18-Failed-user-registration-test-message.png)

With that, user registration is complete. Now let’s move to logging in the user.

<a name="user-login"></a>Login with Backendless
----------------------

For this section, we’ll skip some of the details that were previously described in the Register User section.

Create a new page named Login and change the AppBar title text to Login so it reflects the page logic.

Also, for this page we need two Input Field components (`LoginField` and `PasswordField`) and a `LoginButton`:

[![Example FlutterFlow user login Widget Tree](https://backendless.com/wp-content/uploads/2023/03/19-Example-FlutterFlow-user-login-Widget-Tree-586x600.png)](https://backendless.com/wp-content/uploads/2023/03/19-Example-FlutterFlow-user-login-Widget-Tree.png)

As we did with the Registration page, toggle the Password Field setting for the `PasswordField` component and add the disabled options for the `LoginButton` so it is inactive when `LoginField` or the `PasswordField` are not filled. These steps were also described in the previous section ([Registration page](#user-registration)).

Finally, the page layout might look like this:

[![Example user login page in FlutterFlow](https://backendless.com/wp-content/uploads/2023/03/20-Example-user-login-page-in-FlutterFlow-335x600.png)](https://backendless.com/wp-content/uploads/2023/03/20-Example-user-login-page-in-FlutterFlow.png)

So the UI is ready. Now let’s go to the login part.

Let’s create a new POST API and name it `LoginAPI`. Configure it with corresponding URL and headers:

[![Define user login API call from FlutterFlow to Backendless](https://backendless.com/wp-content/uploads/2023/03/21-Define-user-login-API-call-from-FlutterFlow-to-Backendless-600x294.png)](https://backendless.com/wp-content/uploads/2023/03/21-Define-user-login-API-call-from-FlutterFlow-to-Backendless.png)

The URL value is [https://api.backendless.com/APP\_ID/REST\_API\_KEY/users/login](https://api.backendless.com/APP_ID/REST_API_KEY/users/register) (or [https://eu-api.backendless.com/APP\_ID/REST\_API\_KEY/users/login](https://eu-api.backendless.com/APP_ID/REST_API_KEY/users/register) for the EU cluster). Be sure to replace `APP_ID` and `REST_API_KEY` with your app’s values, found on your Backendless Backend Dashboard.

Also create two variables – login and password of type String that would be passed to the body of the [Backendless Login API](https://backendless.com/docs/rest/users_login.html):

[![Define variables for user login API call](https://backendless.com/wp-content/uploads/2023/03/22-Define-variables-for-user-login-API-call-600x170.png)](https://backendless.com/wp-content/uploads/2023/03/22-Define-variables-for-user-login-API-call.png)

Pass these variables to the request body:

[![Pass user login variables into API request body](https://backendless.com/wp-content/uploads/2023/03/23-Pass-user-login-variables-into-API-request-body-600x219.png)](https://backendless.com/wp-content/uploads/2023/03/23-Pass-user-login-variables-into-API-request-body.png)

Now we’re able to test the LoginAPI from the Response & Test tab:

[![Test user login API call from FlutterFlow to Backendless](https://backendless.com/wp-content/uploads/2023/03/24-Test-user-login-API-call-from-FlutterFlow-to-Backendless-600x414.png)](https://backendless.com/wp-content/uploads/2023/03/24-Test-user-login-API-call-from-FlutterFlow-to-Backendless.png)

The API works correctly and the logged in user object is returned with status 200 as expected.

Now we can move forward to the `LoginButton` actions. Create a new On Tap action and configure an Action Chain that looks like this:

[![On Tap Action Chain for user login button](https://backendless.com/wp-content/uploads/2023/03/25-On-Tap-Action-Chain-for-user-login-button-600x543.png)](https://backendless.com/wp-content/uploads/2023/03/25-On-Tap-Action-Chain-for-user-login-button.png)

1\. Call the LoginAPI and pass the `login` and `password` values taken from the corresponding `LoginField` and `PasswordField`.

The result of the request will be set to the `loginResult` variable:

[![Add login values to LoginAPI and pass result to loginResult variable](https://backendless.com/wp-content/uploads/2023/03/26-Add-login-values-to-LoginAPI-and-pass-result-to-loginResult-variable-255x600.png)](https://backendless.com/wp-content/uploads/2023/03/26-Add-login-values-to-LoginAPI-and-pass-result-to-loginResult-variable.png)

2\. After the LoginAPI is called we receive its response. It could be successful (3) or failed (4).

3\. If the response is successful, an alert with a “User has been logged in to Backendless” message is shown:

[![Set successful login result message](https://backendless.com/wp-content/uploads/2023/03/27-Set-successful-login-result-message-283x600.png)](https://backendless.com/wp-content/uploads/2023/03/27-Set-successful-login-result-message.png)

4\. Otherwise, the failure alert is shown with the error text received in the `loginResult`:

[![Set failed login result message](https://backendless.com/wp-content/uploads/2023/03/28-Set-failed-login-result-message-299x600.png)](https://backendless.com/wp-content/uploads/2023/03/28-Set-failed-login-result-message.png)

5\. Finally, we can clear the `LoginField` and `PasswordField` components:

[![Clear email and password field values](https://backendless.com/wp-content/uploads/2023/03/29-Clear-email-and-password-field-values-600x481.png)](https://backendless.com/wp-content/uploads/2023/03/29-Clear-email-and-password-field-values.png)

Now the `LoginButton` On Tap action is configured and we can test the login.

Return to the UI Builder page and press the “Run your app in Test Mode” button. Please note that the API won’t work in the Preview mode.

Wait until the test session is loaded, enter the login and password values of the user and click Login:

[![Test user login in FlutterFlow](https://backendless.com/wp-content/uploads/2023/03/30-Test-user-login-in-FlutterFlow-334x600.png)](https://backendless.com/wp-content/uploads/2023/03/30-Test-user-login-in-FlutterFlow.png)

If the login was successful, we will receive a message about success:

[![Successful user login test message](https://backendless.com/wp-content/uploads/2023/03/31-Successful-user-login-test-message-334x600.png)](https://backendless.com/wp-content/uploads/2023/03/31-Successful-user-login-test-message.png)

If an error occurred (for example, an attempt was made with incorrect password), we will receive the following notification:

[![Failed user login test message](https://backendless.com/wp-content/uploads/2023/03/32-Failed-user-login-test-message-334x600.png)](https://backendless.com/wp-content/uploads/2023/03/32-Failed-user-login-test-message.png)

<a name="run-query"></a>Run a Query in Backendless
--------------------------

In this section, let’s walk through how to retrieve data from your database by running a query.

[Backendless Database](https://backendless.com/features/backendless-core/backendless-database) uses a SQL-based querying system. This approach allows you to easily query your data and display exactly what you want the user to see.

We will again create a simple page named `DataOperations` for demonstration.

Change the AppBar title text to Data Operations so it describes the page logic.

This time, firstly, let’s define a new GET API call to retrieve data from the Backendless Person table:

[![Define API call to retrieve data from Backendless Database](https://backendless.com/wp-content/uploads/2023/03/33-Define-API-call-to-retrieve-data-from-Backendless-Database-600x289.png)](https://backendless.com/wp-content/uploads/2023/03/33-Define-API-call-to-retrieve-data-from-Backendless-Database.png)

Name this API `PersonFind` and сonfigure it with corresponding URL: [https://api.backendless.com/APP\_ID/REST\_API\_KEY/data/Person](https://api.backendless.com/APP_ID/REST_API_KEY/users/register) (or [https://eu-api.backendless.com/APP\_ID/REST\_API\_KEY/data/Person](https://eu-api.backendless.com/APP_ID/REST_API_KEY/users/register) for the EU cluster). Be sure to replace `APP_ID` and `REST_API_KEY` with your app’s values, found on your Backendless Backend Dashboard.

Create a variable – `whereClause` of type String. Set the default value for this variable: `objectId IS NOT NULL`. This means that if we want to get all records from the table without any conditions, we’ll pass the `objectId IS NOT NULL` condition to the query parameters. Otherwise, the specified conditions will be passed:

[![Define variables for data retrieval API call](https://backendless.com/wp-content/uploads/2023/03/34-Define-variables-for-data-retrieval-API-call-600x126.png)](https://backendless.com/wp-content/uploads/2023/03/34-Define-variables-for-data-retrieval-API-call.png)

Pass the `whereClause` variable to the query Parameter named `where`:

[![Pass where clause variable to query parameter](https://backendless.com/wp-content/uploads/2023/03/35-Pass-where-clause-variable-to-query-parameter-600x168.png)](https://backendless.com/wp-content/uploads/2023/03/35-Pass-where-clause-variable-to-query-parameter.png)

The API call for the [Backendless Data Retrieval](https://backendless.com/docs/rest/data_search_with_where_clause.html) is ready to be tested:

[![Test data retrieval API call from FlutterFlow to Backendless Database](https://backendless.com/wp-content/uploads/2023/03/36-Test-data-retrieval-API-call-from-FlutterFlow-to-Backendless-Database-600x414.png)](https://backendless.com/wp-content/uploads/2023/03/36-Test-data-retrieval-API-call-from-FlutterFlow-to-Backendless-Database.png)

If the Person table exists in Backendless and has any records, they will be returned in the response. Otherwise, you’ll receive an error message saying that the corresponding table doesn’t exist. Notice that the `whereClause` value is set to `objectId IS NOT NULL`.

Please create the Person table in Backendless with the name (String) and age (Int) columns if it doesn’t exist.

As for our API, it is ready and we can move forward to the UI.

For the DataOperations page, create a new Page Variable `personRecords` of type List<JSON>. This can be done from the State Management tab of the page component:

[![Create new page variable for the Data Operations page](https://backendless.com/wp-content/uploads/2023/03/37-Create-new-page-variable-for-the-Data-Operations-page-518x600.png)](https://backendless.com/wp-content/uploads/2023/03/37-Create-new-page-variable-for-the-Data-Operations-page.png)

Add the Column component with the `ConditionField` (TextField), `FindButton` and a `PersonList` (ListView):

[![FlutterFlow Data Operations page Widget Tree](https://backendless.com/wp-content/uploads/2023/03/38-FlutterFlow-Data-Operations-page-Widget-Tree-593x600.png)](https://backendless.com/wp-content/uploads/2023/03/38-FlutterFlow-Data-Operations-page-Widget-Tree.png)

Now let’s configure the `PersonList` component. This component will present the Person objects retrieved from Backendless.

In the Generate Dynamic Children tab of the `PersonList`, set the `personList` variable with maximum amount of records = 100 (Backendless server sets the [maximum allowed value for the page size](https://backendless.com/docs/rest/data_data_paging.html) to 100 objects) and value from the `personRecords` variable, defined previously (we’ll populate this variable with records a little bit later):

[![Set personList variable with maximum records of 100](https://backendless.com/wp-content/uploads/2023/03/39-Set-personList-variable-with-maximum-records-of-100-422x600.png)](https://backendless.com/wp-content/uploads/2023/03/39-Set-personList-variable-with-maximum-records-of-100.png)

Configure the conditional visibility for the `PersonList`, so it doesn’t appear when there are no records:

[![Configure conditional visibility for the PersonList](https://backendless.com/wp-content/uploads/2023/03/40-Configure-conditional-visibility-for-the-PersonList-300x600.png)](https://backendless.com/wp-content/uploads/2023/03/40-Configure-conditional-visibility-for-the-PersonList.png)

Return to the UI Builder and add a Column with 3 Text components (`NameText`, `AgeText` and `ObjectIdText`) and a Divider in the `PersonList`:

[![Add column with 3 text components to PersonList](https://backendless.com/wp-content/uploads/2023/03/41-Add-column-with-3-text-components-to-PersonList.png)](https://backendless.com/wp-content/uploads/2023/03/41-Add-column-with-3-text-components-to-PersonList.png)

Configure the `NameText`, `AgeText`, and `ObjectIdText` components, so they represent the values from the `PersonList` items:

[![Configure Name component](https://backendless.com/wp-content/uploads/2023/03/42-Configure-Name-component-386x600.png)](https://backendless.com/wp-content/uploads/2023/03/42-Configure-Name-component.png)

[![Configure Age component](https://backendless.com/wp-content/uploads/2023/03/43-Configure-Age-component-385x600.png)](https://backendless.com/wp-content/uploads/2023/03/43-Configure-Age-component.png)

[![Configure ObjectId component](https://backendless.com/wp-content/uploads/2023/03/44-Configure-ObjectId-component-384x600.png)](https://backendless.com/wp-content/uploads/2023/03/44-Configure-ObjectId-component.png)

  

Finally, our UI layout will look like this:

[![Example Data Operations page layout in FlutterFlow](https://backendless.com/wp-content/uploads/2023/03/45-Example-Data-Operations-page-layout-in-FlutterFlow-335x600.png)](https://backendless.com/wp-content/uploads/2023/03/45-Example-Data-Operations-page-layout-in-FlutterFlow.png)

As you can see, there are several rows in the `PersonList`. Each row will correspond to the record from the `personRecords` variable.

The text from the `ConditionField` component will be used as the condition for querying data from Backendless when the `FindButton` is pressed. So let’s finally add the logic to the `FindButton` On Tap action:

[![On Tap Action Logic for Find button](https://backendless.com/wp-content/uploads/2023/03/46-On-Tap-Action-Logic-for-Find-button-600x524.png)](https://backendless.com/wp-content/uploads/2023/03/46-On-Tap-Action-Logic-for-Find-button.png)

1\. Call the PersonFind API and pass the `whereClause` value from the `ConditionField`. The result of the request will be set to the `findResult` variable:

[![Call PersonFind API with where clause value](https://backendless.com/wp-content/uploads/2023/03/47-Call-PersonFind-API-with-where-clause-value-279x600.png)](https://backendless.com/wp-content/uploads/2023/03/47-Call-PersonFind-API-with-where-clause-value.png)

2\. After the PersonFind API is called we receive its response. It could be successful (3) or failed (4).

3\. If the response is successful, we set the response array to the `personRecords` variable:

[![Set successful response array to personRecords variable](https://backendless.com/wp-content/uploads/2023/03/48-Set-successful-response-array-to-personRecords-variable-374x600.png)](https://backendless.com/wp-content/uploads/2023/03/48-Set-successful-response-array-to-personRecords-variable.png)

4\. If the server returned an error trying to retrieve objects (e.g. the Person table doesn’t exist), the failure alert is shown with the error text received in the `findResult`:

[![Set API call failure message alert](https://backendless.com/wp-content/uploads/2023/03/49-Set-API-call-failure-message-alert-296x600.png)](https://backendless.com/wp-content/uploads/2023/03/49-Set-API-call-failure-message-alert.png)

Now the `FindButton` On Tap action is configured and we can move to the tests.

Return to the UI Builder page and press the “Run your app in Test Mode” button. Please note that the API won’t work in the Preview mode.

Wait until the test session is loaded, enter (optionally) the condition value and click Find:

[![Test Data Operations page in FlutterFlow](https://backendless.com/wp-content/uploads/2023/03/50-Test-Data-Operations-page-in-FlutterFlow-335x600.png)](https://backendless.com/wp-content/uploads/2023/03/50-Test-Data-Operations-page-in-FlutterFlow.png)

If the API call was successful, we will see a list of records, retrieved from Backendless:

[![Successful Data Operations page test result](https://backendless.com/wp-content/uploads/2023/03/51-Successful-Data-Operations-page-test-result-336x600.png)](https://backendless.com/wp-content/uploads/2023/03/51-Successful-Data-Operations-page-test-result.png)

If an error occurred (e.g. using invalid condition), we will receive the following notification:

[![Failed Data Operations page API call test result](https://backendless.com/wp-content/uploads/2023/03/52-Failed-Data-Operations-page-API-call-test-result-332x600.png)](https://backendless.com/wp-content/uploads/2023/03/52-Failed-Data-Operations-page-API-call-test-result.png)

As the data retrieval is ready, we can now move on to object creation.

<a name="create-object"></a>Create New Object in Backendless
--------------------------------

In this section, we’ll take a look at how to save data into our Backendless Database from FlutterFlow.

Create a new page named `PersonPage`. This page will contain logic to create (and later, edit) a Person object.

Return to the DataOperations page and add a new IconButton named `CreatePersonButton`:

[![Add button to create new object on Data Operations page](https://backendless.com/wp-content/uploads/2023/03/53-Add-button-to-create-new-object-on-Data-Operations-page-600x449.png)](https://backendless.com/wp-content/uploads/2023/03/53-Add-button-to-create-new-object-on-Data-Operations-page.png)

This button will navigate us to the `PersonPage` without any parameters – just for creating a new Person.

Also, we’ll clear a `personRecords` variable here, so the On Tap action has this behavior:

[![On Tap action to clear personRecords variable](https://backendless.com/wp-content/uploads/2023/03/54-On-Tap-action-to-clear-personRecords-variable-549x600.png)](https://backendless.com/wp-content/uploads/2023/03/54-On-Tap-action-to-clear-personRecords-variable.png)

[![Action to clear personRecords variable](https://backendless.com/wp-content/uploads/2023/03/55-Action-to-clear-personRecords-variable-421x600.png)](https://backendless.com/wp-content/uploads/2023/03/55-Action-to-clear-personRecords-variable.png)

Let’s go back to the PersonPage and create a Page variable – `titleText` of type String:

[![Create titleText Page variable](https://backendless.com/wp-content/uploads/2023/03/56-Create-titleText-Page-variable-600x517.png)](https://backendless.com/wp-content/uploads/2023/03/56-Create-titleText-Page-variable.png)

Change the AppBar style to the one that contains the back button (so you can return to the previous page) and set the AppBar title to the `titleText` variable.

For the page, add an On Page Load action and set the `titleText` variable value to “Create a new Person” (this title can be different in the future, but we’ll return to it in the following sections):

[![Add On Page Load action and set titleText variable value](https://backendless.com/wp-content/uploads/2023/03/57-Add-On-Page-Load-action-and-set-titleText-variable-value-383x600.png)](https://backendless.com/wp-content/uploads/2023/03/57-Add-On-Page-Load-action-and-set-titleText-variable-value.png)

Also, for this page we need two Input Field components (`NameField` and `AgeField`) and a `SaveButton`:

[![Add two input field components and Save button](https://backendless.com/wp-content/uploads/2023/03/58-Add-two-input-field-components-and-Save-button-529x600.png)](https://backendless.com/wp-content/uploads/2023/03/58-Add-two-input-field-components-and-Save-button.png)

Modify the disabled state option for the Save button (it should be disabled when the `NameField` or `AgeField` is not filled):

[![Modify disabled state option for Save button](https://backendless.com/wp-content/uploads/2023/03/59-Modify-disabled-state-option-for-Save-button-382x600.png)](https://backendless.com/wp-content/uploads/2023/03/59-Modify-disabled-state-option-for-Save-button.png)

Now it’s time to add a new POST API to create a new Person. Configure it as shown below:

[![Define create new person object API call from FlutterFlow to Backendless Database](https://backendless.com/wp-content/uploads/2023/03/60-Define-create-new-person-object-API-call-from-FlutterFlow-to-Backendless-Database-600x289.png)](https://backendless.com/wp-content/uploads/2023/03/60-Define-create-new-person-object-API-call-from-FlutterFlow-to-Backendless-Database.png)

The URL value is [https://api.backendless.com/APP\_ID/REST\_API\_KEY/data/Person](https://api.backendless.com/APP_ID/REST_API_KEY/users/register) (or [https://eu-api.backendless.com/APP\_ID/REST\_API\_KEY/data/Person](https://eu-api.backendless.com/APP_ID/REST_API_KEY/users/register) for the EU cluster). Be sure to replace `APP_ID` and `REST_API_KEY` with your app’s values, found on your Backendless Backend Dashboard.

Also create two variables – `name` of type String and `age` of type Int – that will be passed to the body of the [Backendless Saving Single Object API](https://backendless.com/docs/rest/data_single_object_create.html):

[![Create name and age variables](https://backendless.com/wp-content/uploads/2023/03/61-Create-name-and-age-variables-600x216.png)](https://backendless.com/wp-content/uploads/2023/03/61-Create-name-and-age-variables.png)

Pass these variables to the request body:

[![Pass variables to request body](https://backendless.com/wp-content/uploads/2023/03/62-Pass-varaibles-to-request-body-600x220.png)](https://backendless.com/wp-content/uploads/2023/03/62-Pass-varaibles-to-request-body.png)

Now the PersonSave API is ready to be tested. Go to the Response & Test tab, enter the test `name` and `age` values and run the API:

[![Test PersonSave API call in FlutterFlow](https://backendless.com/wp-content/uploads/2023/03/63-Test-PersonSave-API-call-in-FlutterFlow-600x344.png)](https://backendless.com/wp-content/uploads/2023/03/63-Test-PersonSave-API-call-in-FlutterFlow.png)

The API works correctly and the created Person object is returned with status 200 as expected.

Now we can move forward to the `SaveButton` actions. Create a new On Tap action and configure an Action Chain that looks like this:

[![On Tap Action Chain for Save button](https://backendless.com/wp-content/uploads/2023/03/64-On-Tap-Action-Chain-for-Save-button-579x600.png)](https://backendless.com/wp-content/uploads/2023/03/64-On-Tap-Action-Chain-for-Save-button.png)

1\. Call the PersonSave API and pass the `name` and `age` values from the `NameField` and `AgeField`. The result of the request will be set to the `saveResult` variable:

[![Pass name and age values into saveResult variable](https://backendless.com/wp-content/uploads/2023/03/65-Pass-name-and-age-values-into-saveResult-variable-379x600.png)](https://backendless.com/wp-content/uploads/2023/03/65-Pass-name-and-age-values-into-saveResult-variable.png)

2\. After the SaveAPI is called we receive its response. It could be successful (3) or failed (5).

3\. If the response is successful, we’ll see an alert with a success message “Object was successfully saved in Backendless. You will be redirected to the Data Operations page.”:

[![Set successful API call response message](https://backendless.com/wp-content/uploads/2023/03/66-Set-successful-API-call-response-message-285x600.png)](https://backendless.com/wp-content/uploads/2023/03/66-Set-successful-API-call-response-message.png)

4\. After the alert is closed, we are automatically redirected back to the Data Operations page.

5\. If any error occurred while saving a new Person object, an error alert will appear with the error text received in the `saveResult`. As usual, we will display only the message from the error (as we did in the previous section), not the whole object. This can be done by using the Custom JSON Path name:

[![Set failed API call error message](https://backendless.com/wp-content/uploads/2023/03/67-Set-failed-API-call-error-message-298x600.png)](https://backendless.com/wp-content/uploads/2023/03/67-Set-failed-API-call-error-message.png)

6\. Finally, we clear the `NameField` and `AgeField` components:

[![Clear name and age text fields](https://backendless.com/wp-content/uploads/2023/03/68-Clear-name-and-age-text-fields-600x486.png)](https://backendless.com/wp-content/uploads/2023/03/68-Clear-name-and-age-text-fields.png)

Now the `SaveButton` On Tap action is configured and we can move to the tests.

Return to the UI Builder, select the DataOperations page, and press the “Run your app in Test Mode” button. Please note that the API won’t work in the Preview mode.

Wait until the test session is loaded, enter the condition, review the records matching the criteria, and click the Add New Person button to open the PersonPage:

[![Load Data Operations page in FlutterFlow tester](https://backendless.com/wp-content/uploads/2023/03/69-Load-Data-Operations-page-in-FlutterFlow-tester-333x600.png)](https://backendless.com/wp-content/uploads/2023/03/69-Load-Data-Operations-page-in-FlutterFlow-tester.png)

Fill the Name and Age in the corresponding fields and click Save:

[![Test Create new person page](https://backendless.com/wp-content/uploads/2023/03/70-Test-Creat-new-person-page-337x600.png)](https://backendless.com/wp-content/uploads/2023/03/70-Test-Creat-new-person-page.png)

If everything is ok, the success message will appear:

[![Successful object creation in Backendless Database via API](https://backendless.com/wp-content/uploads/2023/03/71-Successful-object-creation-in-Backendless-Database-via-API-335x600.png)](https://backendless.com/wp-content/uploads/2023/03/71-Successful-object-creation-in-Backendless-Database-via-API.png)

You can now press the Back button to return to the previous DataOperations page. Enter the condition again and you’ll see a newly created record:

[![Review newly created person object on Data Operations page](https://backendless.com/wp-content/uploads/2023/03/72-Review-newly-created-person-object-on-Data-Operations-page-336x600.png)](https://backendless.com/wp-content/uploads/2023/03/72-Review-newly-created-person-object-on-Data-Operations-page.png)

Now when we’ve finished with creating a new object in Backendless, we can move forward to editing the existing objects.

Take a look at the next section to learn how to update or delete an object.

<a name="edit-object"></a>Edit an Existing Object in Backendless
--------------------------------------

Now that we’ve learned out how to create a new object in Backendless, it will be easier to understand process of object editing. We can use the existing PersonPage for this.

Firstly, let’s add the `personObject` to the PersonPage parameters:

[![Add personObject to Person Page parameters](https://backendless.com/wp-content/uploads/2023/03/73-Add-personObject-to-Person-Page-parameters-550x600.png)](https://backendless.com/wp-content/uploads/2023/03/73-Add-personObject-to-Person-Page-parameters.png)

This parameter will be passed from the Data Operations page and will be used to identify an object we want to update or delete.

Return to the DataOperations page, select the `PersonList` Column and add the On Tap action:

[![On Tap action for Person List column on Data Operations page](https://backendless.com/wp-content/uploads/2023/03/74-On-Tap-action-for-Person-List-column-on-Data-Operations-page-600x539.png)](https://backendless.com/wp-content/uploads/2023/03/74-On-Tap-action-for-Person-List-column-on-Data-Operations-page.png)

1\. Navigate to the PersonPage. Here we’ll pass the selected `PersonList` Item as the `personObject`:

[![Pass Person List item to Person Page as personObject](https://backendless.com/wp-content/uploads/2023/03/75-Pass-Person-List-item-to-Person-Page-as-personObject-305x600.png)](https://backendless.com/wp-content/uploads/2023/03/75-Pass-Person-List-item-to-Person-Page-as-personObject.png)

2\. Clear the `personRecords` list:

[![Clear personRecords list](https://backendless.com/wp-content/uploads/2023/03/76-Clear-personRecords-list-429x600.png)](https://backendless.com/wp-content/uploads/2023/03/76-Clear-personRecords-list.png)

We’re finished with the DataOperations page and now can work directly with the PersonPage.

On the PersonPage, change the On Page Load action to follow the condition:

[![Change On Page Load action on Person Page](https://backendless.com/wp-content/uploads/2023/03/77-Change-On-Page-Load-action-on-Person-Page-600x413.png)](https://backendless.com/wp-content/uploads/2023/03/77-Change-On-Page-Load-action-on-Person-Page.png)

1\. Check if the `personObject` is set.

2\. If the `personObject` is set on page, set the `titleText` value to “Edit Person”:

[![Set titleText value to Edit Person](https://backendless.com/wp-content/uploads/2023/03/78-Set-titleText-value-to-Edit-Person-282x600.png)](https://backendless.com/wp-content/uploads/2023/03/78-Set-titleText-value-to-Edit-Person.png)

3\. Otherwise, set the `titleText` value to “Create a new Person”:

[![Set titleText value to Create a new Person](https://backendless.com/wp-content/uploads/2023/03/79-Set-titleText-value-to-Create-a-new-Person-275x600.png)](https://backendless.com/wp-content/uploads/2023/03/79-Set-titleText-value-to-Create-a-new-Person.png)

For the `NameField` and `AgeField` set the Initial Values if the `personObject` is set:

[![Set name initial value if personObject is set](https://backendless.com/wp-content/uploads/2023/03/80-Set-name-initial-value-if-personObject-is-set-600x546.png)](https://backendless.com/wp-content/uploads/2023/03/80-Set-name-initial-value-if-personObject-is-set.png)

[![Set age initial value if personObject is set](https://backendless.com/wp-content/uploads/2023/03/81-Set-age-initial-value-if-personObject-is-set-600x541.png)](https://backendless.com/wp-content/uploads/2023/03/81-Set-age-initial-value-if-personObject-is-set.png)

Also add the Icon Button (`DeleteButton`) on the PersonPage, so finally the page may look like this:

[![Person Page with dynamic text and save and delete buttons](https://backendless.com/wp-content/uploads/2023/03/82-Person-Page-with-dynamic-text-and-save-and-delete-buttons-333x600.png)](https://backendless.com/wp-content/uploads/2023/03/82-Person-Page-with-dynamic-text-and-save-and-delete-buttons.png)

Now let’s add a new PersonUpdate PUT API call. Configure it as shown below:

[![Define PersonUpdate PUT API call in FlutterFlow](https://backendless.com/wp-content/uploads/2023/03/83-Define-PersonUpdate-PUT-API-call-in-FlutterFlow-600x292.png)](https://backendless.com/wp-content/uploads/2023/03/83-Define-PersonUpdate-PUT-API-call-in-FlutterFlow.png)

The URL value is [https://api.backendless.com/APP\_ID/REST\_API\_KEY/data/Person/\[objectId](https://api.backendless.com/APP_ID/REST_API_KEY/data/Person/[objectId)\] (or [https://eu-api.backendless.com/APP\_ID/REST\_API\_KEY/data/Person/\[objectId](https://eu-api.backendless.com/APP_ID/REST_API_KEY/data/Person/[objectId)\] for the EU cluster). Be sure to replace `APP_ID` and `REST_API_KEY` with your app’s values, found on your Backendless Backend Dashboard.

Create an `objectId` variable of type String that will be passed as a dynamic parameter to the [Backendless Update Single Object API](https://backendless.com/docs/rest/data_single_object_update.html) url. Also, create two variables – `name` of type String and `age` of type Int – that will be passed to the body of the request. These are the parameters we would have an ability to change in the Person object:

[![Create name, age, and objectId variables](https://backendless.com/wp-content/uploads/2023/03/84-Create-name-age-and-objectId-variables-600x218.png)](https://backendless.com/wp-content/uploads/2023/03/84-Create-name-age-and-objectId-variables.png)

Pass the `name` and `age` variables to the request body:

[![Pass variables to request body](https://backendless.com/wp-content/uploads/2023/03/85-Pass-variables-to-request-body-600x220.png)](https://backendless.com/wp-content/uploads/2023/03/85-Pass-variables-to-request-body.png)

Now the PersonUpdate API is ready to be tested. Go to the Response & Test tab, enter test `name`, `age`, and `objectId` values (choose any Person object in your database to test with) and run the API:

[![Test PersonSave API call in FlutterFlow](https://backendless.com/wp-content/uploads/2023/03/86-Test-PersonSave-API-call-in-FlutterFlow-600x339.png)](https://backendless.com/wp-content/uploads/2023/03/86-Test-PersonSave-API-call-in-FlutterFlow.png)

The API works correctly and the updated Person object is returned with status 200 as expected. Notice that `objectId` value is the id of the existing object in Backendless Database.

Now we can move forward to the SaveButton actions. Edit the existing On Tap action to look like this:

[![Save button On Tap actions](https://backendless.com/wp-content/uploads/2023/03/87-Save-button-On-Tap-actions-563x600.png)](https://backendless.com/wp-content/uploads/2023/03/87-Save-button-On-Tap-actions.png)

1\. Check if the `personObject` is set.

2\. If the `personObject` is set, call the PersonUpdate API:

[![Call PersonUpdate API](https://backendless.com/wp-content/uploads/2023/03/88-Call-PersonUpdate-API-249x600.png)](https://backendless.com/wp-content/uploads/2023/03/88-Call-PersonUpdate-API.png)

Pass the `name` and `age` values from the `NameField` and `AgeField` (like we did when creating a Person in the previous section). Also, pass the `objectId` value taken from the `personObject`:

[![Pass objectId value from personObject into JSON path](https://backendless.com/wp-content/uploads/2023/03/89-Pass-objectId-value-from-personObject-into-JSON-path-387x600.png)](https://backendless.com/wp-content/uploads/2023/03/89-Pass-objectId-value-from-personObject-into-JSON-path.png)

3\. After the PersonUpdate API is called, we receive its response. It could be successful (4) or failed (5).

4\. If the response is successful, we’ll see an alert with a success message “Object was successfully updated in Backendless.”:

[![Set Update API success response message](https://backendless.com/wp-content/uploads/2023/03/90-Set-Update-API-success-response-message-282x600.png)](https://backendless.com/wp-content/uploads/2023/03/90-Set-Update-API-success-response-message.png)

5\. If any error occurred while updating a Person object, an error alert will appear with the error text received in the `updateResult`. As usual, we will display only the message from the error (as we did in all previous sections):

[![Set Update API failure error message](https://backendless.com/wp-content/uploads/2023/03/91-Set-Update-API-failure-error-message-293x600.png)](https://backendless.com/wp-content/uploads/2023/03/91-Set-Update-API-failure-error-message.png)

6\. If the `personObject` is not set, a new object will be created. The steps 6-10 are the same as the saving steps 1-5 from the [previous section](#create-object) – we call the PersonSave API to create a new Person and return to the DataOperations page if the creation was successful.

We’ve finished the object update functionality and now it’s time to implement the object deletion.

Add a new DELETE API call called PersonDelete and configure it:

[![Define Delete object API call in FlutterFlow](https://backendless.com/wp-content/uploads/2023/03/92-Define-Delete-object-API-call-in-FlutterFlow-600x268.png)](https://backendless.com/wp-content/uploads/2023/03/92-Define-Delete-object-API-call-in-FlutterFlow.png)

The URL value is [https://api.backendless.com/APP\_ID/REST\_API\_KEY/data/Person/\[objectId\]](https://api.backendless.com/APP_ID/REST_API_KEY/users/register) (or [https://eu-api.backendless.com/APP\_ID/REST\_API\_KEY/data/Perso/\[objectId\]](https://eu-api.backendless.com/APP_ID/REST_API_KEY/users/register) for the EU cluster). Be sure to replace `APP_ID` and `REST_API_KEY` with your app’s values, found on your Backendless Backend Dashboard.

To pass the `objectId` parameter to the URL, add it in the Variables tab:

[![Create objectId variable](https://backendless.com/wp-content/uploads/2023/03/93-Create-objectId-variable-600x131.png)](https://backendless.com/wp-content/uploads/2023/03/93-Create-objectId-variable.png)

Go to the Response & Test tab, enter the `objectId` of the existing Backendless object, and run the API:

[![Test delete object API call in FlutterFlow](https://backendless.com/wp-content/uploads/2023/03/94-Test-delete-object-API-call-in-FlutterFlow-600x308.png)](https://backendless.com/wp-content/uploads/2023/03/94-Test-delete-object-API-call-in-FlutterFlow.png)

The API works correctly and returns the deletion timestamp with status 200 as expected.

Add the On Tap action for the `DeleteButton`:

[![Delete button On Tap actions](https://backendless.com/wp-content/uploads/2023/03/95-Delete-button-On-Tap-actions-580x600.png)](https://backendless.com/wp-content/uploads/2023/03/95-Delete-button-On-Tap-actions.png)

1\. Firstly a Confirmation Dialog is shown. User is asked if he/she is really want to delete an object:

[![Ask user to confirm that they want to delete the object](https://backendless.com/wp-content/uploads/2023/03/96-Ask-user-to-confirm-that-they-want-to-delete-the-object-245x600.png)](https://backendless.com/wp-content/uploads/2023/03/96-Ask-user-to-confirm-that-they-want-to-delete-the-object.png)

2\. If the user confirms the object deletion, the PersonDelete API (3) is called.

3\. Otherwise, the dialog just closes without any further actions.

4\. After the PersonDelete API is called, we receive its response. It could be successful (5) or failed (6).

5\. If the response is successful, we’ll see an alert with a success message “Object was deleted from Backendless. You will be redirected to the Data Operations page.”.

6\. After the alert is closed, we are automatically redirected back to the Data Operations page.

7\. Otherwise, an error alert will appear with the error text received in the saveResult.

Now the `SaveButton` and `DeleteButton` On Tap actions are configured and we can move to the tests.

Return to the UI Builder, select the DataOperations page, and press the “Run your app in Test Mode” button. Please note that the API won’t work in the Preview mode.

Retrieve the records from Backendless and click on any item:

[![Load objects then select an item on the debug Data Operations screen](https://backendless.com/wp-content/uploads/2023/03/97-Load-objects-then-select-an-item-on-the-debug-Data-Operations-screen-334x600.png)](https://backendless.com/wp-content/uploads/2023/03/97-Load-objects-then-select-an-item-on-the-debug-Data-Operations-screen.png)

You will be redirected to the PersonPage. Edit the Person `age`

[![Edit the person age on the Person page](https://backendless.com/wp-content/uploads/2023/03/98-Edit-the-person-age-on-the-Person-page-334x600.png)](https://backendless.com/wp-content/uploads/2023/03/98-Edit-the-person-age-on-the-Person-page.png)

and click Save. If everything is fine, you’ll see a corresponding message:

[![Success message if person successfully updated](https://backendless.com/wp-content/uploads/2023/03/99-Success-message-if-person-successfully-updated-335x600.png)](https://backendless.com/wp-content/uploads/2023/03/99-Success-message-if-person-successfully-updated.png)

Now click the Delete Button:

[![Delete object warning message](https://backendless.com/wp-content/uploads/2023/03/100-Delete-object-warning-message-334x600.png)](https://backendless.com/wp-content/uploads/2023/03/100-Delete-object-warning-message.png)

and confirm the object deletion.

You’ll receive a message after the object is deleted:

[![Successful deletion confirmation message](https://backendless.com/wp-content/uploads/2023/03/101-Successful-deletion-confirmation-message-334x600.png)](https://backendless.com/wp-content/uploads/2023/03/101-Successful-deletion-confirmation-message.png)

And will be redirected to the Data Operations page.

<a name="send-email-with-template"></a>Sending Email with Template
---------------------------

In the final part of this article, let’s look at sending emails with templates.

Firstly, open Backendless Console and configure the [Email Settings](https://backendless.com/docs/rest/email_settings.html) to enable the Email Delivery API. Then create a simple [Email Template](https://backendless.com/docs/rest/email_templates.html) to test the functionality.

Now we can switch back to FlutterFlow.

Create a new Page named `EmailTemplate`, change the AppBar title and add a column with two TextField components (`TemplateNameField` and `EmailsField`) and a Button (`SendButton`):

[![Email Template page Widget Tree in FlutterFlow](https://backendless.com/wp-content/uploads/2023/03/102-Email-Template-page-Widget-Tree-in-FlutterFlow-519x600.png)](https://backendless.com/wp-content/uploads/2023/03/102-Email-Template-page-Widget-Tree-in-FlutterFlow.png)

So the page layout should look like:

[![Email Template page layout](https://backendless.com/wp-content/uploads/2023/03/103-Email-Template-page-layout-336x600.png)](https://backendless.com/wp-content/uploads/2023/03/103-Email-Template-page-layout.png)

The email addresses can be filled in the corresponding field separated by comma.

Let’s add a new API to send emails and name it `SendEmailWithTemplate`:

[![Define Send Email With Template API call in FlutterFlow](https://backendless.com/wp-content/uploads/2023/03/104-Define-Send-Email-With-Template-API-call-in-FlutterFlow-600x292.png)](https://backendless.com/wp-content/uploads/2023/03/104-Define-Send-Email-With-Template-API-call-in-FlutterFlow.png)

The URL value is [https://api.backendless.com/APP\_ID/REST\_API\_KEY/emailtemplate/send](https://api.backendless.com/APP_ID/REST_API_KEY/users/register) (or [https://eu-api.backendless.com/APP\_ID/REST\_API\_KEY/emailtemplate/send](https://eu-api.backendless.com/APP_ID/REST_API_KEY/users/register) for the EU cluster). Be sure to replace `APP_ID` and `REST_API_KEY` with your app’s values, found on your Backendless Backend Dashboard.

Also let’s create two variables – `templateName` of type String and `addresses` of type List<String> that will be passed to the body of the [Send Emails with Templates API](https://backendless.com/docs/rest/email_send_email_with_templates_api.html):

[![Create variables for email API call](https://backendless.com/wp-content/uploads/2023/03/105-Create-variables-for-email-API-call-600x171.png)](https://backendless.com/wp-content/uploads/2023/03/105-Create-variables-for-email-API-call.png)

Pass these variables to the request body:

[![Pass variables to request body](https://backendless.com/wp-content/uploads/2023/03/106-Pass-variables-to-request-body-600x219.png)](https://backendless.com/wp-content/uploads/2023/03/106-Pass-variables-to-request-body.png)

As you might have noticed, the `addresses` parameter is a List of Strings and the value from the `EmailsField` is a type of String, so we need the ability to parse the string value to the list.

Let’s create a simple custom code `split()` function for this:

[![Create custom code split function](https://backendless.com/wp-content/uploads/2023/03/107-Create-custom-code-split-function-600x229.png)](https://backendless.com/wp-content/uploads/2023/03/107-Create-custom-code-split-function.png)

The `split()` function takes a String variable named `input` as a parameter and returns a list, created from this input parameter separated by commas.

Now we can configure the On Tap action for the SendButton.

Add the Button disabled options:

[![Add button disabled options for Send button](https://backendless.com/wp-content/uploads/2023/03/108-Add-button-disabled-options-for-Send-button-341x600.png)](https://backendless.com/wp-content/uploads/2023/03/108-Add-button-disabled-options-for-Send-button.png)

So the button is disabled if any of the input fields are empty.

Now add the On Tap action with the actions chain:

[![Send button On Tap actions](https://backendless.com/wp-content/uploads/2023/03/109-Send-button-On-Tap-actions-600x586.png)](https://backendless.com/wp-content/uploads/2023/03/109-Send-button-On-Tap-actions.png)

1\. Сall the SendEmailWithTemplate API and pass the `templateName` and `addresses` values:

[![Call SendEmailWithTemplate API call](https://backendless.com/wp-content/uploads/2023/03/110-Call-SendEmailWithTemplate-API-call-600x445.png)](https://backendless.com/wp-content/uploads/2023/03/110-Call-SendEmailWithTemplate-API-call.png)

[![Pass variables into email API call](https://backendless.com/wp-content/uploads/2023/03/111-Pass-variables-into-email-API-call-265x600.png)](https://backendless.com/wp-content/uploads/2023/03/111-Pass-variables-into-email-API-call.png)

The result of the request will be set to the `emailResult` variable.

As you can see, the `addresses` parameter value is the value from the `EmailsField`, split to the array using the split function:

[![addresses parameter as set using the split function](https://backendless.com/wp-content/uploads/2023/03/112-addresses-parameter-as-set-using-the-split-function-306x600.png)](https://backendless.com/wp-content/uploads/2023/03/112-addresses-parameter-as-set-using-the-split-function.png)

2\. After the SendEmailWithTemplate API is called, we receive its response. It could be successful (3) or failed (5).

3\. If the response is successful, an alert with an “Email was sent successfully. Please check your email box.” message is shown:

[![Define email success message action](https://backendless.com/wp-content/uploads/2023/03/113-Define-email-success-message-action-284x600.png)](https://backendless.com/wp-content/uploads/2023/03/113-Define-email-success-message-action.png)

4\. After the successful alert is closed both text fields are cleared:

[![Clear email template and addresses fields](https://backendless.com/wp-content/uploads/2023/03/114-Clear-email-template-and-addresses-fields-600x474.png)](https://backendless.com/wp-content/uploads/2023/03/114-Clear-email-template-and-addresses-fields.png)

5\. Otherwise, the failure alert is shown with the error text received in the `emailResult`:

[![Define email failure error message action](https://backendless.com/wp-content/uploads/2023/03/115-Define-email-failure-error-message-action-293x600.png)](https://backendless.com/wp-content/uploads/2023/03/115-Define-email-failure-error-message-action.png)

The `SendButton` On Tap action is configured and we can now test how Sending Email with Template works.

Return to the UI Builder page and press the “Run your app in Test Mode” button. Wait until the test session is loaded, enter a template name an email (or emails separated by commas) and click Send:

[![Send Email With Template page in test (debug) mode](https://backendless.com/wp-content/uploads/2023/03/116-Send-Email-With-Template-page-in-test-debug-mode-336x600.png)](https://backendless.com/wp-content/uploads/2023/03/116-Send-Email-With-Template-page-in-test-debug-mode.png)

If the email was sent successfully, we will receive a message about success:

[![Email successfully sent message](https://backendless.com/wp-content/uploads/2023/03/117-Email-successfully-sent-message-335x600.png)](https://backendless.com/wp-content/uploads/2023/03/117-Email-successfully-sent-message.png)

And the email appears in your email inbox:

[![Test email received in inbox](https://backendless.com/wp-content/uploads/2023/03/118-Test-email-received-in-inbox-600x225.png)](https://backendless.com/wp-content/uploads/2023/03/118-Test-email-received-in-inbox.png)

Otherwise, if the error occurred (e.g. user entered incorrect template name), the error message will appear:

[![Test email failure error message](https://backendless.com/wp-content/uploads/2023/03/119-Test-email-failure-error-message-335x600.png)](https://backendless.com/wp-content/uploads/2023/03/119-Test-email-failure-error-message.png)

<a name="conclusion"></a>Conclusion
----------

You should now have a basic handle on how to interact with a Backendless backend via FlutterFlow, but this is just the tip of the iceberg. Adding a Backendless backend and database to a FlutterFlow mobile app gives your app incredible flexibility.

With FlutterFlow’s easy frontend interface and Backendless’ many pre-built APIs, your possibilities become endless.

In addition to managing users and data, Backendless gives you access to [Cloud Code](https://backendless.com/features/backendless-core/cloud-code) timers, event handlers, and whatever [Codeless logic](https://backendless.com/features/backendless-core/codeless) you can think of on the backend.

Your app is virtually limitless.

Thanks for reading and Happy Codeless Coding!

*This article was first published on [backendless.com](https://backendless.com/how-to-integrate-flutterflow-with-backendless/) on March 13, 2023.*