How to Create an App
How to Create an App
This guide shows you how to create an application using our No-Code Workbench. Our instructions show you step-by-step how to create an application with sample screens to guide you along the way.
1. Select your application screen
Log into the NCAMEO platform. Then select the "New Screen" tab. You can use the "Blank Screen" option or the pre-existing templates to get you started.
2. Choose Form Type
After selecting "Blank Screen", select the type of form you want to create, either a "List Form" or a "Transaction Form".
Select"List Form" to create specific visuals from your data. "Transaction Form" is used when capturing data fields.
Below, we select "Transaction Form".
3. Set Create API and Configure Submit Button for Transaction Form
Following your form selection, you will set the API details. Fill out the required fields which includes "Data Connection", "Model Name", "Operation", "Query"(if any), and "Query Parameters" to name a few. This allows you to establish the correct API connection.
Next, you will set the "Submit" button for your form. You can update the control properties of the Button and set it in your form.
4. Add Controls
Next, add "Controls". Under the "Screen" tab, select the "Add New" button. This allows you to add additional controls.
Clicking on the "Add New" button opens up a form in the side bar laying out all the available options. Add as many controls as needed.
Click on the required control and add it to the form by configuring its properties, view, API, and buttons linked to it.
5. Add Form Name
Next, update or add the Form Name. Below, we are using the form name "Create Lead".
6. Set Get API
Next, configure the Get API. Follow the same steps as done in Step three, however the operation here will change to "Get".
7. Create new form to Configure Cards in Grid View
Following completion of Transaction Form, you will configure the view in which you want the captured data to be represented. Follow the same steps as step one & step two and select "List Form" here.
8. Set up GET API for List
Following your form selection, you will set the API details. Configuring API will be similar to step three, however the operation here will change to "Read".
9. Select Layout or Visual Type
After filling in all the required API fields, select the appropriate view from the 6 available options.
Here, we are going ahead with "Card View".
10. Add Form Name
Next, update the form name. Below, we are using the form name as "Leads".
11. Configure Grid View
Next is configuring "Grid View" in a seven steps form wizard.
Click the "Property" tab in the form wizard. From here, populate the "Attributes" field with your required attributes, ensuring that the attributes has no spaces.
Next we will set up the "View". Fill out the required fields as per your application parameters. You can also pull up images in your card view by configuring the image URL.
12. Configure Grid View
Next we will configure the fields required for "Data" step. This involves data and API configurations.
13. Configure Grid View
Next is the "Mapping" step in which you will map the captured data fields that you wish to display on the cards.
14. Configure Grid View
Next we will complete the "Action" step by configuring the custom action buttons such as "View", "Edit", "Delete" and others.
15. Configure Grid View
Next we have the "Advance" step where we can set up advance visuals on the cards. Advance visuals include images, charts, or custom initials.
The last step is configuring the settings that you want to use for mobile viewing. This will determine how the app displays in the native mobile view.
16. Configure Add Form to the List View
After completion of both "Transaction Form" and "List Form", link both the forms together and create an application screen.
Click on "Setting" tab and then toggle the "Show Add Form Link" to "On".
Next update the "Button Text", "Button Class" and "Button Icon" fields.
Next select the "Action View" and provide the name of Transaction Form in "Add/Edit FormId" which is to be linked together.
17. Adding Application Screen to Navigation Menu
Post completion of application screen, configure the navigation process to display that particular application screen on web and mobile.
Click on "Navigation" tab under "Workbench" and configure your Menu and other options.
Click on "Menu" tab followed by "+" icon to start configuring your Menu.
18. Configuring Menu Option
Mention "Title" (mandatory) for the menu option. Select a Web Icon from the available gallery (optional).
Turn the "Show in Menu" option as "On". Select where you want to show this application screen. We are choosing "Web and Mobile".
Define the URL & Parameters.
Now, "Add Content Form" which you want to display under this menu.
Click on "+ Add New" button and fill in all the required details of the List Form.
Click on "Confirm".
19. Its Done!
On confirm, Menu Item is added to the navigation. Click "Save" and you are all set to use this application.
Try out the controls in a live demo in the laptop screen below!