Generate CRUD

Introduction

The Generate CRUD function in Joget creates a UI CRUD Menu item and adds it to a new UI category within an existing UI. This feature facilitates the creation of interfaces for creating, reading, updating, and deleting records, streamlining the app development process.

Example of UI category created from Generate CRUD

Example of CRUD UI Menu created from Generate CRUD

How does it work?

1. Start the Joget Server and open the App Center.
2. Log in as admin and open the App Composer for your desired app.
   
3. Go to the Generate App function in the Form Builder
4. Select Generate CRUD.
5. Click Generate. 
   
   

Video tutorial

This video tutorial explains how to use the Generate CRUD feature effectively. It provides a step-by-step guide to ensure you can leverage this functionality to create robust CRUD interfaces for your applications.

Generate CRUD properties

Click Advanced Generation under Generate CRUD to access the CRUD Options page.

Options

The Options section allows you to configure specific settings for the CRUD generation process. By tailoring these options, you can ensure the CRUD interfaces meet your application’s requirements and user expectations.

Fields to Configure:

• Category Label: Specify the category label for the new UI category to be added to the target UI.
• Menu Label: Specify the CRUD menu label.
• List: Choose an existing List to associate with the new CRUD menu item.
  If left empty, Create New List Options will be available in Advanced Options.
• UI: Choose a UI to append the new UI category into.
  If left empty, Create New UI Options will be available in Advanced Options.

Advanced options

The Advanced Options section provides additional configuration fields to further customize the CRUD UI menu. These settings allow for more detailed control over the appearance and behavior of the CRUD interface, enhancing the user experience.

Click Advanced Options or Next > to access the CRUD Advanced Options.

Fields to Configure:

• Menu ID: Custom ID for the CRUD UI menu.
• Show Delete Button?: Option to show the delete button in the CRUD UI.
• Show Row Count?: Option to show the row count in the CRUD UI.

Create new list options

The Create New List Options section enables you to define new list settings that will be used in the CRUD interface. This allows you to specify the columns and data displayed, ensuring the list meets your application's needs.

Fields to Configure:

• List ID: Specify the List ID.
• List Name: Specify the List Name.
• Choose Columns: Select the columns to be displayed in the List.
  Use the auto-complete feature to type and filter column names.

Using the Generate CRUD function helps you quickly establish the foundational CRUD operations in your application, allowing you to focus on further customization and functionality enhancement.

Visual examples

These are screenshots and descriptions of the CRUD interface generated by the plugin. These examples help illustrate the functionality and appearance of the CRUD operations, giving you a clear understanding of what to expect from the generated UI.

• Example of a form formatter for a form element.
  
• Example of a list column with the same formatter from form when generated.
  
• Example of a form formatter for another form element.
  
• Example of a list column with the same formatter from form when generated.
  
• Sample form design.
  
• Resultant List created by the plugin.