Getting started

0. Install ionic via npm install -g [email protected] (or follow instructions at Installing Ionic)
1. Clone this repo
2. Install dependencies via npm install
3. Execute ionic serve. Alternatively, if you want to execute the app within the emulator, follow the instructions from the Ionic Docs (Make sure to have your $JAVA_HOME, $ANDROID_HOME environment variables configured).

General usage

If you want to make use of the ionic-renderers in your own project, please follow these guidelines:

1. Install dependencies
   • npm i @jsonforms/core
   • npm i @jsonforms/angular
   • npm i @jsonforms/ionic-renderers
2. Import JsonFormsIonicModule and add it to the imports section
3. Create a store configuration, e.g. in a file called store.ts and add the following contents

   import { combineReducers, Reducer } from 'redux';
   import {
     jsonformsReducer,
     JsonFormsState
   } from '@jsonforms/core';
   import {ionicRenderers} from "@jsonforms/ionic-renderers";
   
   export const rootReducer: Reducer<JsonFormsState> = combineReducers({ jsonforms: jsonformsReducer() });
   
   export const initialState: any = {
     jsonforms: {
       renderers: ionicRenderers,
       fields: [],
     }
   };

4. Initialize the store via ngRedux (e.g. within ngOnInit of your app module)

    import {Actions} from '@jsonforms/core';
    import {initialState, rootReducer} from './store';
   
    ngRedux.configureStore(
      rootReducer,
      initialState
    );
    
    ngRedux.dispatch(
      Actions.init(
        data,
        schema
        uischema
      )
    );

Covered Features

Layouts

• Vertical Layout
• Horizontal Layout
• Group
• Categorization (via Tabs)

Controls

• ListWithDetail (a master/detail view where the master is rendered as a flat list)
• Booleans
  • Checkbox
  • Toggle
• Strings
  • String (with format support for email/telephone)
  • Multiline string
• Date
• Numbers
  • Number
  • Range
• Enums (for strings/numbers)
  • Select
  • Autocomplete (customizable)
• Labels