Create Form Service

Create Form service with frontend, backend, and API Integration.

In this tutorial, we'll guide you through creating a form service, from building an engaging frontend to setting up an efficient backend and connecting it with an API.

Developer Page

Follow these steps to configure the line chart:

Click the gear icon on the line chart widget.

Frontend

Create Service

Click the Create Service button.
Enter the service title, description, and category as shown in the example below.

Adding a Page

To add a new page, click Add Page in the bottom-right corner.
Enter a title for the page — in this case, we’ll use “Form” as the title.
Select Blank Page.
The new page will appear on the right side of the page list.
Click Save on the Developer Page to store all configurations.

To make your app’s interface more engaging, you can use various widgets. In this tutorial, we will use the Text widget for service titles and descriptions, and the ListView widget to create menus within the service.

Steps to add widgets

Drag and drop the Text widget and ListView widget onto the main page.
Add other widgets as needed.

Click or select the gear icon on the Text widget.
A configuration panel for the Text widget will appear.
Enter a title with any text, in this example, the title is “Demo Service.”
Enter a description for the title.
Configure these parts.

Configuration Guide

Max Characters (Desc): The maximum number of characters displayed in the “Description” field of the Text widget.
Icon: Option to upload or select an icon to display with the Text widget.
Icon Size: Option to set the size of the icon.
Title Font Size: Option to set the font size for the widget title or label.
Desc Font Size: Option to set the font size for the description or additional information.

Don’t forget to save your changes in the developer panel to ensure all configurations are stored.

Here's a preview of the text widget in your app:

Web Version

Mobile Version

After you download your app, install it, and enter your service code.

This is how your finished mobile app will look.

We'll use the Listview Widget to create a navigation menu that links to your forms.

Click the gear icon on the Text Widget.
The widget's configuration panel will open.
Click Add Listview Item.
A new section will appear for you to configure the list item.
Set the title to "Submit Form."
Enter a title description in the "Description" field.
Customize the other settings like the image, background color, and text color, as shown below.
Turn on the "Enable action on Click" option.
Set the "onClick" method to "Open Pages" and select your "Formulir" page.
Click Save to confirm your settings.
To preview, go to the preview mode and select your service, named "Demo Layanan".
Remember to Save your work on the development page to keep all changes.
Here is a preview of the Listview widget in the app:

Previously, we created a page for our form. We've set up a Listview widget as a navigation menu, so clicking an item will open the form page. However, we haven't added the actual form to that page yet.

In this tutorial, we'll use the Form Widget to create a complaint form with the following fields:

Complaint Type (jenis_pengaduan)
Description (keterangan)
Address (alamat)
Photo (foto)

Frontend Form Configuration

Follow the steps below to add and configure the form widget:

On the service developer page, click on your Formulir page.
Add a form widget to the page by dragging and dropping it.
Once added, click the gear icon on the form widget.
The widget configuration panel will appear.
Click "Tambah Formulir" (Add Form).
An additional configuration panel will appear.
Click "Tambah Bidang" (Add Field).
A new field section will be added.
Click on the new field to open its settings.
In the Label section, enter "Jenis Pengaduan" (Complaint Type).
Click "Setup Komponen" to configure the form field.
The form configuration panel will appear.
Set the form type. For this, select "Standart Form".
Choose "Select" and then "Statis" (Static).
In the options column, enter the complaint types as shown below.
Click the "Next" button in the bottom right corner.
The validation settings will appear. Just click "Next" to continue.
The data processing settings will appear. Click "Save" to finish.
Great! You have successfully configured the "Jenis Pengaduan" field.
Now, let's add the "Keterangan" (Description) field.
Click "Tambah Bidang" (Add Field) again.
Click on the new field you just added.
In the Label section, enter "Keterangan".
Click "Setup Komponen" to configure it.
Set the form type to "Standart Form".
Select "Textarea".
Click the "Next" button.
On the validation screen, click "Next".
On the data processing screen, click "Save".
Now, let's add the "Alamat" (Address) field.
Click "Tambah Bidang" (Add Field).
Click on the new field.
In the Label section, enter "Alamat".
Click "Setup Komponen".
Set the form type to "Standart Form".
Select "Textarea".
Click "Next".
On the validation screen, click "Next".
On the data processing screen, click "Save".
Finally, let's add the "Foto" (Photo) field.
Click "Tambah Bidang" (Add Field).
Click on the new field.
In the Label section, enter "Foto".
Click "Setup Komponen".
Set the form type to "Kamera" (Camera).
Select "Kamera + Galeri" (Camera + Gallery).
Click "Next".
On the validation screen, click "Next".
On the data processing screen, click "Save".
Perfect! You have now set up all the required fields for the user form.
Save the entire form by clicking the "Simpan Formulir" (Save Form) button on the right.
The following screen will appear.
Don't forget to give your form a name. For this example, name it "Form Pengaduan" (Complaint Form).
Click "Simpan Sekarang" (Save Now) to confirm.
Finally, remember to Save the entire developer page to ensure all your configurations are stored.

Backend Form Configuration

You can add an advanced form to your existing frontend form. This form will only be visible in the backend and is typically used to add a "Status" field to track submissions (e.g., PENDING, IN PROGRESS, APPROVED, REJECTED, COMPLETED).

Follow these steps to add and configure the backend form widget:

Go to the Formulir page in your service's developer area.
On the form widget, click the gear icon to configure it.
Click "Tambah Formulir" (Add Form) at the bottom.
Click "Tambah Bidang" (Add Field).
A new field section will appear.
Click on the new field to open its settings.
In the Label section, enter "Status".
Click "setup komponen" to configure this field.
The form configuration panel will appear.
Set the form type to "Standart Form".
Choose "Select" and then "Statis" (Static).
In the options column, enter the status values (e.g., Pending, In Progress).
Click the "Next" button in the bottom right.
The validation settings will appear. Just click "Next" to continue.
The data processing settings will appear. Click "Save" to finish.
Congratulations! You have successfully configured the backend form field.
Next, click "simpan formulir" (Save Form), then click "simpan sekarang" (Save Now).
Finally, remember to Save the entire developer page to ensure all your configurations are stored.

Mobile Display Configuration

You can configure how submitted forms appear in the user's transaction history on the mobile app.

Here is an example of what the user's transaction list looks like on mobile:

Here is an example of the transaction detail view on mobile:

Oke mari kita lakukan konfigurasi, ikuti langkah dibawah ini:

Go to your form page.
Click the gear icon on the form widget.
Click "Simpan Formulir" (Save Form) at the bottom.
An additional configuration panel will appear.
Select the "Konfigurasi App Mobile" (Mobile App Config) sub-menu.
The mobile configuration panel will open.
In the "Judul" (Title) field, select the jenis_pengaduan field.
In the "Deskripsi" (Description) field, select the keterangan field.
In the "Status" field, select the status field.
Once these fields are set, click "Simpan Sekarang" (Save Now) at the bottom.
Save the main developer page to store all your configurations.

Up to this the frontend configuration is completed.

Backoffice/Backend

In the backoffice/backend section, you can directly monitor and manage your data. It provides widgets and components that you can configure to fit your specific monitoring and management needs.

Here is an example of a data monitoring dashboard, built using the available backoffice widgets.

Here is an example of a data management dashboard, also built using the available backoffice widgets.

Dashboard Monitoring

To monitor data, you'll often need various types of charts. The backoffice includes chart widgets to help you build a monitoring dashboard. In this guide, we will use the counter, line, and bar chart widgets.

Here are the steps to add chart widgets:

On the developer page, click the Backoffice sub-menu to enter the backend developer area.
Click "Tambah Widget" (Add Widget).
Click "Chart".
Click "Counter" to add a counter-style chart.
Click "Line" to add a line chart.
Click "Bar" to add a bar chart.
Click "Save" to store the components you've added.

We've successfully added the chart widgets. In this tutorial, let's configure each chart we added.

Chart Configuration - Counter

Follow the steps below to configure the Counter Chart:

Click the gear icon on the counter chart widget.
The configuration panel will appear.
In the "Pilih source data" field, select "dev".
In the "Pilih data" field, select the form you created earlier, in this case, "Form Pengaduan" (Complaint Form).
In the "Metric" section, set the aggregate function to "count".
In the "Label" field, enter the text "Jumlah Pengaduan" (Total Complaints).
In the "Buckets" section, select the field to aggregate. Here, choose "_layanan.title".
Click "Simpan" (Save) to save this configuration.
Finally, remember to Save the main developer page to ensure all your settings are stored.

Chart Configuration - Line

Follow these steps to configure the line chart:

Click the gear icon on the line chart widget.
The configuration panel will open.
For the data source, select "dev".
For the data selection, choose the form you created earlier: "Form Pengaduan".
Set the metric to "count".
For the label, enter: "Jumlah Pengaduan /Hari" (Daily Complaints).
In the buckets section, set the aggregate type to "Date Histogram".
Select the field to aggregate: "_meta.creatAt".
Set the interval to "day".
Click Save to apply your configuration.
Don't forget to Save the main developer page to keep all your changes.

Config Chart - Bar

Follow these steps to configure the bar chart:

Click the gear icon on the bar chart widget.
The configuration panel will open.
For the data source, select "dev".
For the data, choose the form you created: "Form Pengaduan".
Set the metric to "count".
For the label, enter "Jenis Pengaduan" (Complaint Type).
In the buckets section, set the aggregate type to "Terms".
Select the field to aggregate: "jenis_pengaduan".
For the order, select "Metric".
For the type, select "Desc" (Descending).
For the size, set the value to 20.
Click Save to apply your configuration.
Finally, remember to Save the main developer page to keep all your changes.

Data Management Dashboard

You can manage the data submitted by users through the frontend form. The available actions include:

Viewing data details
Deleting data
Updating or editing data

Add Page

To create a data management dashboard, we first need to add a new page. We'll do this because the previous page is dedicated to our monitoring dashboard, which contains all the charts we've already set up.

Follow these steps to add a new page to the backoffice/backend:

Click the plus icon (+) to add a new page.
A configuration panel will appear.
In the "Name" field, enter a name for this page. For this example, let's use "Data Pengaduan" (Complaint Data).
Click "Blank Page" as the template.
At this point, page has already been added.
Click "Save" to store the changes.

Data Form Configuration

We've already added a page for our data management dashboard. Now, let's add a data widget to this page. This widget will display the submissions from our frontend form, "Form Pengaduan".

Follow these steps to add and configure the "Form Pengaduan" data widget:

Go to the "Data Pengaduan" (Complaint Data) page.
Click "Tambah Widget" (Add Widget).
Under the data sub-menu, click "Data Form Pengaduan".
Click the gear icon to set up the widget.
The configuration panel will open.
In the Title field, enter "Data".
For the Grid Title, select the field to be the main title. In this case, use "_user.nama_lengkap" (User's Full Name).
For the Grid Image, select the field for the image. In this case, use "foto" (photo).
You can add a description to the grid by clicking "Add Grid Description".
A new configuration field for the description will appear.
In the Field column, select the data field to display. Here, choose "jenis_pengaduan" (Complaint Type).
In the Label column, enter the display text: "Jenis Pengaduan".
Click "Add Grid Description" again to add another line.
For this new field, select "status".
For its label, enter the text: "Status".
In the Background Color field, you can map status values to colors using a colon (:). For example:
- waspada:#FFFF00 (Yellow)
- siaga:#FFA500 (Orange)
- awas:#FF0000 (Red)
Click "Simpan" (Save) to apply this configuration.
Finally, remember to Save the main developer page to keep all your changes.

Up to this the backend configuration is completed.

API Integration

The developer section has an API Integration page for connecting to your existing backend or systems. You can adapt it to your needs using the provided endpoints:

POST /update/{id}
POST /delete/{id}
GET /detail/{id}
GET /list
GET /aggs

Use Postman Collection

You can test these endpoints directly using POSTMAN by downloading the collection file from the API Integration page.

Before testing, please submit some data using your service's mobile app form. This ensures the API has data to return when you send a request.

Berikut langkah-langkah mengunduh postman collection

Go to the Integrasi API (API Integration) sub-menu in your service's developer page.
Click on Form Pengaduan.
Click Postman Collection (Development) to download the file.
Open the Postman application on your computer.
Click Import to bring the collection into Postman.
Upload the downloaded JSON file in the import window.
You have successfully downloaded and imported the collection into Postman.

Use GET /list

Inside Postman, open the Form Pengaduan collection.
Select the GET /list request.
Click the Send button.
If successful, the data will appear in the Body section below.

Use GET /detail{id}

Inside the Form Pengaduan collection in Postman.
Select the GET /detail/{id} request.
First, make sure you have copied a submission ID from the response of the GET /list request.
Paste the copied ID after detail/ in the request URL. For example: .../detail/AY2ryZ2sCrQ07KigLs3B
Click the Send button.
If successful, the detailed data for that ID will appear in the Body section.

Use POST update/step-2{id}

Go to the "Form Pengaduan" collection in Postman.
Select the POST update/step-1{id} request.
Make sure you have copied a submission ID from the GET /list endpoint.
Paste the copied ID after update/step-2/ in the URL.
Click on the Body tab.
In the status value field, change the value to "DIPROSES" (IN PROGRESS).
Click Send.
If successful, you will get a response body like the following image. To see the result, go to the backoffice of your service.
Click Pratinjau (Preview) to enter preview mode.
Go to the "Data Pengaduan" (Complaint Data) page.
Check the status of the complaint data. The status has now changed from "MENUNGGU DIPROSES" (AWAITING PROCESSING) to "DIPROSES" (IN PROGRESS).

PreviousCreate Service NextComponent Settings

Last updated 7 months ago

Good night

Create Form Service

Developer Page

Frontend

Create Service

Adding a Page

Widget Configuration

Steps to add widgets

Widget Text Configuration

ListView Widget Configuration

Widget Form Configuration

Frontend Form Configuration

Backend Form Configuration

Mobile Display Configuration

Backoffice/Backend

Dashboard Monitoring

Add Widget

Chart Widget Configuration

Chart Configuration - Counter

Chart Configuration - Line

Config Chart - Bar

Data Management Dashboard

Add Page

Data Form Configuration

API Integration

Use Postman Collection

Use GET /list

Use GET /detail{id}

Use POST update/step-2{id}