Simple CRUD Tutorial

In this tutorial, we are going to build an employee management system. This section will cover things needed to perform a CRUD operation along with listing and searching.

CRUD

Login to admin panel [ http://localhost:4200/admin/login] with following credentials:

      username: magpiedeveloper@armiasystems.com
      password: m@gp!3
    

Since we are building an employee management CRUD, we need some designations to assign for each employee. So let's create a set of designations first.

Sections

Magpie provides section management to generate a CRUD operation.

    left menu > Setup > Sections > Add
  

In the form fill out all the fields. The fields are explained below:

  ├── Section Name : provide name of the section
  |
  ├── Section Alias : this will be the URL of the section
  │   
  ├── Table Name : name of the collection in which data is stored. Magpie will automatically create this collection while this section is saved
  |
  └── Section Config : JSON format which defines what all functionality, datas are handled in this section

Section Config

Following is the JSON config used to generate designation CRUD

  {
    "column": [{
      "field": "designation_name",
      "type": "textbox",
      "label": "Designation",
      "class": "textbox",
      "sortable": "true",
      "searchable": "true",
      "list": "true",
      "view": "true",
      "placeholder": "Enter the designation",
      "export": "false",
      "validations": [{
        "required": "true"
      }],
      "validations_msg": [
        {
          "required": "designation name is required"
        }
      ]
    }, {
      "field": "designation_code",
      "type": "textbox",
      "label": "Designation Code",
      "class": "textbox",
      "sortable": "true",
      "searchable": "true",
      "list": "true",
      "view": "true",
      "placeholder": "Enter the designation code",
      "export": "false",
      "validations": [{
        "required": "true"
      }],
      "validations_msg": [
        {
          "required": "designation code is required"
        }
      ]
    }],
    "pagination": "true",
    "per_pagecount": "10",
    "import_unique_field": "designation_name"
  }

Here the designation collection has two fields.One is designation name and other one is a designation code. We are going to use textboxes for entering the values. In the config column array will specify the fields needed and the datatype needed.

For example, "field": "designation_name" means that designation name will be stored in the collection with field as designation_name. Beyond that, any other included file provides support for packages, license information, and development.

Likewise,

"type": "textbox" means that the field type in the form will be textbox

"label": "Designation" means that the label to be displayed in the form against the textbox will be Designation

"class": "textbox" will assign the css class textbox for the text field

"sortable": "true" makes the column sortable in the listing

"searchable": "true" makes the column searchable in the listing

"list": "true" will add a listing page to display contents

"view": "true" makes the column visible in the detail view of the record

"placeholder": "Enter the designation code"The placeholder attribute specifies a short hint that describes the expected value of an input field

"validation_msg": {"required": "designation name is required"} lets you add validations message to the field.

"export":"false" makes the column not exporting in the listing

"validations": [{ "required": "true" }] lets you add validations to the field. For the this tutorial am just adding required validation only

"pagination": "true" triggers the pagination in the listing

"per_pagecount": "10" will assign the number of records to be displayed in a single page of the listing to 10

"import_unique_field": "designation_name" set a unique field for importing

Now that the section is configured, let's see how we can add this to side menu on Setting up a menu