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 (when asked about upgrading to 4.x, deny with "n"
4. Alternatively to 3., 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. We'll use a new project in the following:

1. Create a new project e.g. ionic start todo blank.
2. Install dependencies:

npm i @jsonforms/core
npm i @jsonforms/angular
npm i @jsonforms/ionic-renderers

3. Open src/app/app.module.ts

   • Import JsonFormsIonicModule from @jsonforms/ionic-renderer
   • Add JsonFormsIonicModule to the imports section

As we'll fetch example via HTTP, repeat the steps for HttpClientModule (which is available via @angular/common/http)

4. Create a src/app/store.ts with the following content:

   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: [],
     }
   };

5. Copy your JSON schema and UI schema JSON files to the src/assets folder. We'll refer to these files as schema.json and ui-schema.json, respectively. In a real-world scenario these schemas might be fetched from somewhere else of course. If you don't have any schemas at hand you can use these ones.

6. This step is optional, but if you want to initialize the rendered froms with pre-defined data, you'll need to declare/import it, such that we are able to pass it to the store. If you are using the provided example JSON and UI schema, you may also make use of the example data provided here,

7. Within the src/app/app.module.ts we'll now import the JSON schema and the UI schema and initialize the store. First, let's make the necessary imports

   import { NgRedux } from "@angular-redux/store";
   import { HttpClient, HttpClientModule } from "@angular/common/http";
   import { Actions, JsonFormsState, UISchemaElement } from "@jsonforms/core";
   import { forkJoin } from "rxjs/observable/forkJoin";
   import { rootReducer, initialState } from "./store";
   import data from "./data"; // our example data

   Next, let's add a constructor:

   constructor(
     ngRedux: NgRedux<JsonFormsState>,
     http: HttpClient
   ) {
    // TODO  
   })

   Within the constructor of AppModule, let's setup the store:

   ngRedux.configureStore(rootReducer, initialState);

   Finally, grab the JSON and UI schema and initialize our store:

   forkJoin(
     http.get("./assets/schema.json"),
     http.get("./assets/uischema.json")
   ).subscribe(([schema, uischema]) => {
     ngRedux.dispatch(
       Actions.init(
         data,
         schema,
         uischema as UISchemaElement,
       )
     );  
   });

8. Create a custom JsonFormsPage component in src/app/jsonforms.page.ts which will replace the default HomePage in app.components.ts

import {Component} from "@angular/core";
@Component({
  selector: "jsonforms-page",
  template:  "<jsonforms-outlet></jsonforms-outlet>"
})
export class JsonFormsPage { }

You'll also need to add the JsonFormsPage toe declarations property of the AppModule.

9. In app.component.ts, first import JsonFormsPage

import { JsonFormsPage } from ""./jsonforms.page";

Then change the assignment of HomePage to JsonFormsPage

rootPage: any = JsonFormsPage;

10. Finally, start the application via ionic serve (if prompted to update to 4.x, ignore by entering "n").

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