Uncategorized

Database Driven UI

This article demonstrates how database can be used to render UI. The idea is to let database drive the UI components.

UseCase#

The use case that we have picked to solve this problem is to render a form on UI which is driven by data from database. The form will have text boxes, com-boxes etc. All the UI related data like UI labels and input field type and css class name will be added in the database.

Technologies used#

  • Spring Boot# To create a quick Spring HATEOS Rest API to render UI.
  • Spring HATEOS# Used to send information about the next steps to be taken. Data and metadata e.g. Rest API links for next potential actions that can be taken are sent to the client.
  • Spring Data JPA# Used to perform DAO layer operations.
  • H2 DB# In memory database.
  • Angular 7 # To develop UI.
  • Node JS # For scaffolding and building angular application.

Design#

DB Design#

To design this application we have used the below data tables

  • FORM FIELD table# this table has metadata about the field like CSS_CLASS, LABEL, MULTI_VALUED and TYPE.
  • MULTI_VALUED_FIELD table# this table has multiple values if field type is a multi valued input.

Angular Design#

Approach#

High Level Design

Use the above link to check the database is rendered properly.

  • Expose a Spring HATEOS Rest API. For Multi valued field this rest API will give the UI client another URL link to render multi valued fields.
http://localhost:8080/formfields/ 
[{
	"type": "text",
	"cssClass": "text",
	"label": "NAME",
	"multiValued": false,
	"fieldId": 1,
	"links": []
}, {
	"type": "text",
	"cssClass": "text",
	"label": "AGE",
	"multiValued": false,
	"fieldId": 2,
	"links": []
}, {
	"type": "combo",
	"cssClass": "combo",
	"label": "COUNTRY",
	"multiValued": true,
	"fieldId": 3,
	"links": [{
		"rel": "self",
		"href": "http://localhost:8080/formfields/3/values"
	}]
}]
•	http://localhost:8080/formfields/3/values 
This URL will be picked from above HATEOS API to render the drop down values.
[{
	"id": 1,
	"countryName": "India",
	"parentFieldId": 3
}, {
	"id": 2,
	"countryName": "Japan",
	"parentFieldId": 3
}, {
	"id": 3,
	"countryName": "Korea",
	"parentFieldId": 3
}]
  • Install Node JS
  • Execute npm install -g @angular/cli, to fetch Angular from node package manager
  • Execute ng new formapp, this is to scaffold the UI Angular application.
  • Install Microsoft Visual Studio Code for UI development. Execute the below command to open Angular code.

D:\Angular7\formapp>code .

  • D:\Angular7\formapp>ng g s data, This command will generate a Service
  • D:\Angular7\formapp>ng g c combobox, this command is used to create another component for combobox type field.
  • D:\Angular7\formapp>ng serve –o, this command will open up browser and via websocket will pick code changes you do in Microsoft Visual Studio Code.

Code

Result#

  • The UI is rendered automatically from DB values.
  • Now insert another text box in Database

insert into FORM_FIELD values (4, ‘text’, ‘GENDER’, ‘FALSE’, ‘text’);

  • The UI is updated automatically from DB values. New GENDER Text box is displayed

Leave a Reply

Your email address will not be published. Required fields are marked *