🌊
jsf
  • About KalmiaJSF
  • Setup
  • Architecture
  • Contributing
  • Changelog
  • Guides
    • Cheat Sheet
  • Examples
    • Demo example
    • Basic examples
    • Kitchen Sink example
    • Charts example
  • Schema
    • Intro to Schema
    • Prop types
      • String
      • Boolean
      • Number & Integer
      • Object
      • Array
      • Date
      • Id
      • Null
      • Ref
      • Binary
    • Prop options
      • Disabling property
      • On prop init actions
      • Persist
      • On value change
      • On user value change
    • Handlers
      • Color picker
    • Creating custom handler
      • Working with arrays
    • Value provider
  • Validation
    • Custom validation
    • Eval
  • LAYOUT
    • Intro to Layout
    • Layout options
      • Show & hide
      • On click action
  • INTERFACES
    • Value Options
  • Form
    • Form data
  • OTHER
    • Events
    • Lifecycle hooks
    • Notifications support
  • PAGES & COMPONENTS
    • Page
    • Component
  • THEMING
    • Creating new theme variant
  • BUILDER
    • Shortcuts
  • Help
    • FAQ
Powered by GitBook
On this page
  • Requirements
  • License
  • Quick usage overview

Was this helpful?

Export as PDF

About KalmiaJSF

RAD tool for developing web UI.

NextSetup

Last updated 4 years ago

Was this helpful?

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 (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

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

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": { ... }
}

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

KamiaJSF is licensed under .

🚧
🚧
TypeScript
GPLv3
✅
🚫
✅
✅
✅
✅
✅
✅
JSON Schema