{"id":20198812,"url":"https://github.com/eclipsesource/jsonforms-ionic-playground","last_synced_at":"2025-08-10T14:13:22.901Z","repository":{"id":71031627,"uuid":"136473614","full_name":"eclipsesource/jsonforms-ionic-playground","owner":"eclipsesource","description":"Playground for integrating JSONForms with Ionic","archived":false,"fork":false,"pushed_at":"2019-01-30T14:42:23.000Z","size":5638,"stargazers_count":5,"open_issues_count":3,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-10T11:34:08.794Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eclipsesource.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-07T12:23:58.000Z","updated_at":"2023-08-03T20:02:43.000Z","dependencies_parsed_at":"2023-02-24T17:15:53.955Z","dependency_job_id":null,"html_url":"https://github.com/eclipsesource/jsonforms-ionic-playground","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/eclipsesource/jsonforms-ionic-playground","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipsesource%2Fjsonforms-ionic-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipsesource%2Fjsonforms-ionic-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipsesource%2Fjsonforms-ionic-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipsesource%2Fjsonforms-ionic-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eclipsesource","download_url":"https://codeload.github.com/eclipsesource/jsonforms-ionic-playground/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipsesource%2Fjsonforms-ionic-playground/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269734149,"owners_count":24466554,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-14T04:34:10.759Z","updated_at":"2025-08-10T14:13:22.868Z","avatar_url":"https://github.com/eclipsesource.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Getting started\n\n0. Install ionic via `npm install -g ionic@3.9.2` (or follow instructions at [Installing Ionic](https://ionicframework.com/docs/intro/installation/))\n1. Clone this repo\n2. Install dependencies via `npm install`\n3. Execute `ionic serve` (when asked about upgrading to 4.x, deny with \"n\"\n4. Alternatively to 3., if you want to execute the app within the emulator, follow the instructions\n   from the [Ionic Docs](https://ionicframework.com/docs/v1/guide/testing.html) (Make sure to have your $JAVA_HOME,\n   $ANDROID_HOME environment variables configured).\n   \n# General usage\n\nIf 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:\n\n1. Create a new project e.g. `ionic start todo blank`. \n2. Install dependencies:\n```\nnpm i @jsonforms/core\nnpm i @jsonforms/angular\nnpm i @jsonforms/ionic-renderers\n```\n3. Open `src/app/app.module.ts`\n\n   * Import `JsonFormsIonicModule` from `@jsonforms/ionic-renderer`\n   * Add `JsonFormsIonicModule` to the `imports` section\n\nAs we'll fetch example via HTTP, repeat the steps for `HttpClientModule` (which\nis available via `@angular/common/http`)\n\n4. Create a `src/app/store.ts` with the following content:\n   ```ts\n   import { combineReducers, Reducer } from 'redux';\n   import {\n     jsonformsReducer,\n     JsonFormsState\n   } from '@jsonforms/core';\n   import {ionicRenderers} from \"@jsonforms/ionic-renderers\";\n   export const rootReducer: Reducer\u003cJsonFormsState\u003e = combineReducers({ jsonforms: jsonformsReducer() });\n   export const initialState: any = {\n     jsonforms: {\n       renderers: ionicRenderers,\n       fields: [],\n     }\n   };\n   ```\n   \n5. Copy your JSON schema and UI schema JSON files to the `src/assets` folder.\n   We'll refer to these files as `schema.json` and `ui-schema.json`, respectively.\n   In a real-world scenario these schemas might be fetched from somewhere else of course.\n   If you don't have any schemas at hand you can use \n   [these ones](https://github.com/eclipsesource/jsonforms-ionic-playground/tree/master/src/assets).\n\n6. This step is optional, but if you want to initialize the rendered froms\n   with pre-defined data, you'll need to declare/import it, such that we are \n   able to pass it to the store. If you are using the provided example JSON\n   and UI schema, you may also make use of the example data provided\n   [here](https://github.com/eclipsesource/jsonforms-ionic-playground/blob/master/src/app/data.ts),\n\n7. Within the `src/app/app.module.ts` we'll now import the JSON schema and the \n   UI schema and initialize the store. First, let's make the necessary imports\n\n   ```ts\n   import { NgRedux } from \"@angular-redux/store\";\n   import { HttpClient, HttpClientModule } from \"@angular/common/http\";\n   import { Actions, JsonFormsState, UISchemaElement } from \"@jsonforms/core\";\n   import { forkJoin } from \"rxjs/observable/forkJoin\";\n   import { rootReducer, initialState } from \"./store\";\n   import data from \"./data\"; // our example data\n   ```\n   \n   Next, let's add a constructor:\n   ```ts\n   constructor(\n     ngRedux: NgRedux\u003cJsonFormsState\u003e,\n     http: HttpClient\n   ) {\n    // TODO  \n   })\n   ```\n\n   Within the constructor of `AppModule`, let's setup the store:\n   \n   ```ts\n   ngRedux.configureStore(rootReducer, initialState);\n   ```\n   \n   Finally, grab the JSON and UI schema  and initialize our store:\n   ```ts\n   forkJoin(\n     http.get(\"./assets/schema.json\"),\n     http.get(\"./assets/uischema.json\")\n   ).subscribe(([schema, uischema]) =\u003e {\n     ngRedux.dispatch(\n       Actions.init(\n         data,\n         schema,\n         uischema as UISchemaElement,\n       )\n     );  \n   });\n   ```\n8. Create a custom `JsonFormsPage` component in `src/app/jsonforms.page.ts` \n   which will replace the default `HomePage` in `app.components.ts`\n ```ts\n import {Component} from \"@angular/core\";\n @Component({\n   selector: \"jsonforms-page\",\n   template:  \"\u003cjsonforms-outlet\u003e\u003c/jsonforms-outlet\u003e\"\n })\n export class JsonFormsPage { }\n ```\n You'll also need to add the `JsonFormsPage` toe `declarations` property\n of the `AppModule`.\n \n9. In `app.component.ts`, first import `JsonFormsPage`\n ```ts\n import { JsonFormsPage } from \"\"./jsonforms.page\";\n ```\n Then change the assignment of `HomePage` to `JsonFormsPage`\n ```ts\n rootPage: any = JsonFormsPage;\n ```\n \n10. Finally, start the application via `ionic serve` (if prompted to update to 4.x, ignore by entering `\"n\"`).\n\n\n# Covered Features\n\n## Layouts\n* [Vertical Layout](https://github.com/eclipsesource/jsonforms/blob/master/packages/ionic/src/layouts/vertical/vertical-layout.ts)\n* [Horizontal Layout](https://github.com/eclipsesource/jsonforms/blob/master/packages/ionic/src/layouts/horizontal/horizontal-layout.ts)\n* [Group](https://github.com/eclipsesource/jsonforms/blob/master/packages/ionic/src/layouts/group/group-layout.ts)\n* [Categorization (via Tabs)](https://github.com/eclipsesource/jsonforms/tree/master/packages/ionic/src/layouts/categorization)\n\n## Controls\n* [ListWithDetail](https://github.com/eclipsesource/jsonforms/blob/master/packages/ionic/src/other/list-with-detail/list-with-detail-control.ts) \n  (a master/detail view where the master is rendered as a flat list)\n* Booleans\n  * [Checkbox](https://github.com/eclipsesource/jsonforms/blob/master/packages/ionic/src/controls/boolean/boolean-checkbox-control.ts)\n  * [Toggle](https://github.com/eclipsesource/jsonforms/blob/master/packages/ionic/src/controls/boolean/boolean-toggle-control.ts)\n* Strings\n  * [String](https://github.com/eclipsesource/jsonforms/blob/master/packages/ionic/src/controls/string/string-control.ts) (with format support for email/telephone)\n  * [Multiline string](https://github.com/eclipsesource/jsonforms/blob/master/packages/ionic/src/controls/string/multiline-control.ts)\n* [Date](https://github.com/eclipsesource/jsonforms/blob/master/packages/ionic/src/controls/date/date-control.ts)\n* Numbers\n  * [Number](https://github.com/eclipsesource/jsonforms/blob/master/packages/ionic/src/controls/number/number-control.ts)\n  * [Range](https://github.com/eclipsesource/jsonforms/blob/master/packages/ionic/src/controls/range/range-control.ts)\n* Enums (for strings/numbers)\n  * [Select](https://github.com/eclipsesource/jsonforms/blob/master/packages/ionic/src/controls/enum/enum-control.ts)\n  * [Autocomplete](https://github.com/eclipsesource/jsonforms/blob/master/packages/ionic/src/controls/enum/autocomplete-control.ts) (customizable)\n* [Labels](https://github.com/eclipsesource/jsonforms/blob/master/packages/ionic/src/other/label/label.ts)    \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feclipsesource%2Fjsonforms-ionic-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feclipsesource%2Fjsonforms-ionic-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feclipsesource%2Fjsonforms-ionic-playground/lists"}