About KalmiaJSF

RAD tool for developing web UI.

🚧 Documentation for this project is still under construction.🚧

Kalmia JSON Schema Form (JSF) is a framework meant to automatically generate an Angular form complete with validation based on JSON instructions. Additionally, the same JSON definition can be used on backend services in order to ensure the correct data model and validity of data.

It uses JavaScript, is built with and fully supports TypeScript (yet still enables developers to code in pure JavaScript). For rendering UI forms we use JSF APP (@kalmia/jsf-app) written as Angular library so it can be easily imported into your Angular project as an Angular library. For backend usage you will find @kalmia/jsf-common package.

Frontend (Angular)

Backend (NodeJs)

Render form

✅

🚫

Validate form

✅

✅

Custom conditions

✅

✅

Data model

✅

✅

Terminology

Term

Description

Schema

Schema defines data model structure, format and validation/requrment rules. Schema is following basic standarts defined in JSON Schema 2019-09 draft.

Layout

Layout defines how data from schema will be displayed in form UI.

JSF definition

JSON defining schema and layout.

JSF document

JSON containing JSF definition and values from the form.

JSF component

Wrapped JSF form reusable in other forms.

JSF page

Wrapped JSF form intended as entry point.

Requirements

If using on front-end:

  • Angular 9 or above

If using on back-end, there are no special requirements.

License

KamiaJSF is licensed under GPLv3.

Quick usage overview

JSF-APP library component usage

<jsf-kal-jsf-doc 
      [doc]="{ 'schema': { ... }, 'layout': { ... } }"  
      [enableThemeRender]="true"
></jsf-kal-jsf-doc>

Usage in code

const builder: JsfBuilder = await JsfBuilder.create({
  "schema": { ... },
  "layout": { ... }
});

Simple structure

JSF definition in a basic form consists of schema (data model) and layout (UI).

{
  "schema": { ... },
  "layout": { ... }
}

Last updated

Was this helpful?