Generic Form & Table

These are advanced libraries of Generic Form and Generic Table generators which power 40+ forms and 25+ tabular data grids in the Admin UI of a commercial software product. These libraries allow a front-end or back-end developer to quickly specify high level program logic (the behavior, not the implementation) of a form or tabular data page in form of JSON configurations. The JSON can also be supplied dynamically from API payload for fully data-driven UI behavior.

Some notable features of the Generic Form:

• Supports basic HTML inputs (text, number, list, radio, checkbox), date picker, auto complete, color picker, image upload, file upload, custom action button, static/dynamic custom HTML, and custom widgets.
• Built-in regex validations (email, IP address, subnet mask, host name, URL, file name, etc).
• Real time dependency rule (a field can be disabled/editable/hidden/removed based on a logical expression involving of other fields' current value, e.g. the USA states dropdown list is visible only when the selected country is USA).
• Real time validation (value validity depends on other fields' values, e.g. the default-expiry setting value must not exceed the currently entered maximum-expiry setting value).
• Highly configurable templates.
• Tabbed field grouping and nested structure (a form within a form, or a table within a form).
• A testing playground for quick testing and prototyping.

Some notable features of the Generic Table:

• Supports simple cell value and also dynamic custom cell template supporting html and angular expressions.
• Built-in sorting, pagination, custom filters, and search UI (supports client side, server side, or mixed processing), each feature can be included or excluded independently which will make the display layout auto adjusted accordingly.
• Fluid and responsive design supports mobile and desktop screen up to FHD. Columns will be shown as rows on mobile screen.
• Select single or multiple rows. Custom action buttons can be enabled based on the specific properties of the selected rows (e.g. enable the "Unlock" button if there is at least one selected row in Locked status).
• Row grouping, with collapsible group header.
• Priority sorting (e.g. all folders must be shown above any files) and secondary sorting (e.g. sort by file name after sort by user name)
• Drag-and-drop the rows for reordering within the table (touch enabled).
• Edit a cell value using a built-in textbox with auto complete, date picker, drop down list, or toggle switch button.
• Click a row to popup a custom modal dialog or embed it inside a collapsible expanded row.
• Nested structure (each row can be expanded to display an embedded custom angular view & controller containing other Generic Forms or Generic Tables).

Screenshots

(Click on an image to open its actual size)

Typical Data Grid

Shown on mobile screen

Simple grouping

Row reordering and custom group header

Nested structure: table within form within table

Generic Form Playgound

Input type Image used in Branding Editor

When all generated fields are shown in Branding Editor