Menu
CMS is a must for content intensive applications:
1) Lifestyle apps
2) Collections of recipes
3) Apps with numerous articles
CRM is good when you create service- oriented app:
1) App for Cleaning company
2) App for property management company
And many more
In such cases you’ll be asked to add a mechanism to easily add data to app without your involvment (or involvment of any technical specialist
In this situation, you have 2 ways:
1) Create CRM or CMS module in FlutterFlow
This route has almost no restrictions except for the time. Creating you own CRM or CMS module in FlutterFlow is definitely time consuming (and more expensive if you outsource development of your application to independent contractor)
2) Use 3-party tool to create CRM or CMS over your data
This route will involve more compromises (especially on the FrontEnd side). But, you’ll be create this module much faster than in FlutterFLow and hand it over to content team or staff members
In this article we’ll use Google Appsheet to create simple CMS for our application. I recommend using Appsheet if you do not have much time to create native CRM due to following reasons:
1) Google Appsheet on free tier has largest pool of datasources to connect to:
2) Google Appsheet allows you to implement Role-Based access to data and views in CRM
3) Google Appsheet allows you to track who made certain changes in database
4) Google Appsheet allows you to offload calculation of certain metrics that are only used by back office of your company (using its own powerfull formula language)
5) Google Appsheet creates for you resposive views optimized for all screen sizes (and you do not have to set it up yourself)
And many more useful features
1) Supabase as backend (unfortunately, Appsheet cannot connect to Firebase directly)
2) Flutterflow 🙂
Feel free to pick template that we’ll use further in this article:
https://app.flutterflow.io/project/flutter-flow-appsheet-c-r-m-open-tutorial-rb23h8
We’ll follow simple database structure. We’ll have just meals, meal’s ingridients and employees that can manage the content. Please, use the code below schema to create those tables
CREATE TABLE public.meals (
meal_id uuid NOT NULL DEFAULT gen_random_uuid(),
created_at timestamptz NOT NULL DEFAULT now(),
meal_name text NULL,
meal_category text NULL,
last_updated_at timestamptz NULL,
meal_calories int4 NULL,
CONSTRAINT meals_pkey PRIMARY KEY (meal_id)
);
CREATE TABLE public.ingridients (
ingridient_id uuid NOT NULL DEFAULT gen_random_uuid(),
created_at timestamptz NOT NULL DEFAULT now(),
last_updated_at timestamptz NULL DEFAULT now(),
ingridient_name text NULL,
CONSTRAINT ingridients_pkey PRIMARY KEY (ingridient_id)
);
CREATE TABLE public.meals_x_ingridients (
meal_x_ingridient_id uuid NOT NULL DEFAULT gen_random_uuid(),
created_at timestamptz NOT NULL DEFAULT now(),
last_updated_at timestamptz NULL DEFAULT now(),
meal_id uuid NOT NULL,
ingridient_id uuid NOT NULL,
CONSTRAINT meals_x_ingridients_pkey PRIMARY KEY (meal_x_ingridient_id),
CONSTRAINT public_meals_x_ingridients_ingridient_id_fkey FOREIGN KEY (ingridient_id) REFERENCES public.ingridients(ingridient_id) ON DELETE CASCADE,
CONSTRAINT public_meals_x_ingridients_meal_id_fkey FOREIGN KEY (meal_id) REFERENCES public.meals(meal_id) ON DELETE CASCADE
);
CREATE TABLE public.employees (
employee_id uuid NOT NULL DEFAULT gen_random_uuid(),
created_at timestamptz NOT NULL DEFAULT now(),
last_updated_at timestamptz NULL DEFAULT now(),
employee_name text NULL,
employee_email text NULL,
"employee role" text NULL,
CONSTRAINT employees_pkey PRIMARY KEY (employee_id)
);
Use your Google account to sign in to Appsheet:
https://www.appsheet.com/Account/Login
1) Click “Create” button on the left panel of “My Apps” page:
Select “Blank app”
2) Name your app
3) Click “Customize with AppSheet”
4) Navigate to “Data” tab and add New Data Source
5) Select “Cloud Database”. Type: “Postgres”
6) Get data for connection from “Project Settings” tab of Supabase:
Server: Host (Supabase)
Database: Database name (Supabase)
Username: User(Supabase)
Password: Password(Supabase)
Add all the tables that we created:
1) In order to be able to insert data into supabase, we’ll have to configure formula for Primary key.
Please, insert this formula into “Initial Value” into all “Id” columns of all uploaded tables:
LOWER(UNIQUEID(“UUID”))
2) Let’s connect all our tables using “Ref” type of columns. It will allow us to offload “Data Lookup” functionality to Appsheet. Navigate to meals x ingridients table and change types of meal_id and ingridient_id to Ref
3) Give “adequate” names for each column that you want to be present on frontend. To do it, write this name in “Display Name” field
Now it is time to add our tables to frontend!
1) Navigate to “Views” panel right under “Data” panel
2) Click “Add view”
3) Select View name
4) Select data source (table)
5) For view type select “deck”
1)Click “Plus” sign on any view
2) Enter the data
3) Check that it appeared in the database
Rest of the tutorial is available at our YouTube channel. Hope that this tutorial was helpful to you and that now you have cheap option to manage the data in your FlutterFlow App. If you have any project in mind, feel free to contact us using “Get Started” button in the header above.