UI Blueprints

The platform also supports generation of JSON specifications for UI elements. These specifications define the UI comprehensively and can be used by front-end engines to render a UI.

---

Blocks

Each resource can have multiple blocks that contain elements to facilitate various CRUD operations. The blocks for a resource are defined as follows :

{
	"resource" : {
		"ui" : true,
			...
		"blocks" : {
			"resource_block" : {
				"title" : "Resource Details",
				"order" : 1
			}
		},
		"fields" : {
			...
		}
	}
}

The example above contains a single block named resource_block. It is defined by :

• title : The name displayed in the UI for the block
• order : This is common property throughout the UI specification. It denotes the priority given to a particular element when it comes to deciding the order in which UI elements are displayed.

---

Lists and Forms

list

The list attribute specifies how a field will be presented in a list view, used for displaying multiple records. Each field having the list property will be shown as a column in a table where all student records can be seen. The key properties include:

• heading : The column header text displayed in the list view.
• order : As already mentioned, it denotes the position of this column in the list relative to other columns.
• sortable : A boolean value indicating whether the column can be sorted.

form

The form attribute defines how a field will be presented and interacted with in a form view, used for creating or editing a single student record. Each field listed under form will be a form input element. The key properties include:

• label : The label text displayed next to the form input.
• class_name : CSS classes to style the form input element.
• hint : A hint or placeholder text to guide the user.
• component: The type of form input element. Supported types are : textbox and dropdown.
• order : The position of this field in the form relative to other fields.
• datasource: For dropdowns, this specifies where to fetch the options from, typically involving another resource. It has the following properties :

"datasource": {  
	"resource": "batch",  
	"query_id": "GET_ALL"  
}

resource denotes which table the dropdown options are fetched from while query_id specifies which type of query needs to be performed.

Their usage is demonstrated in the following example :

{
  "student": {
    "cluster": "DB_PROFILE",
    "ui": true,
    "api": true,
    "display_name": "Student Details",
    "menu_context": "setup",
    "blocks": {
      "student": {
        "title": "Student Details",
        "order": 1
      }
    },
    "fields": {
      "id": {
        "index": true, 
        "name": "id", 
        "length": 16, 
        "required": true, 
        "type": "String",
      },
      "student_batch_id": {
        "name": "student_batch_id", 
        "length": 128, 
        "type": "String",
        "form": {
          "label": "Student Batch",
          "class_name": "col-sm-6 fix",
          "hint": "",
          "component": "dropdown",
          "order": 3,
          "datasource": {
            "resource": "batch",
            "query_id": "GET_ALL"
          }
        },
        "foreign": {
          "resource" : "batch"
        }
      },
      "student_email_id": {
        "name": "student_email_id", 
        "length": 128, 
        "type": "String",
        "block": "student",
        "list": {
          "heading": "Email ID",
          "order": 3,
          "sortable": true
        },
        "form": {
          "label": "Email ID",
          "class_name": "col-sm-6 fix",
          "hint": "Enter your Email ID",
          "component": "textbox",
          "order": 2
        }
      },
      "student_name": {
        "name": "student_name", 
        "length": 128, 
        "type": "String",
        "block": "student",
        "list": {
          "heading": "Student Name",
          "order": 2,
          "sortable": true
        },
        "form": {
          "label": "Name",
          "class_name": "col-sm-6 fix",
          "hint": "Enter your Name",
          "component": "textbox",
          "order": 1
        }
      },
      "student_status": {
        "name": "student_status", 
        "length": 1, 
        "type": "String",
        "block": "student",
        "list": {
          "heading": "Active",
          "order": 4,
          "sortable": true
        },
        "form": {
          "label": "Active",
          "class_name": "col-sm-6 fix",
          "hint": "Enter Student status here",
          "component": "dropdown",
          "order": 4
        }
      },
      "student_in_status": {
        "name": "student_inout_status", 
        "type": "boolean",
        "block": "student",
        "list": {
          "heading": "In/Out",
          "order": 5,
          "sortable": true
        }
      },
      "student_inHome": {
	    "name": "student_inHome", 
	    "type": "boolean",
	    "block": "student",
        "list": {
          "heading": "In Home",
          "order": 6,
          "sortable": true
        }
      }
    }
  }
}