Employee CRUD Tutorial
We have designations set up in the database and we are now familiar with adding menus and assigning permissions. So lets just create an employee CRUD along with populating designation data to a dropdown on the employee form.
Employee Section
Again,login to admin panel as a developer http://localhost:4200/admin/login with following credentials:
username: magpiedeveloper@armiasystems.com
password: m@gp!3
Click on
left menu > Setup > Sections > Add
Following is the JSON config used to generate employee CRUD
{
"column": [
{
"field": "employee_name",
"type": "textbox",
"label": "Name",
"class": "textbox",
"sortable": "true",
"searchable": "true",
"list": "true",
"view": "true",
"placeholder": "Enter the employee name",
"export": "false",
"validations_msg": [
{
"required": "employee name is required"
}
],
"validations": [
{
"required": "true"
}
]
},
{
"field": "employee_email",
"type": "email",
"label": "Email",
"class": "textbox",
"sortable": "true",
"searchable": "true",
"list": "true",
"view": "true",
"placeholder": "Enter the employee email",
"validations_msg": [
{
"required": "employee email is required",
"pattern" : "invalid email"
}
],
"validations": [
{
"required": "true",
"pattern": "^[a-z0-9]+(\\.[_a-z0-9]+)*@[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[a-z]{2,15})$"
}
]
},
{
"field": "employee_dob",
"type": "datepicker",
"label": "DOB",
"class": "textbox",
"sortable": "true",
"searchable": "true",
"list": "true",
"view": "true",
"placeholder": "Enter the employee dob",
"validations_msg": [
{
"required": "employee dob is required"
}
],
"validations": [
{
"required": "true"
}
]
},
{
"field": "employee_gender",
"type": "radio",
"label": "Gender",
"class": "textbox",
"sortable": "true",
"searchable": "true",
"source_type": "static",
"source": [
{
"label": "Male",
"value": "male"
},
{
"label": "Female",
"value": "female"
}
],
"list": "true",
"view": "true",
"validations_msg": [
{
"required": "employee gender is required"
}
],
"validations": [
{
"required": "true"
}
]
},
{
"field": "employee_address",
"type": "textarea",
"label": "Address",
"class": "textbox",
"sortable": "true",
"searchable": "true",
"list": "true",
"view": "true",
"placeholder": "Enter the employee address",
"validations_msg": [
{
"required": "employee address is required"
}
],
"validations": [
{
"required": "true"
}
]
},
{
"field": "employee_designation",
"type": "selectbox",
"label": "Designation",
"class": "textbox",
"sortable": "true",
"searchable": "true",
"source_type": "dynamic",
"source_from": "getDesignations",
"list": "true",
"view": "true",
"validations_msg": [
{
"required": "employee designation is required"
}
],
"validations": [
{
"required": "true"
}
]
}
],
"pagination": "true",
"per_pagecount": "10",
"import_unique_field": "employee_name"
}
Employee has following attributes:
Name
Email
DOB - [Datepicker]
Gender - [Radio buton with 2 values]
Address
Designation [Dropdown with value from database]
Please note the configs for DOB, Gender and Designation
DOB : "type": "datepicker" will enable a datepicker to choose date
a radio button using static list for data and the data is defined source array:
Gender : "source_type": "static",
"source": [
{
"label": "Male",
"value": "male"
},
{
"label": "Female",
"value": "female"
}
],
Designation : "source_type": "dynamic",
"source_from": "getDesignations",
In the above config getDesignations is a custom function we have to define for getting data from collection
Lets see how we can define a custom function to populate data in the dropdown
Open nodex > admin > customRoutes.js
Paste the following code snippet:
customRoutes.route('/getDesignations').post(function (req, res) {
const Designations = require('../../nodex/models/designation');
var token = getToken(req.headers);
if (token) {
Designations.find({},'designation_name designation_id',function (err, result){
if(err){
console.log(err);
}
else {
var temp =[];
var i =0;
result.forEach(function (rowItem) {
temp[i] = {'label':rowItem.designation_name,'value':rowItem.designation_id};
i++;
});
res.json(temp);
}
});
} else {
return res.status(403).send({success: false, msg: 'Unauthorized.'});
}
});
In the above code snippet, few things to consider is the route URL getDesignations is same as the 'source_from' in the config and designation_name designation_id are the two fields passed to find function which are the only two fields we need to populate the dropdown.
We have to set up a Menu and assign permissions if it needs to be displayed on left menu
If everything is set up correctly you can see the following screen while clicking on the Add button
Here is a screenshot of listing employees after adding a few records
Configurations
Magpie provides other configurations like map,texteditor,image,file,custom etc.
1.Map Configuration
{
"field": "location",
"type": "map",
"geofence": "true",
"label": "Location",
"class": "",
"placeholder": "Choose entity location",
"sortable": "false",
"searchable": "true",
"list": "true",
"view": "true",
"validations": [
{
"required": "true"
}
],
"validations_msg": [
{
"required": "entity location is required"
}
]
},
Here is a screenshot for map configuration.
2.Image Configuration
{
"field": "image",
"type": "image",
"multiple": "false",
"label": "Image",
"placeholder": "Enter your image",
"class": "",
"sortable": "true",
"searchable": "true",
"list": "false",
"view": "true",
"validations": [
{
"required": "false",
"file_type": [
"image/jpeg",
"image/png"
],
"file_size": "1Mb"
}
],
"validations_msg": [
{
"required": "Project Name is required",
"file_type": "Project Name accept png/jpg formats",
"file_size": "Project Name ,size must be less than 1Mb"
}
]
}
3.Checkbox
{
"field": "employee_gender",
"type": "checkbox",
"label": "Gender",
"class": "textbox",
"sortable": "true",
"searchable": "true",
"source_type": "static",
"source": [
{
"label": "Male",
"value": "male"
},
{
"label": "Female",
"value": "female"
}
],
"list": "true",
"view": "true",
"validations_msg": [
{
"required": "employee gender is required"
}
],
"validations": [
{
"required": "true"
}
]
},
4.Selectbox
{
"field": "employee_gender",
"type": "selectbox",
"label": "Gender",
"class": "textbox",
"sortable": "true",
"searchable": "true",
"source_type": "static",
"source": [
{
"label": "Male",
"value": "male"
},
{
"label": "Female",
"value": "female"
}
],
"list": "true",
"view": "true",
"validations_msg": [
{
"required": "employee gender is required"
}
],
"validations": [
{
"required": "true"
}
]
},
5.Tags
{
"field": "employee_gender",
"type": "tags",
"label": "Gender",
"class": "textbox",
"sortable": "true",
"searchable": "true",
"source_type": "static",
"source": [
{
"label": "Male",
"value": "male"
},
{
"label": "Female",
"value": "female"
}
],
"list": "true",
"view": "true",
"validations_msg": [
{
"required": "employee gender is required"
}
],
"validations": [
{
"required": "true"
}
]
},
6.Readonly
{
"field": "employee_name",
"type": "readonly",
"label": "Name",
"class": "textbox",
"sortable": "true",
"searchable": "true",
"list": "true",
"view": "true",
"placeholder": "Enter the employee name",
"export": "false",
"validations_msg": [
{
"required": "employee name is required"
}
],
"validations": [
{
"required": "true"
}
]
},
7.Custom
{
"field": "permissions",
"type": "custom",
"label": "Permissions",
"placeholder": "Enter your permissions",
"class": "",
"sortable": "false",
"searchable": "true",
"list": "true",
"view": "true",
"onRenderCreate": "test",
"validations": [{
"required": "true"
}],
"validations_msg": [{
"required": "Permissions is required"
}]
}