This is a demo already embedded in clojure-web project,which will be separated from clojure-web common moduals in the future.

As we mentioned before,this project is metadata-driven,in the demostration we have two moduals(computer&brand).

The SQL script is as follow:

CREATE TABLE `computer` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(45) NOT NULL COMMENT 'importable=1\nexportable=1\nchart-label=1',
  `price` decimal(12,2) NOT NULL COMMENT 'importable=1\nexportable=1\nchart-value=1',
  `image` int(11) DEFAULT NULL COMMENT 'type-name=image\nhidden-in-grid=1',
  `status` varchar(12) DEFAULT NULL COMMENT 'type-name=enum\nenum-group=computer',
  `remark` varchar(1024) DEFAULT NULL COMMENT 'type-name=textarea\nhidden-in-grid=1\nimportable=1\nexportable=1',
  `creator_id` int(11) DEFAULT NULL COMMENT 'reserved=1\ntype-name=select\nlookup-table=user\nlookup-label=username',
  `created_at` datetime DEFAULT NULL COMMENT 'reserved=1',
  `updated_at` datetime DEFAULT NULL COMMENT 'reserved=1',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8;

CREATE TABLE `brand` (
  `id` int(11) NOT NULL,
  `name` varchar(45) DEFAULT NULL,
  `file` int(11) DEFAULT NULL COMMENT 'type-name=attachment\n',
  `created_at` datetime DEFAULT NULL COMMENT 'reserved=1',
  `updated_at` datetime DEFAULT NULL COMMENT 'reserved=1',
  `creator_id` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Now we can get some metadata via JDBC (e.g. nullable, column-name, type-name, etc.),we call them build-in metadata.

Do you metion the key-value pairs separated by ‘\n’ in commnets? They are metadata from the clojure-web-admin`s perspective as well. (e.g. ),we call them extra metadata.

See the extra metadata in GUI in snapshot below:

We will not introduce more about metadata here,we go straight to demo fist. Some metadata would be introduced during the demostration, if you want konw more, see metadata in details.

Let`s log in as an admin

usernmae - admin password - admin

After login, click ‘User’ in left-side menus, see snapshot as follow:

We have 4 users in the system:

• The user whose username is ‘admin’ and role is ‘Admin’ belongs to organizaiton ‘Parent’
• The user whose uesrname is ‘manager’ and role is ‘Manager’ belongs to organizaiton ‘Child1’
• The user whose username is ‘staff’ and role is ‘Staff’ belongs to organizaiton ‘Child1’
• The user whose username is ‘staff2’ and role is ‘Staff’ belongs to organizaiton ‘Child2’

The organization hierarchy is as follow:

In a word, organizaiton ‘Child1’ and organizaiton ‘Child2’ are sub organizaitons of organizaiton ‘Parent’.

Click ‘Role’ in left-side menus, see snapshot as follow

Then select any role and go ‘Assign’ button to view or change permissions of roles.

Each permission has its scope

If you want to know more, see permission system in details

For this demostration, permissions have already assigned to roles and you do not need to konw too much about scope, the minimun knowledge about scope will be intruduced soon as bellow.

Admin has all the permissions,no need snapshots here.

• Manager can do all CURD functionalities of ‘computer’ and ‘brand’ moduals.
• The operation scopes of ‘computer’ are all ‘org’, which means manager can only query, edit and delete data created by users in the same organizaiton as him.

  

• The operation scopes of ‘brand’ ars all ‘system’, which means manager can query, edit and delete data created by any users.

  

• Mangager also have the ‘query users’ permission due to the two moduals have the ‘creator’ feature, which need to read ‘user’ modual.

  

• Staff can create, query and edit ‘computer’ modual in ‘user’ scope, which means he/she can only operate the data created by himself/herself.

  

• Staff can only query ‘brand’ modual in ‘system’ scope, which means he/she can query data created by anyone.
• Staff also have the ‘query users’ permission due to the same reason as ‘Manager’.

Click ‘Export’ button.

The columns with metadata ‘exportable=1’ would be exported in excel.

Click ‘Import’ button then click the ‘Downlaod the excel template’ button.

The columns with metadata ‘importable=1’ would be exported in excel.

Then you get the template:

Upload the template with data.

After you upload the template with data, a new computer is created.

Absolutely you can add multiple records in excel and upload at once.

Click ‘Computer’ in left-side menus.

Cilck ‘New’ button and go straight to ‘Save’ button

We get two errors and the submit is prevented.

In addtion, if you try to submit the form with a little hack, posting it by a httpclient bypass the front-end validation,you would get errors as well! The back-end also validate the request.

Futhermore, any validation is both in front-end and back-end!

Look at the ‘Image’ field, we have a button

Click it you can get a draggable file input.

An int column with extra metadata ‘type-name=image’ can have this feature.

Look at the ‘Status’ file, we have a dropdown list. An int column with extra metadata ‘type-name=enum’ can have this feature.

Now let`s get all fields filled.

Click ‘Charts’ button.

The column with metadata ‘chart-label=1’ would be show as x-axis.

The column with metadata ‘chart-value=1’ would be show as y-axis.

Let`s login as an manager

username - manager password - manager

Manager only have the CURD permissions, so the ‘Import’, ‘Export’, ‘Charts’ disappeared and only can get 2 records in datagrid.

As we metioned before, the permission scope of manager is ‘org’, so manager can only see the data created by users in his organizaiton. In this case, they can see data created by user ‘staff’ and himself/herself. He cannot see the data we created as an admin before!

Let`s do a little hack again! We can easily know the APIs the system call from developer tools.

Assume that you already know　’/computers/[id]’ is the API to get a specific computer infomation.

Let`s look at the data in DB.

Try to get computer whose id is 1 and created by the admin.

The data is procted not only in the font-end but also in the back-end.

Furthermore, all the access control take place both in font-end and back-end.

If you want to know more, see permission system in details.

Let`s login as an staff

username - staff password - staff

Another staff

username - staff2 password - staff

　As we mentioned before , staff can only query, create and edit ‘computer’ modual, so only ‘New’ and ‘Edit’ buttons shown on the toolbar on the top of datagird.

The permission scope of computer is ‘user’, so each staff can only view the data created by himself/herself.

In the form, ‘File field’ is a special field

Let`s look at the schema

An int column with extra metadata ‘type-name=image’ can have this feature.

Click the to show the draggable file input.

The ‘attachment’ type is similar with ‘image’ type.

The difference between them is ‘image’ type accept images to show in the field after uploading,while the ‘attachement’ type show a download button after uploading.

After save the brand,go ‘computer’ modual to create a new computer, the new brand is a candidate in the brand field.

In ‘computer’ modual we already know partial data and buttons would show in the datagrid, so no more details here.

Just see the snapshot:

In ‘computer’ modual we already know partial data and buttons would show in the datagrid, so no more details here.

Just see the snapshot:

So far, you do not type any code but you have already got so many generic features for a project!

Add a new column or change the metadata of column for computer or brand modual

see form in details, metadata in details & validation in details

Add a new entity by yourself

see add new entity

Know more about the permission system

see permission system in details