Personnel Administration practice case-employee management system integration Workbench
1. Case Background
In the actual employee management system, there are many and complicated reports and forms. This case solves this problem very well. Build the employee Management System Workbench to integrate form entry, report entry, data, make Data Query and filling easier.
2. Achieve results
💡Construction of data Kanban of employee information management system
💡Obtain the Workbench Kanban data source through the interface
💡Use JS and interfaces to count the number of visitors
3. Demo Video
Video source YIDA video manual Hello! Low code personnel administration practice case (Lecture 4), YIDA video manual document provides more teaching videos.
Further reading:https://www.yuque.com/yida/video/dazke6
4. Implementation steps
4.1 Step 1: Create a report and configure components
4.1.1 employee data analysis report
(1) create a report
Path: After creating the application> Create page in the upper-left corner> select Create report
(2) report component configuration
Step: Component selectionBasic indicator card> dataset selectionBasic personnel information entry 」> indicator field selectionInstance ID 」> set the aggregation methodCount> Change the alias of the fieldNumber of active employees 」
Component configuration
Dataset and field configuration
Aggregation configuration
Field Information
(3) gender proportion allocation of employees
Step: Component selectionPie chart> dataset selectionBasic personnel information entry 」> category field selectionGender 」, select a numeric fieldInstance ID 」>Instance ID 」Change the aggregation methodCount
Component configuration
Dataset and field configuration
Aggregation configuration
(4) allocation of educational background proportion
Step: Component selectionPie chart> dataset selectionBasic personnel information entry 」> category field selectionChinese with highest academic qualifications 」, select a numeric fieldInstance ID 」>Instance ID 」Change the aggregation methodCount
ReferenceEmployee gender proportion allocation OK
(5) age ratio configuration
Step: Component selectionPie chart> dataset selectionBasic personnel information entry 」> category field selectionAge 」, select a numeric fieldInstance ID 」>Instance ID 」Change the aggregation methodCount
ReferenceEmployee gender proportion allocation OK
(6) position proportion configuration
Step: Component selectionPie chart> dataset selectionBasic personnel information entry 」> category field selectionEmployee position 」, select a numeric fieldInstance ID 」>Instance ID 」Change the aggregation methodCount
ReferenceEmployee gender proportion allocation OK
(7) employee information summary form
Step: Component selectionBasic table> dataset selectionBasic personnel information entry 」> Select and display the table column fields according to your own needs.
Component configuration
Dataset and field configuration
(8) employee name filtering configuration
Step: Component selectionDrop-Down filter> dataset selectionBasic personnel information entry 」> value field selectionEmployee display name 」
Drop-Down filter component configurationSetting
Dataset and value field configuration
(9) entry date filtering configuration
Step: Component selectionDate filter> dataset selectionBasic personnel information entry 」> value field selectionDay-entry date 」
Date filter component configuration
Dataset and field configuration
4.1.2 employee training Record Report
(1) create a View chart
Step: Go to application> Application Settings> application data management> dataset> create View chart> configure View chart multi-table Association> select View chart field
Create a View chart
Multi-table Association
Select Chart fields
(2) create employee training records report
Path: After creating the application> Create page in the upper-left corner> select Create report
Create a report
(3) number of employee trainings
Step: Component selectionBasic table> dataset selection chartTraining record 111> select two table column fieldsMember display name> One of themPersonnel display nameThe aggregation method of field facilities isCount
Table component configuration
Dataset and field configuration
Aggregation configuration
(4) training topics
Step: Component selectionHistogram> dataset selection chartTraining record 111> Horizontal Axis field selectionTraining topics, vertical axis field selectionTraining topics> set the vertical axis aggregation methodCount
Table component configuration
Dataset and field configuration
Aggregation configuration
(5) training information
Step: Component selectionTable> select a dataset View chartTraining record 111> table column fields are selected according to requirements.
Table component configuration
Dataset and field configuration
(6) trainers
Step: Component selectionDrop-Down filter> select a dataset View chartTraining record 111> select a value field
Filter configuration
4.1.3 employee transfer record query
(1) create a report
Path: After creating the application> Create page in the upper-left corner> select Create report
(2) personnel transfer Information Summary table
Step: Component selectionBasic table> dataset selectionPersonnel transfer form> select a table column field
Summary Table configuration
(3) screening and transferring personnel
Step: Component selectionDrop-Down filter> dataset selectionPersonnel transfer form> value field selectionName display name of transfer personnel
Filter configuration
4.1.4 employee Assessment Record Report
(1) create a View chart
Step: Go to application> Application Settings> dataset> create View chart> configure multi-table association of View chart> select View chart field
Create a View chart
Configure multi-table Association
Select View chart display field
(2) create reports
Path: After creating the application> Create page in the upper-left corner> select Create report
(2) comparison of qualified number and unqualified number of employees
Step: Component selectionHistogram> dataset selectionAssessment Record> Horizontal Axis field selectionMember display name> configure formula fields on the vertical axis
Histogram configuration
Qualified quantity
Unqualified quantity
(3) qualified rate statistics
Step: Component selectionBasic table> dataset selectionAssessment Record> custom selection of table column fields> configure formula fields
Table configuration
Pass rate formula field
(4) summary of assessment information
Step: Component selectionBasic table> dataset selectionAssessment Record> custom selection of table column fields> set merge
Table configuration
Row and column merge
4.2 Step 2: Create a form and configure components
4.2.1 create a bottom table of access statistics
(1) create a form
Path: After creating the application> Create page in the upper-left corner> select Create form
(2) configure the bottom table component
(3) submit a piece of data in the bottom table
4.3. Step 3: Create a custom page and configure the data source
4.3.1 create custom pages and configure components
(1) create a custom page
Path: After creating the application> Create page in the upper-left corner> select create custom page
(2) configure custom page components
Text component configuration and style
Workbench Title configuration and style
Select container component> select text component> configure container style> configure text style
Container style
Text style in container
Text Content Settings
(3) configure data Kanban
Component Selection
Link block component configuration
Select the corresponding report page to which you want to jump (the four link blocks are configured the same, you only need to select different report jumps)
Title text style settings (the four title styles are the same)
Data text style settings (the four data display text styles are the same)
(4) application entry integration
Cluster setting
Layout container and container link block configuration (link block and other components in the four layouts have the same style)
Configure link blocks (the four link blocks have the same configuration, you only need to modify the link of the link block to fill in the page for different forms)
Upload different images to four image components (upload as needed)
Application name text style configuration
4.3.2 Data Source configuration
(1) create a remote API
Enter the interface address (the "search form instance details list according to criteria" interface is used. The format of the request address and the interface address can be used. For more information, see the document:YIDA platform interface)
Application encoding: For more information about application encoding, see:Apply basic settingsFind the corresponding application code
(2) configure request parameters
Parameter name: formUuid
Parameter value: For more information, see:Apply basic settingsFind the ID of the corresponding form
(3) Data processing configuration
Copy the two first configured data sources to modify the corresponding request parameters (other configurations are the same)
Copy a configured data source again and change the last interface address of the request address to document:Obtain a list of instance details based on search criteriaAddress in
Request parameters: change the request parameters to the Form ID of the personnel transfer flow chart (other configurations are the same)
(4) bind a data source
Click the corresponding data text> Click bind variable next to the content> select the corresponding data source name> Add. data.length (The other three data texts bind data sources in the same way.)
(5) configure the data source for counting the number of visitors
Copy the data source configured for the first time again> modify the data source name> modify the request parameter to the Form ID of the bottom table.
(6) create a new data source
Request address: The request address remains unchanged, and the interface address is changed to document.:YIDA platform interfaceThe interface address of
Request method: Select POST
4.3.3 JS panel configuration
(1) create an action
Step: click Page Setup> Click bind action when page loading is complete> Click didMount> Click OK
(2)JS code configuration
Step: click JS panel> write JS code in didMount function
const a = { "数据底表访问量组件唯一标识": this.state.第五个数据源的名称.data[0].formData.数据底表访问量组件唯一标识+1}
const params={
formInstId:"数据底表提交的一条数据的数据ID",
updateFormDataJson:JSON.stringify(a)
}
this.dataSourceMap.dp4.load(params);
const b = window.loginUser.userName ;
this.$("展示访问人数文本组件的唯一标识").set("content", "您好，" + b + "您是第" + this.state.第五个数据源的名称.data[0].formData.numberField_kw20bizi+"位，访问本页面的用户！")
The data ID of the bottom table data. You can open the data details page in the browser.
5. Effect display
The effect is shown in the following figure:
6. FAQ
6.1 Why is the statistics of the number of visitors displayed normally only by the administrator
This is because the permissions of the interface are subject to the form permission group. Please go to the form permission group configuration to view permissions. For more information about configuring permissions, seePermission group configuration
YIDA in order to better optimize the content and quality of YIDA user manual, it takes you 3-5 minutes to fill in the document feedback questionnaire. The document feedback questionnaire is submitted anonymously, and the questionnaire information is only used for YIDA document experience feedback collection. Thank you for your support for YIDA!
-------------------- Get the latest information YIDA, welcome to follow US--------------------
