> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/2.builder/1.frontend/1.started/1.simple_layanan.md).
# Create Form Service
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
1. Click the **Create Service** button.
2. Enter the service title, description, and category as shown in the example below.
***
### Adding a Page
1. To add a new page, click **Add Page** in the bottom-right corner.
2. Enter a title for the page — in this case, we’ll use **“Form”** as the title.
3. Select **Blank Page**.
4. The new page will appear on the right side of the page list.
5. Click **Save** on the Developer Page to store all configurations.
***
### Widget Configuration
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
1. Drag and drop the Text widget and ListView widget onto the main page.
2. Add other widgets as needed.
***
#### Widget Text Configuration
1. Click or select the gear icon on the Text widget.
2. A configuration panel for the Text widget will appear.
3. Enter a **title** with any text, in this example, the title is “Demo Service.”
4. Enter a **description** for the title.
5. 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.
5. Don’t forget to **save** your changes in the developer panel to ensure all configurations are stored.
6. 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.
***
#### ListView Widget Configuration
We'll use the Listview Widget to create a navigation menu that links to your forms.
1. Click the **gear icon** on the Text Widget.
2. The widget's configuration panel will open.
3. Click **Add Listview Item**.
4. A new section will appear for you to configure the list item.
5. Set the title to "Submit Form."
6. Enter a title description in the "Description" field.
7. Customize the other settings like the image, background color, and text color, as shown below.
8. Turn on the "**Enable action on Click**" option.
9. Set the "onClick" method to "Open Pages" and select your "Formulir" page.
10. Click **Save** to confirm your settings.
11. To preview, go to the preview mode and select your service, named "Demo Layanan".
12. Remember to **Save** your work on the development page to keep all changes.
13. Here is a preview of the Listview widget in the app:
***
#### Widget Form Configuration
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:
1. Complaint Type (jenis\_pengaduan)
2. Description (keterangan)
3. Address (alamat)
4. Photo (foto)
#### Frontend Form Configuration
Follow the steps below to add and configure the form widget:
1. On the service developer page, click on your Formulir page.
2. Add a form widget to the page by dragging and dropping it.
3. Once added, click the gear icon on the form widget.
4. The widget configuration panel will appear.
5. Click "**Tambah Formulir**" (Add Form).
6. An additional configuration panel will appear.
7. Click "Tambah Bidang" (Add Field).
8. A new field section will be added.
9. Click on the new field to open its settings.
10. In the **Label** section, enter "**Jenis Pengaduan**" (Complaint Type).
11. Click "**Setup Komponen**" to configure the form field.
12. The form configuration panel will appear.
13. Set the form type. For this, select "Standart Form".
14. Choose "**Select**" and then "**Statis**" (Static).
15. In the options column, enter the complaint types as shown below.
16. Click the "**Next**" button in the bottom right corner.
17. The validation settings will appear. Just click "**Next**" to continue.
18. The data processing settings will appear. Click "**Save**" to finish.
19. Great! You have successfully configured the "Jenis Pengaduan" field.
20. Now, let's add the "**Keterangan**" (Description) field.
21. Click "**Tambah Bidang**" (Add Field) again.
22. Click on the new field you just added.
23. In the Label section, enter "**Keterangan**".
24. Click "**Setup Komponen**" to configure it.
25. Set the form type to "**Standart Form**".
26. Select "**Textarea**".
27. Click the "**Next**" button.
28. On the validation screen, click "**Next**".
29. On the data processing screen, click "**Save**".
30. Now, let's add the "**Alamat**" (Address) field.
31. Click "**Tambah Bidang**" (Add Field).
32. Click on the new field.
33. In the **Label** section, enter "**Alamat**".
34. Click "**Setup Komponen**".
35. Set the form type to "**Standart Form**".
36. Select "**Textarea**".
37. Click "**Next**".
38. On the validation screen, click "**Next**".
39. On the data processing screen, click "**Save**".
40. Finally, let's add the "Foto" (Photo) field.
41. Click "Tambah Bidang" (Add Field).
42. Click on the new field.
43. In the Label section, enter "Foto".
44. Click "Setup Komponen".
45. Set the form type to "**Kamera**" (Camera).
46. Select "**Kamera + Galeri**" (Camera + Gallery).
47. Click "**Next**".
48. On the validation screen, click "**Next**".
49. On the data processing screen, click "**Save**".
50. Perfect! You have now set up all the required fields for the user form.
51. Save the entire form by clicking the "**Simpan Formulir**" (Save Form) button on the right.
52. The following screen will appear.
53. Don't forget to give your form a name. For this example, name it "Form Pengaduan" (Complaint Form).
54. Click "**Simpan Sekarang**" (Save Now) to confirm.
55. 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:
1. Go to the Formulir page in your service's developer area.
2. On the form widget, click the gear icon to configure it.
3. Click "**Tambah Formulir**" (**Add Form**) at the bottom.
4. Click "**Tambah Bidang**" (**Add Field**).
5. A new field section will appear.
6. Click on the new field to open its settings.
7. In the Label section, enter "Status".
8. Click "setup komponen" to configure this field.
9. The form configuration panel will appear.
10. Set the form type to "**Standart Form**".
11. Choose "**Select**" and then "**Statis**" (Static).
12. In the options column, enter the status values (e.g., Pending, In Progress).
13. Click the "**Next**" button in the bottom right.
14. The validation settings will appear. Just click "**Next**" to continue.
15. The data processing settings will appear. Click "**Save**" to finish.
16. Congratulations! You have successfully configured the backend form field.
17. Next, click "**simpan formulir**" (Save Form), then click "**simpan sekarang**" (Save Now).
18. 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:
1. Go to your form page.
2. Click the gear icon on the form widget.
3. Click "**Simpan Formulir**" (Save Form) at the bottom.
4.
```
An additional configuration panel will appear.
```
```
```
5\. Select the "**Konfigurasi App Mobile**" (Mobile App Config) sub-menu.
```
```
6\. The mobile configuration panel will open.
```
```
7\. In the "**Judul**" (Title) field, select the `jenis_pengaduan` field.
8\. In the "**Deskripsi**" (Description) field, select the `keterangan` field.
9\. In the "**Status**" field, select the `status` field.
10\. Once these fields are set, click "**Simpan Sekarang**" (Save Now) at the bottom.
11\. Save the main developer page to store all your configurations.
```
```
{% hint style="info" %}
Up to this the frontend configuration is completed.
{% endhint %}
***
### 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.
***
#### Add Widget
Here are the steps to add chart widgets:
1. On the developer page, click the Backoffice sub-menu to enter the backend developer area.
2. Click "**Tambah Widget**" (Add Widget).
3. Click "**Chart**".
4. Click **"Counter"** to add a counter-style chart.
5. Click **"Line"** to add a line chart.
6. Click **"Bar"** to add a bar chart.
7. Click **"Save"** to store the components you've added.
***
#### Chart Widget Configuration
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:
1. Click the gear icon on the counter chart widget.
2. The configuration panel will appear.
3. In the "Pilih source data" field, select "dev".
4. In the "Pilih data" field, select the form you created earlier, in this case, "Form Pengaduan" (Complaint Form).
5. In the "Metric" section, set the aggregate function to "count".
6. In the "Label" field, enter the text "Jumlah Pengaduan" (Total Complaints).
7. In the "Buckets" section, select the field to aggregate. Here, choose "\_layanan.title".
8. Click "Simpan" (Save) to save this configuration.
9. 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:
1. Click the gear icon on the line chart widget.
2. The configuration panel will open.
3. For the data source, select "dev".
4. For the data selection, choose the form you created earlier: "Form Pengaduan".
5. Set the metric to "count".
6. For the label, enter: "Jumlah Pengaduan /Hari" (Daily Complaints).
7. In the buckets section, set the aggregate type to "Date Histogram".
8. Select the field to aggregate: "\_meta.creatAt".
9. Set the interval to "day".
10. Click Save to apply your configuration.
11. 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:
1. Click the gear icon on the bar chart widget.
2. The configuration panel will open.
3. For the data source, select "**dev**".
4. For the data, choose the form you created: "Form Pengaduan".
5. Set the metric to "count".
6. For the label, enter "Jenis Pengaduan" (Complaint Type).
7. In the buckets section, set the aggregate type to "Terms".
8. Select the field to aggregate: "jenis\_pengaduan".
9. For the order, select "Metric".
10. For the type, select "**Desc**" (Descending).
11. For the size, set the value to 20.
12. Click **Save** to apply your configuration.
13. 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:
1. Viewing data details
2. Deleting data
3. 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:
1. Click the **plus icon (+)** to add a new page.
2. A configuration panel will appear.
3. In the "**Name**" field, enter a name for this page. For this example, let's use "**Data Pengaduan**" (Complaint Data).
4. Click "**Blank Page**" as the template.
5. At this point, page has already been added.
6. 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:
1. Go to the "Data Pengaduan" (Complaint Data) page.
2. Click "**Tambah Widget**" (Add Widget).
3. Under the data sub-menu, click "**Data Form Pengaduan"**.
4. Click the **gear icon** to set up the widget.
5. The configuration panel will open.
6. In the **Title** field, enter "**Data**".
7. For the **Grid Title**, select the field to be the main title. In this case, use "**\_user.nama\_lengkap**" (User's Full Name).
8. For the **Grid Image**, select the field for the image. In this case, use "**foto**" (photo).
9. You can add a description to the grid by clicking "**Add Grid Description**".
10. A new configuration field for the description will appear.
11. In the **Field** column, select the data field to display. Here, choose "**jenis\_pengaduan**" (Complaint Type).
12. In the **Label** column, enter the display text: "**Jenis Pengaduan**".
13. Click "**Add Grid Description**" again to add another line.
14. For this new field, select "**status**".
15. For its label, enter the text: "**Status**".
16. 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)
17. Click "**Simpan**" (Save) to apply this configuration.
18. Finally, remember to **Save** the main developer page to keep all your changes.
{% hint style="info" %}
Up to this the backend configuration is completed.
{% endhint %}
***
### 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:
1. `POST /update/{id}`
2. `POST /delete/{id}`
3. `GET /detail/{id}`
4. `GET /list`
5. `GET /aggs`
***
### Use Postman Collection
You can test these endpoints directly using POSTMAN by downloading the collection file from the API Integration page.
{% hint style="warning" %}
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.
{% endhint %}
Berikut langkah-langkah mengunduh postman collection
1. Go to the **Integrasi API** (API Integration) sub-menu in your service's developer page.
2. Click on **Form Pengaduan**.
3. Click **Postman Collection (Development)** to download the file.
4. Open the **Postman** application on your computer.
5. Click **Import** to bring the collection into Postman.
6. Upload the downloaded JSON file in the import window.
7. You have successfully downloaded and imported the collection into Postman.
***
#### Use GET /list
1. Inside Postman, open the **Form Pengaduan** collection.
2. Select the **GET /list** request.
3. Click the **Send** button.
4. If successful, the data will appear in the **Body** section below.
***
#### Use GET /detail{id}
1. Inside the **Form Pengaduan** collection in Postman.
2. Select the **GET /detail/{id}** request.
3. First, make sure you have copied a submission ID from the response of the **GET /list** request.
4. Paste the copied ID after `detail/` in the request URL. For example: `.../detail/AY2ryZ2sCrQ07KigLs3B`
5. Click the **Send** button.
6. If successful, the detailed data for that ID will appear in the **Body** section.
***
#### Use POST update/step-2{id}
1. Go to the "Form Pengaduan" collection in Postman.
2. Select the **POST update/step-1{id}** request.
3. Make sure you have copied a submission ID from the **GET /list** endpoint.
4. Paste the copied ID after `update/step-2/` in the URL.
5. Click on the **Body** tab.
6. In the `status` value field, change the value to **"DIPROSES"** (IN PROGRESS).
7. Click **Send**.
8. If successful, you will get a response body like the following image. To see the result, go to the backoffice of your service.
9. Click **Pratinjau** (Preview) to enter preview mode.
10. Go to the **"Data Pengaduan"** (Complaint Data) page.
11. Check the status of the complaint data. The status has now changed from **"MENUNGGU DIPROSES"** (AWAITING PROCESSING) to **"DIPROSES"** (IN PROGRESS).
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.quantumbyte.ai/home/quantumbyte-v2.0/2.builder/1.frontend/1.started/1.simple_layanan.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
